bootstrap时间控件daterangepicker使用方法及各种小bug修复

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="moment.js"></script><script type="text/javascript" src="daterangepicker.js"></script><link rel="stylesheet" type="text/css" href="bootstrap.css" /><link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />

define("gallery/daterangepicker/1.3.7/daterangepicker-bs3.css",[],function(){ seajs.importStyle(".daterangepicker{position:absolute;color:inherit;.........}" )}) })

/** * 日历 * @param obj eles 日期输入框 * @param boolean dobubble 是否为双日期（true） * @param boolean secondNot 有无时分秒（有则true） * @return none */function calenders(eles,dobubble,secondNot){ var singleNot,formatDate; if(dobubble ==true){ singleNot = false; }else{ singleNot = true; } if(secondNot ==true){ formatDate = "YYYY-MM-DD HH:mm:ss"; }else{ formatDate = "YYYY-MM-DD"; }  $(eles).daterangepicker({ "singleDatePicker": singleNot,//是否为单日期 "timePicker": secondNot,//时间显示与否 "timePicker24Hour": secondNot,//是否按24小时式来显示 "timePickerSeconds": secondNot,//是否带秒 "showDropdowns":true,//是否显示年月下拉选项，可以快速定位到哪一年哪一月 "timePickerIncrement" :1, "linkedCalendars": false,//是否开始和结束连动，建议设为false，不然日期一直跳来跳去，首次使用者会觉得用户体检极度不佳 "autoApply":true,//是否自动应用，不带时分秒的都可以实现在选择完日期后自动关闭，带时分秒时不会自动关闭 "autoUpdateInput":false, //是否自动应用初始当前日期 "locale": {  "direction": "ltr",  "format": formatDate,  "separator": "~",  "applyLabel": "Apply",  "cancelLabel": "Cancel",  "fromLabel": "From",  "toLabel": "To",  "customRangeLabel": "Custom",  "daysOfWeek": [  "Su",  "Mo",  "Tu",  "We",  "Th",  "Fr",  "Sa"  ],  "monthNames": [  "一月",   "二月",   "三月",   "四月",   "五月",   "六月",   "七月",   "八月",   "九月",   "十月",   "十一月",   "十二月"  ],  "firstDay": 1 } }, function(start,end, label) { if(secondNot ==true&&dobubble ==true){  $(eles).val($.trim(start.format('YYYY-MM-DD HH:mm:ss')+'~'+end.format('YYYY-MM-DD HH:mm:ss'))); }else if(secondNot ==false&&dobubble ==true){  $(eles).val($.trim(start.format('YYYY-MM-DD')+'~'+ end.format('YYYY-MM-DD'))); }else if(secondNot ==false&&dobubble ==false){  $(eles).val(start.format('YYYY-MM-DD')); }else if(secondNot ==true&&dobubble ==false){  $(eles).val(start.format('YYYY-MM-DD HH:mm:ss')); } }); //清空 $(document).off('click','.clearBtns').on('click','.clearBtns',function(){ $(eles).val(''); })} 

<div class="input-group"> <input type="text" name="extractionDate11" id="extractionDate11" class="form-control dateStart" placeholder="请选择起始时间" readonly size="30"> <div class="input-group-addon clearBtns">x</div> </div> <span class="caret"></span>

outsideClick: function(e) { var target = $(e.target); // if the page is clicked anywhere except within the daterangerpicker/button // itself then call this.hide() if ( // ie modal dialog fix e.type == "focusin" || target.closest(this.element).length || target.closest(this.container).length || target.closest('.calendar-table').length ) return; // this.hide(); if (this.isShowing){ $(document).off('.daterangepicker'); $(window).off('.daterangepicker'); this.container.hide(); this.element.trigger('hide.daterangepicker', this); this.isShowing = false; } this.element.trigger('outsideClick.daterangepicker', this);},

/*this.oldStartDate = this.startDate.clone();this.oldEndDate = this.endDate.clone();this.previousRightTime = this.endDate.clone();*/this.oldStartDate = this.startDate;this.oldEndDate = this.endDate;this.previousRightTime = this.endDate;

clickRange: function(e) { var label = e.target.getAttribute('data-range-key'); this.chosenLabel = label; if (label == this.locale.customRangeLabel) { this.showCalendars(); // } else { }else if (!this.endDate && date.isBefore(this.startDate)) { this.autoUpdateInput=true;  //special case: clicking the same date for start/end,  //but the time of the end date is before the start date  this.setEndDate(this.startDate.clone()); } else { // picking end this.autoUpdateInput=true; var dates = this.ranges[label]; this.startDate = dates[0]; this.endDate = dates[1]; if (!this.timePicker) {  this.startDate.startOf('day');  this.endDate.endOf('day'); } if (!this.alwaysShowCalendars)  this.hideCalendars(); this.clickApply(); }},

} else if (!this.endDate && date.isBefore(this.startDate)) { this.autoUpdateInput=true; //special case: clicking the same date for start/end, //but the time of the end date is before the start date this.setEndDate(this.startDate.clone());} else { // picking end this.autoUpdateInput=true; if (this.timePicker) { var hour = parseInt(this.container.find('.right .hourselect').val(), 10); if (!this.timePicker24Hour) {  var ampm = this.container.find('.right .ampmselect').val();  if (ampm === 'PM' && hour < 12)  hour += 12;  if (ampm === 'AM' && hour === 12)  hour = 0; }

clickApply: function(e) { this.autoUpdateInput=true; this.hide(); this.element.trigger('apply.daterangepicker', this); },