?? 參考? https://www.bootcss.com/p/bootstrap-datetimepicker/? ? 可以下載資源晚顷，也有示例。
?? 1、個(gè)人對(duì)插件參數(shù)的梳理，因?yàn)樵吹刂返呐虐娌缓貌殚啞?/b>
?? 2邑贴、會(huì)提供一種用法限府。
?? 3、因?yàn)榇瞬寮腔赽ootstrap痢缎，最后也會(huì)在注意事項(xiàng)中寫一些在應(yīng)用中的各種樣式或需求的具體實(shí)現(xiàn)。
??
?? 視圖對(duì)應(yīng)參數(shù) -- 0分鐘 1小時(shí) 2天 3月 4年
? ?天對(duì)應(yīng)參數(shù)? -- 0日 1 2 3 4 5 6
示例
?<input id="beginTime"?type="datetime"? readonly>
$("#beginTime").datetimepicker({
????? format:?'yyyy-mm-dd?hh:ii:ss',
????? language:?'zh-CN',
????? startView:?2,
????? endDate:?new?Date(),
????? maxView:3,
????? minuteStep:5,
????? todayBtn:?true,
????? keyboardNavigation:?true,
????? autoclose:?true
});
? 常用參數(shù)
? ? ? 參數(shù)? ? ? ? ? ????????? 默認(rèn)值? ? ? ? ? ? ????????? 解析
? ? ? format：? ? ? ?????? yyyy-mm-dd hh:ii? ? yyyy-mm-dd hh:ii:ss
? ? ? weekStart：? ???? 0(周日)? ? ? ? ? ? ? ? ? ? 一周從哪一天開始
? ? ? startDate：? ? ? ? ? ? ? ? ? ? ? ????????????????? 開始時(shí)間
? ? ? endDate：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 結(jié)束時(shí)間
? ? ? autoclose：? ? ??? false? ? ? ? ? ? ??????????? 當(dāng)選擇一個(gè)日期之后是否立即關(guān)閉此日期時(shí)間選擇器世澜。
? ? ? startView：? ? ???? 2(month)? ? ? ? ? ?????? 0小時(shí) 1天（默認(rèn)） 2月 3年 4年
? ? ? minView：? ? ????? 0(hour)? ? ? ? ? ???????? 日期時(shí)間選擇器所能夠提供的最精確的時(shí)間選擇視圖
? ? ? maxView：? ? ? ?? 4(decade)? ? ? ? ????? 日期時(shí)間選擇器最高能展示的選擇范圍視圖
? ? ? todayBtn：? ? ? ?? false? ? ? ? ? ? ? ? ? ? ? 如果此值為true,顯示一個(gè)按鈕用以選擇當(dāng)前日期独旷。?
? ? ? todayHighlight： false? ? ? ? ? ? ????????? 如果為true, 高亮當(dāng)前日期。
? ? ? language? ? ? ?
? ? ? forceParse：? ? ? ? ? ? ? ? ? ? ? ? 是否按照給定的格式format設(shè)置到輸入框中
? ? ? minuteStep：? ? 5? ? ? ? ? ? ? ? ? 分鐘視圖的步進(jìn)寥裂。
? ? ? keyboardNavigation:? ? true? ? ? ? 是否允許通過(guò)方向鍵改變?nèi)掌凇?鍵盤方向鍵)
? ? ? daysOfWeekDisabled
? 方法
? ? ? $().datetimepicker(options)
? ? ? options=
? ? ? ? ? remove? ? ? ? ?? 無(wú)參? ? ? ? ? ? ? ?? ? ? 移除日期時(shí)間選擇器嵌洼。同時(shí)移除已經(jīng)綁定的event、內(nèi)部綁定的對(duì)象和HTML元素封恰。? ? ? ?
? ? ? ? ? show? ? ? ? ? ? ? 無(wú)參? ? ? ? ? ?? ? ? ? ? 顯示日期時(shí)間選擇器麻养。
? ? ? ? ? hide? ? ? ? ? ???? 無(wú)參
? ? ? ? ? update? ? ? ? ??? 無(wú)參? ? ? ? ? ? ? ? ? ? 使用當(dāng)前輸入框中的值更新日期時(shí)間選擇器。
? ? ? ? ? setStartDate? ? '2012-01-01'? ? ? 給日期時(shí)間選擇器設(shè)置一個(gè)新的起始日期诺舔。
? ? ? ? ? setEndDate? ? ? new Date()? ? ?? 給日期時(shí)間選擇器設(shè)置結(jié)束日期鳖昌。
? ? ? ? ? setDaysOfWeekDisabled [0,6]? ? 不顯示的天
? 事件
? ? ? .on('changeDate', function(ev){
? ? ? });
? ? ? show? ? ? ? 當(dāng)選擇器顯示時(shí)被觸發(fā)。
? ? ? hide? ? ? ? 當(dāng)選擇器隱藏時(shí)被觸發(fā)低飒。
? ? ? changeDate? 當(dāng)日期被改變時(shí)被觸發(fā)许昨。? ?
? ? ? changeYear? 當(dāng)十年視圖（選擇年的視圖）上的年視圖view被改變時(shí)觸發(fā)。
? ? ? changeMonth 當(dāng)年視圖（選擇月的視圖）上的月視圖view被改變時(shí)觸發(fā)褥赊。
? ? ? outOfRange? 當(dāng)用戶選擇的日期超出startDate 或endDate 時(shí)糕档，或者通過(guò)setDate 或 setUTCDate方法設(shè)置日期超出范圍時(shí)被觸發(fā)。
? 國(guó)際化
????? 這里可以自定義拌喉，需要在渲染datetimepicker之間定義
$.fn.datetimepicker.dates['zh-CN']?=?{???
????? days:?["星期日",?"星期一",?"星期二",?"星期三",?"星期四",?"星期五",?"星期六",?"星期日"],???
????? daysShort:?["周日",?"周一",?"周二",?"周三",?"周四",?"周五",?"周六",?"周日"],???
????? daysMin:?["日",?"一",?"二",?"三",?"四",?"五",?"六",?"日"],???
????? months:?["一月",?"二月",?"三月",?"四月",?"五月",?"六月",?"七月",?"八月",?"九月",?"十月",?"十一月",?"十二月"],???
????? monthsShort:?["一月",?"二月",?"三月",?"四月",?"五月",?"六月",?"七月",?"八月",?"九月",?"十月",?"十一月",?"十二月"],???
????? today:?"今天",???
????? suffix:?[],???
????? meridiem:?["上午",?"下午"]
};
? 應(yīng)用
? 開始-結(jié)束時(shí)間
?? datetime-half 需要在 form-group中生效
<div?class="form-group">
???? <input?name="beginTime"?id="beginTime"?type="datetime"?class="form-control?datetime-half"?readonly>??????????????
???? <span?class="input-center-span">-</span>???????????????
???? <input?name="endTime"?id="endTime"?type="datetime"?class="form-control?datetime-half?pull-right"
</div>$("#beginTime,?#endTime").datetimepicker({???
????? format:?'yyyy-mm-dd?hh:ii:ss',???
????? language:?'zh-CN',???
????? startView:?2,???
????? endDate:?new?Date(),???
????? maxView:3,???
????? minuteStep:5,???
????? todayBtn:?true,???
????? autoclose:?true,???
????? keyboardNavigation:?false
});//當(dāng)日期改變時(shí) 需要設(shè)置另一個(gè)的限制
$("#beginTime").datetimepicker().on('changeDate', function(ev) {
?????? var startTime = ev.date.getTime();
??????$('#endTime').datetimepicker('setStartDate', new Date(startTime));
});
$("#endTime").datetimepicker().on('changeDate', function(ev) {
??????var endTime = ev.date.getTime();
??????$('#beginTime').datetimepicker('setEndDate', new Date(endTime));
});
如果需要在初始化中設(shè)置時(shí)間
這里需要先給date加一個(gè)方法速那，格式化一下date對(duì)象
/*??Date格式轉(zhuǎn)換?yyyy-MM-dd?hh:mm:ss.S
*???author:?meizz
?*???URL:https://blog.csdn.net/meizz/article/details/405708
*???對(duì)Date的擴(kuò)展，將?Date?轉(zhuǎn)化為指定格式的String
*???月(M)尿背、日(d)端仰、小時(shí)(h)、分(m)残家、秒(s)榆俺、季度(q)?可以用?1-2?個(gè)占位符，
*???年(y)可以用?1-4?個(gè)占位符坞淮，毫秒(S)只能用?1?個(gè)占位符(是?1-3?位的數(shù)字)
?*???例子：
*???(new?Date()).Format("yyyy-MM-dd?hh:mm:ss.S")?==>?2006-07-02?08:09:04.423
*???(new?Date()).Format("yyyy-M-d?h:m:s.S")??????==>?2006-7-2?8:9:4.18
*/
Date.prototype.Format?=?function(fmt)?{???
var?o?=?{???????
????? "M+":?this.getMonth()?+?1,?//月份????????
????? "d+":?this.getDate(),?//日???????
?????? "h+":?this.getHours(),?//小時(shí)????????
????? "m+":?this.getMinutes(),?//分????????
????? "s+":?this.getSeconds(),?//秒???????
????? ?"q+":?Math.floor((this.getMonth()?+?3)?/?3),?//季度????????
"S":?this.getMilliseconds()?//毫秒????
};???
if?(/(y+)/.test(fmt))?fmt?=?fmt.replace(RegExp.$1,?(this.getFullYear()?+?"").substr(4?-?RegExp.$1.length));???
for?(var?k?in?o)??
?????? if?(new?RegExp("("?+?k?+?")").test(fmt))?fmt?=?fmt.replace(RegExp.$1,?(RegExp.$1.length?==?1)??
????? (o[k])?:
????? (("00"?+?o[k]).substr((""?+?o[k]).length)));???
????? return?fmt;
}
當(dāng)然你也可以用date原生的getMonth茴晋。。回窘。來(lái)拼接
$("#beginTime").val(new Date().Format("yyyy-MM-dd 00:00:00"))
//需要給 結(jié)束時(shí)間input 設(shè)置 開始時(shí)間限制
$('#endTime').datetimepicker('setStartDate', new Date().Format("yyyy-MM-dd 00:00:00"));
$("#endTime").val(new Date().Format("yyyy-MM-dd hh:mm:ss"))
