项目需求选择时间,精确到分钟。
jquery本身是有timepicker这个插件可以使用的,不过由于项目使用的是bootstrap插件,整体风格不一致,于是便使用了datetimepicker这个第三方的插件。
这个插件需要在项目中增加css文件和js文件,分别为:
1.bootstrap-datetimepicker.css
2.bootstrap-datetimepicker.js
3.bootstrap-datetimepicker.zh-CN.js
这三个文件可以从官网直接下载
使用:还是直接贴代码吧
$("#onlineTime").datetimepicker({
showSecond : true,
showHours : true,
startView:1,
maxView:1,
format : 'yyyy-mm-dd hh:ii:ss',
minuteStep:1,
changeYear : true,
autoclose:true,
language:'zh-CN',
});
需要注意的是,这里的很多选项和bootstrap中datepicker是不一样的,并没有dateformate这个参数,同时参数的内容也不同
贴上datepicker的使用代码,方便对照参考
$('#starttime').datepicker({
format : "yyyy-mm-dd",
todayBtn : true,
minViewMode : 0,
language : "zh-CN",
daysOfWeekDisabled : "",
orientation : "top auto",
calendarWeeks : true,
todayHighlight : true,
autoclose : true
});
附上三个注意点:
一个是view这一参数的定义,其实就是几个不同的视图,通过设置minViewMode以及MaxViewMode的值,可以控制该控件是显示年月日还是直接显示时分秒。
具体的值可以在官方文档中找到;
另外一点是format,初始化input标签的值时,填充的字符串务必和format规定的格式相同;
如果之前设置了时分秒,仅仅改变某一个参数,另外两个参数是不变的。(其实就是一个对象,如果你不设置起属性,这个属性值是不会改变的)
使用datetimepicker时,如果把分钟间隔设置为5分钟,同时期望在一天的时间内查询,那么23:55分之后的时间是无法选择的
分享到:
相关推荐
vue2-datepicker, 用于Vue2的datepicker/datetimepicker组件 vue2-datepicker中文版Vue2的Datepicker组件 演示https://mengxiong10.github.io/vue2-datepicker/demo/index.html 安装
datepicker的vue组件,包括DatePicker,DatetimePicker,DateRangePicker,TimePicker 资料库 演示版 运行示例 您可以通过运行模块示例来查看用法,这是步骤: 克隆库git clone ...
点1:参考文档不能选错,amaze的默认文档是http://amazeui.shopxo.net/getting-started/,但是当我们要使用datetimepicker是就要使用https://github.com/amazeui/datetimepicker, 这就是我想吐槽的地方了,amaze...
vue2-datepicker中文版Vue2演示的Datepicker组件https://mengxiong10.github.io/vue2-datepicker/index.html Install $ npm install vue2-datepicke vue2-datepicker英文版Vue2演示的Datepicker组件...
在Android上使用闹钟时,我发现了Android上出了个新的view来展示日期和时间,这些个view就是本文要介绍的DatePicker和TimePicker。 使用DatePicker和TimePicker方式也很简单,例子中主要展示了这两个view,另外要...
日期控件My97DatePicker的使用 日期控件My97DatePicker的使用
Android Studio DatePicker和TimePicker的使用
Android中的DatePicker和TimePicker控件使用,详细了解请移步http://blog.csdn.net/zxc514257857/article/details/52791649
My97DatePicker日期控件使用说明文档及插件,使用方便,适合web开发者使用的控件
日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用
WPF 自定义DateTimePicker(带时分秒选择)
在一个设置页面有两个输入框,想让用户敲击时,弹出日期控件,选择日期时间。
1、jqueryui中的datepicker的简单使用说明 2、datepicker中选中日期后,不刷新datepicker的方法 3、datepicker的日程表样式。
ASP.NET日期控件datepicker的使用方法!
My97DatePicker时间控件包和使用
vue2-datepickerVue2的Datepicker组件演示版安装$ npm install vue2-datepicker --save用法< script > import DatePicker from 'vue2-datepicker' ; import 'vue2-datepicker/index.css' ; export default { ...
bootstrap-datetimepicker时间控件使用小demo,bootstrap-datetimepicker时间控件使用小demo
DateTimePicker DatePicker/DateTimePicker/HourMinutePicker/TimePicker/YMDHPickerallprojects { repositories { ... maven { url '...
jQuery UI Datepicker IE8 使用的基本解决方法:解决:IE8无法响应其中jquery.ui.datepicker部分标签a(无href)的onclick事件,和td由于放入标签a href="#",无法响应自身onclick事件,只验证了icon-trigger模式,...
My97DatePicker使用 日期获取 用程序获取本日,本周,本月日期段。