jquery ui 日期控件

阅读更多

需要提前引入jquery ui 相关的包

1.不带时分秒的日期控件，而且可以控制其开始日期的选择只能在结束日期的前面，结束日期的选择只能在开始日期的后面

开始日期

结束日期

 

function  initDate(startDate,endDate){
    $(startDate).datepicker( "destroy" );
    $(endDate).datepicker( "destroy" );
    $(startDate).datepicker({
     changeMonth: true,
     changeYear: true,
     showMonthAfterYear:true,
     dateFormat: 'yy-mm-dd',
     onSelect:function(dateText,inst)
     {
      var  arys  = new Array();
      var  arys  =  dateText.split('-');
      $(endDate).datepicker('option','minDate',new  Date(arys[0],arys[1]-1,arys[2]));
     }
    });
    $(endDate).datepicker({
     changeMonth: true,
     changeYear: true,
     showMonthAfterYear:true,
     dateFormat: 'yy-mm-dd' ,
     onSelect:function(dateText,inst)
     {
      var  arys  = new Array();
      var  arys  =  dateText.split('-');
      $(startDate).datepicker('option','maxDate',new  Date(arys[0],arys[1]-1,arys[2]));
     }
    });
  }

 

2.带时分秒的日期控件，与上面的日期控件有相同的功能 

首先引入jquerytimepicker包

声明变量

var myControl=  {
  create: function(tp_inst, obj, unit, val, min, max, step){
   $('')
    .appendTo(obj)
    .spinner({
     min: min,
     max: max,
     step: step,
     change: function(e,ui){ // key events
       // don't call if api was used and not key press
       if(e.originalEvent !== undefined)
        tp_inst._onTimeChange();
       tp_inst._onSelectHandler();
       
      },
     spin: function(e,ui){ // spin events
       tp_inst.control.value(tp_inst, obj, unit, ui.value);
       tp_inst._onTimeChange();
       tp_inst._onSelectHandler();
      }
    });
   return obj;
  },
  options: function(tp_inst, obj, unit, opts, val){
   if(typeof(opts) == 'string' && val !== undefined)
    return obj.find('.ui-timepicker-input').spinner(opts, val);
   return obj.find('.ui-timepicker-input').spinner(opts);
  },
  value: function(tp_inst, obj, unit, val){
   if(val !== undefined)
    return obj.find('.ui-timepicker-input').spinner('value', val);
   return obj.find('.ui-timepicker-input').spinner('value');
  }
 };

 

function  initDate(startDate,endDate){
 $(startDate).datetimepicker( "destroy" );
 $(endDate).datetimepicker( "destroy" );
 $(startDate).datetimepicker({
  controlType: myControl,
  onSelect:function(dateText,inst)
  {
   var  arys  = new Array();
   // 日期的字串格式为2013-08-15 00:00
   var  arys  =  dateText.split('-');
   // 分割15 00:00 得到15
   var  dayAndTime = arys[2].split(' ');
   $(endDate).datetimepicker('option','minDate',new  Date(arys[0],arys[1]-1,dayAndTime[0]));
  }
 });
 $(endDate).datetimepicker({
  controlType: myControl,
  onSelect:function(dateText,inst)
  {
   var  arys  = new Array();
   var  arys  =  dateText.split('-');
   var  dayAndTime = arys[2].split(' ');
   $(startDate).datetimepicker('option','maxDate',new  Date(arys[0],arys[1]-1,dayAndTime[0]));
  }
 });
}