datetimepicker

先在这里开个头,这个问题可以好好说道说道,一个好的日期选择器可不是那么轻易用个插件就能满足需求。

1 分析需求

我们先说pc端,一般的,我们需要点击一下input框,出来一个日期选择框。这里分几个选择:time(时分秒) date(年月日) datetime(年月日 时分秒)。

移动端,这里就会需求以滑动或是点击的方式来实现日期选择,可以手指上下滑动,顺畅选择,或是点击加减按钮,也可以实现。同样的,三个不同的选择,也是必须的。

2 现有插件

现在市面有的日期选择插件,做的比较好看实用的,有几个:jquery的datetimepicker插件 还有bootstrap的

3 遇到什么问题

但是也有限制,现有的插件不能满足我们的需求。比如引入一个插件影响性能,体积太大,加载速度慢。在移动端的日期选择器,最好用原生js写,但是现在没有做的很好的。

4 实现

这个先留着,后续再谈。

时间: 2024-10-12 21:54:23

datetimepicker的相关文章

Struts2中datetimepicker标签

在以前的struts2版本中s:datetimepicker只需要在head标签处设置<s:head theme="ajax"/>,就可以直接使用s:datetimepicker的标签了.而在2.1.6版本中不能直接这样使用了,将datetimepicker移除了.原因是此标签调用了dojo的datetimepicker的库.所以现在使用的时候首先要导入一个库:struts2-dojo-plugin-2.1.6.jar.然后还要设置dojo的taglib<%@ tag

C#中将dateTimePicker初始值设置为空

最近在做一个小项目,有一个功能是根据用户选择条件查询数据,要求时间控件的默认值为空,只有当用户修改了时间,才根据时间查询.简单的说,就是默认或者点击清空按钮的情况下,时间控件dateTimePicker的值为空,当触发事件ValueChanged时再显示相对应的时间. 开始,我以为修改控件的默认值为空就可以了,但是我失败了,dateTimePicker不允许空值.尝试了很多次之后我开始在网上找资料,寻到了如下方法: 窗体初始化或者放一个清空按钮,点击清空按钮时执行如下代码: C#代码 : thi

DateTimePicker:jQuery日期和时间插件

http://www.jq22.com/jquery-info332 <link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ > <script src="jquery.js"></script> <script src="jquery.datetimepicker.js"&g

日期时间选择器:datetimepicker

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>演示:日期时间选择器:datetimepicker</title> <link rel="stylesheet" type="text/css" href="css/main.css" /> <link rel=&quo

Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑.而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊. 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学,但是相对于成熟的j

可设置空值(Nullable)的DateTimePicker

由于WinForm自带的DateTimePicker不能设置空值(Null),所以我基于原来的DateTimePicker做了扩展. 若有bug,可反馈,我再修改. using System; using System.ComponentModel; using System.Windows.Forms; namespace WinFormTest { public class DateTimePicker2 : DateTimePicker { const string NullableFor

How to enable DateTimePicker to use both date and time z

Recently in one of my project I needed to have an option to display the DateTimePicker allowing user to pick both the date and the time. When I drag the control onto the form however I could only chooses the date or the time but not both. Well actual

添加一个时间插件: 1.把插件放到 public目录 下 datetimepicker

<!-- 引入时间插件 --><link href="__PUBLIC__/datetimepicker/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" /><script type="text/javascript" charset="utf-8" src="__PUBLIC__/da

bootstrap datetimepicker 中只显示年或者只显示月份

1.只显示datetimepicker  日历中只显示年份 $("#day-access-calendar").datepicker({ startView: 2, maxViewMode: 2, minViewMode:2, format: "yyyy",//选择日期后,文本框显示的日期格式 language: "zh-CN" //汉化 }); 主要为:startView: 2, maxViewMode: 2,minViewMode:2, 这三

物联网平台设计心得:DateTimePicker实现选择联动

所谓的选择联动,就是指,当我DateTimePicker1选择2月4号的时候,我DateTimePicker2只能选择2月4号和2月5号两天,当然你可以自行规定要选择的日期.这在一些图表查询条件里面是很常用的一个功能.下面我们就来看看如何设计. DateTimePicker的选取与使用 在这里,我们使用的DateTimePicker是一个开源的组件,他的model名称为:ui.bootstrap.datetimepicker,我们可以去这个网址找到其相关的内容:http://dalelotts.