jdate

功能描述

多格式、功能强大的移动端日期选择插件

快速使用

  1. 调用jdate.min
  2. <script type="text/javascript" src="libs/jdate.min.js"></script>
  4. 存放时间的位置
  5. 例1：
  6. <div class="form-group clearfix">
  7.     <div class="col-xs-6">
  8.         <input readonly class="form-control" type="text" id="date-group1-1" placeholder="YYYY-MM">
  9.     </div>
  10.     <div class="col-xs-6">
  11.         <input readonly class="form-control" type="text" id="date-group1-2" placeholder="YYYY-MM-DD">
  12.     </div>
  13. </div>
  16. js调用插件
  17. // 格式
  18.     new Jdate({
  19.         el: '#date-group1-1',
  20.         format: 'YYYY-MM',
  21.         beginYear: 2000,
  22.         endYear: 2100
  23.     })
  24.     new Jdate({
  25.         el: '#date-group1-2',
  26.         format: 'YYYY-MM-DD',
  27.         beginYear: 2000,
  28.         endYear: 2100
  29.     })
  31. 例2：
  32. <div class="form-group clearfix">
  33.     <div class="col-xs-6">
  34.         <input readonly class="form-control" type="text" id="date-group2-1" placeholder="完整实例">
  35.     </div>
  36. </div>
  38. js调用插件
  40. /* 回调函数
  41.  * tips:    在vue及其他mvvm框架中使用时，在confirm中修改v-model绑定的数据即可
  42.  */
  43. new Jdate({
  44.     el: '#date-group2-1',
  45.     format: 'YYYY-MM-DD',
  46.     beginYear: 2000,
  47.     endYear: 2100,
  48.     init: function() {
  49.         console.log('插件开始触发');
  50.     },
  51.     moveEnd: function() {
  52.         console.log('滚动结束');
  53.     },
  54.     confirm: function(date) {
  55.         console.log(date)
  56.         console.log('确定按钮触发');
  57.     },
  58.     cancel: function() {
  59.         console.log('插件运行取消');
  60.     }
  61. })

特别说明

  1. html页面中存放的id都有对应的js调用后面跟有注释。