日期联动效果

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

一：angularjs用法

html

    
    
—
    

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

    
    ——
    

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());
      }
    })
};