首页 热点资讯 义务教育 高等教育 出国留学 考研考公
您的当前位置:首页正文

日期联动效果

2024-12-14 来源:化拓教育网

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());
      }
    })
};
显示全文