datetimepicker(使用/漢化)-- Bootstrap日期和時(shí)間表單組件

?? 參考? 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));
});


開始-結(jié)束時(shí)間

如果需要在初始化中設(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"))

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末诺擅,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子啡直,更是在濱河造成了極大的恐慌烁涌,老刑警劉巖苍碟,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異撮执,居然都是意外死亡微峰,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門抒钱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蜓肆,“玉大人,你說(shuō)我怎么就攤上這事谋币≌萄铮” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵蕾额,是天一觀的道長(zhǎng)早芭。 經(jīng)常有香客問(wèn)我,道長(zhǎng)诅蝶,這世上最難降的妖魔是什么退个? 我笑而不...
    開封第一講書人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮秤涩,結(jié)果婚禮上帜乞,老公的妹妹穿的比我還像新娘。我一直安慰自己筐眷,他們只是感情好黎烈,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著匀谣,像睡著了一般照棋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上武翎,一...
    開封第一講書人閱讀 52,807評(píng)論 1 314
  • 那天烈炭,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛面氓,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播霹疫,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼综芥!你這毒婦竟也來(lái)了丽蝎?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤膀藐,失蹤者是張志新(化名)和其女友劉穎屠阻,沒(méi)想到半個(gè)月后红省,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡国觉,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年吧恃,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片麻诀。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蚜枢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出针饥,到底是詐尸還是另有隱情,我是刑警寧澤需频,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布丁眼,位于F島的核電站,受9級(jí)特大地震影響昭殉,放射性物質(zhì)發(fā)生泄漏苞七。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一挪丢、第九天 我趴在偏房一處隱蔽的房頂上張望蹂风。 院中可真熱鬧,春花似錦乾蓬、人聲如沸惠啄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)撵渡。三九已至,卻和暖如春死嗦,著一層夾襖步出監(jiān)牢的瞬間趋距,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工越除, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留节腐,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓摘盆,卻偏偏與公主長(zhǎng)得像翼雀,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子骡澈,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361