OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

bootstrap-datetimepicker时间日期范围选取组件使用说明及简单教程


分享到


分类 JS学习   关键字 JavaScript   发布 ourjs  1541682485873
注意 转载须保留原文链接,译文链接,作者译者等信息。  
目前有两个时间日期选择模块可以使用。

bootstrap-datetimepicker


项目地址: https://github.com/Eonasdan/bootstrap-datetimepicker

特点是可以选择日期和时间。

安装js/css

从git上下载完整的zip包,找到以下这两个文件放到项目中,此项目依赖moment的翻译和日期格式化,所以可以加上 moment-with-locales.min.js 的引用: https://github.com/moment/moment

<link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<script src="/js/moment-with-locales.min.js"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>

使用

使用中文的日历,并且只可选择日期,此时可设置 format 为 YYYY-MM-DD,具体格式可查看 moment 的日期格式设置:

  $(selector).datetimepicker({
      locale: 'zh-CN'
    , format: "YYYY-MM-DD"
  })

示例

<div class="input-group">
  <label class="input-group-addon">开始时间</label>
  <input type="text" class="form-control" data-datetime-picker="YYYY-MM-DD" id="datetime-start">
  <span class="input-group-addon">
    <i class="glyphicon glyphicon-calendar"></i>
  </span>

  <span class="input-group-addon">结束时间</span>
  input type="text" class="form-control" data-datetime-picker="YYYY-MM-DD" id="datetime-stop">
  <span class="input-group-addon">
    <i class="glyphicon glyphicon-calendar"></i>
  </span>
</div>

绑定代码,使用统一的绑定代码:

$('[data-datetime-picker]').each(function() {
  var $this   = $(this)
  var format  = $this.attr('data-datetime-picker')

  $this.datetimepicker({
      locale: 'zh-CN'
    , format: format
  })
})

效果:


手动触发

针对上面的示例,可使用代码手动弹出日期选择器:

$('#datetime-start').data("DateTimePicker").show()

打印 data("DateTimePicker") 可查看所有的功能:

  1. allowInputToggle: ƒ (a)
  2. calendarWeeks: ƒ (a)
  3. clear: ƒ ()
  4. collapse: ƒ (a)
  5. date: ƒ (a)
  6. datepickerInput: ƒ (a)
  7. dayViewHeaderFormat: ƒ (a)
  8. daysOfWeekDisabled: ƒ (a)
  9. debug: ƒ (a)
  10. defaultDate: ƒ (a)
  11. destroy: ƒ ()
  12. disable: ƒ ()
  13. disabledDates: ƒ (b)
  14. disabledHours: ƒ (b)
  15. disabledTimeIntervals: ƒ (b)
  16. enable: ƒ ()
  17. enabledDates: ƒ (b)
  18. enabledHours: ƒ (b)
  19. extraFormats: ƒ (a)
  20. focusOnShow: ƒ (a)
  21. format: ƒ (a)
  22. getMoment: ƒ (a)
  23. hide: ƒ ()
  24. icons: ƒ (b)
  25. ignoreReadonly: ƒ (a)
  26. inline: ƒ (a)
  27. keepInvalid: ƒ (a)
  28. keepOpen: ƒ (a)
  29. keyBinds: ƒ (a)
  30. locale: ƒ (a)
  31. maxDate: ƒ (a)
  32. minDate: ƒ (a)
  33. options: ƒ (b)
  34. parseInputDate: ƒ (a)
  35. show: ƒ ()
  36. showClear: ƒ (a)
  37. showClose: ƒ (a)
  38. showTodayButton: ƒ (a)
  39. sideBySide: ƒ (a)
  40. stepping: ƒ (a)
  41. timeZone: ƒ (a)
  42. toggle: ƒ ()
  43. toolbarPlacement: ƒ (a)
  44. tooltips: ƒ (b)
  45. useCurrent: ƒ (a)
  46. useStrict: ƒ (a)
  47. viewDate: ƒ (a)
  48. viewMode: ƒ (a)
  49. widgetParent: ƒ (b)
  50. widgetPositioning: ƒ (b)


bootstrap-datepicker


项目地址: https://github.com/uxsolutions/bootstrap-datepicker

特点是只能选择日期,从代码风格上看应该是 bootstrap-datetimepicker 的源项目,有比较完整的翻译文件。


bootstrap-datetimepicker


项目地址: https://github.com/smalot/bootstrap-datetimepicker

这个项目是基于 bootstrap-datepicker 扩展而来的,增加了 time 的支持。目前已经停止维护,不过代码仍然可用,支持Bootstrap 2.x/Bootstrap 3.x。有完整的翻译文件可用。


社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. Redis/Python被要求更改Master/Slave程序接口名称和描述
  2. 用JavaScript测试图像上两点之间的距离
  3. 用纯CSS改变html radio/checkbox默认背景颜色样式
  4. 用JavaScript实现basename获取路径中的文件名
  5. css去掉table的td单元格的间距cellspacing,设置隔行显示不同背景颜色
  6. redis5.x新特性,Stream流数据类型使用简单教程
  7. Redis只往zset有序集合添加不存在的数据:关键字索引查询构建+源码分析
  8. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - JS学习
  1. 用JavaScript实现basename获取路径中的文件名
  2. 用JavaScript测试图像上两点之间的距离
  3. JavaScript运算出现很多小数导致运算不精确的问题,用toFixed解决
  4. 使用Node.JS批量查找替换目录下文本文件中图片地址内容
  5. 判断Node.JS TCP Socket当前连接状态
  6. Node.JS进程间通讯的几种方法:Redis Publish/Subscribe 和 UDP Socket
  7. 用JavaScript实现node.js中的path.join方法
  8. JavaScript中新建一个带全局变量参数的new Function动态函数
  9. 设置select元素中option的默认值
  10. JavaScript用Number/parseInt/parseFloat判断字符串是否为数字

 关键字 - JavaScript
  1. javascript将所有不确定个数的参数传递给另一个函数,将arguments转化为数组即可
  2. 使用Bootstrap、Electron和JavaScript开发桌面应用
  3. JavaScript如何快速高性能清空删除Array数组中的所有元素,并保持引用
  4. JavaScript无引用复制一个Array数组的每一个元素到另一个数组
  5. JavaScript使用类似break机制中断forEach循环
  6. 用JavaScript实现node.js中的path.join方法
  7. 用jQuery将JavaScript对象转换为querystring查询字符串
  8. 用JavaScript往select元素中添加new option下拉选项
  9. bootstrap-datetimepicker时间日期范围选取组件使用说明及简单教程
  10. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号