下载地址:https://github.com/Eonasdan/bootstrap-datetimepicker

先上效果图:DateTimePicker

在github上找了不少datepicker组件, 后来发现 有多个版本

一个datepicker版本的 两个 datetimepicker版本的 有些资料说 后边的两个都是datepicker的一个分支

这些不多说了,项目需要,我选择了带时间的,学习总结如下:

1.初始化

$('#id').datetimepicker();//最简单的初始化控件

2.设置日期格式:

$('#id').datetimepicker({

 format: 'YYYY-MM-DD'  // 这里说明年月日都是 大写 否则错误,这一点可能跟 本地化使用Moment.js 有关系,详细去查询Moment官网 http://momentjs.cn/

});

3.只使用日期,或者只使用时间,这些完全在于你设置的日期格式,可以自测

4.如果想从年份开始选起,那么需要设置viewmode

  viewMode: 'years'
5.在一般组件中,我们可能会考虑禁用用户输入,这里我们多虑了,datetimepicker 完全自己校验,在你输入完成并失去文本框焦点的那一刻,会自动校验,输入正确那么设置值,输入错误那么不设置,这里给出了更多的灵活性,给作者赞一个

6.禁用某一星期中的 某一天 这里禁用了周一和周日

 daysOfWeekDisabled: [0, 6]

7.显示今天的按钮,可以一键跳转到当天

 showTodayButton:true, //设置为true即可

当然还有很多用法,留一个链接大家自己学习吧

http://eonasdan.github.io/bootstrap-datetimepicker/#bootstrap-3-datepicker-v4-docs


Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐