让前端飞

日期联动效果

2018-11-07  本文已影响2人  jerryst

ps:需要引入的插件:bootstrap.css, bootstrap-datepicker.css ,jq,bootstrap-datepicker.min.js,bootstrap-datepicker.zh-CN.min.js

一:angularjs用法

html
<div class="litModuWrap" >
    <input id='startTime' ng-model='vm.startTime' placeholder="开始时间"/>
    <p>—</p>
    <input id='endTime' ng-model='vm.endTime' placeholder="结束时间"/>
</div>
controller
commonFn.datePicker('#startTime','#endTime');
service
//datePack:开始时间-结束时间联动
datePicker: function(beginSelector, endSelector) {
    // 仅选择日期
    $(beginSelector).datepicker({
      language: "zh-CN",
      autoclose: true,
      startView: 0,
      format: "yyyy-mm-dd",
      timeFormat: 'hh:mm:ss',
      clearBtn: true,
      todayBtn: false,
      endDate: new Date()
    }).on('changeDate', function(ev) {
      if (ev.date) {
        $(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()))
      } else {
        $(endSelector).datepicker('setStartDate', null);
      }
    })
    $(endSelector).datepicker({
      language: "zh-CN",
      autoclose: true,
      startView: 0,
      format: "yyyy-mm-dd",
      clearBtn: true,
      todayBtn: false,
      endDate: new Date()
    }).on('changeDate', function(ev) {
      if (ev.date) {
        $(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))
      } else {
        $(beginSelector).datepicker('setEndDate', new Date());
      }
    })
},

二:原生js用法

html
<div class="box clearfix">
    <input id='startTime' type="" placeholder="开始时间" />
    <span>——</span>
    <input id='endTime' type="" placeholder="结束时间" />
</div>
js
datePicker('#startTime','#endTime');

//时间插件封装
function datePicker(beginSelector, endSelector) {
    // 仅选择日期
    $(beginSelector).datepicker({
      language: "zh-CN",
      autoclose: true,
      startView: 0,
      format: "yyyy-mm-dd",
      timeFormat: 'hh:mm:ss',
      clearBtn: true,
      todayBtn: false,
      endDate: new Date()
    }).on('changeDate', function(ev) {
      if (ev.date) {
        $(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()))
      } else {
        $(endSelector).datepicker('setStartDate', null);
      }
    })
    $(endSelector).datepicker({
      language: "zh-CN",
      autoclose: true,
      startView: 0,
      format: "yyyy-mm-dd",
      clearBtn: true,
      todayBtn: false,
      endDate: new Date()
    }).on('changeDate', function(ev) {
      if (ev.date) {
        $(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))
      } else {
        $(beginSelector).datepicker('setEndDate', new Date());
      }
    })
};
上一篇下一篇

猜你喜欢

热点阅读