DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> bootstrap datetimepicker2.3.11時間插件使用
bootstrap datetimepicker2.3.11時間插件使用
編輯:關於JavaScript     

本文實例為大家分享了bootstrap datetimepicker使用方法,供大家參考,具體內容如下

時間插件之結束時間不能小於開始時間

changeDate: function (starttime,stoptime) {      //判斷時間的大小彈窗提示用戶
 var _t = this;
  if(stoptime != '' && starttime != ''){
   if(stoptime < starttime){
    $('#stop-date').val('');
    $('#time').modal('show');
    setTimeout(function(){($('#time').modal('hide'))},3000);
    return;
   }
  }
 },
 timeDatapicker:function () {
  var _t = this;           //this
  var startDate = $('#start-date'),      //開始時間
   stopDate = $('#stop-date');       //結束時間

  startDate.datetimepicker({
   format: 'yyyy-mm-dd',
   autoclose: true,
   minView: 2,
   language:'zh-CN'
  }).on('change',function () {       //changeData方法寫在change之後,是為了防止changeData有changge方法(避免沖突)
   var starttime = startDate.val();
   var stoptime = stopDate.val();
   _t.changeDate(starttime,stoptime);
   stopDate.datetimepicker('setStartDate',starttime); //結束時間的選擇將以選擇的開始時間為依據從新設置(等於開始 時間)

  }).on('changeDate',function () {
   var starttime = startDate.val();
   stopDate.datetimepicker('setStartDate',starttime); //結束時間的選擇將以選擇的開始時間為依據從新設置(等於開始 時間)
   var stoptime = stopDate.val();
  });

  stopDate.datetimepicker({
   format: 'yyyy-mm-dd',
   autoclose: true,
   minView: 2,
   language:'zh-CN'
  }).on('change',function () {
   var starttime = startDate.val();
   var stoptime = stopDate.val();
   _t.changeDate(starttime,stoptime,$(this));

  }).on('changeDate',function () {

   var starttime = startDate.val();
   var stoptime = stopDate.val();
   startDate.datetimepicker('setEndDate',stoptime);
   stopDate.datetimepicker('setStartDate',starttime);
  });

 },

如果大家還想深入學習,可以點擊這裡進行學習,再為大家附3個精彩的專題:

Bootstrap學習教程

Bootstrap實戰教程

Bootstrap插件使用教程

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved