Bootstrap每天必學(xué)之日期控制
一個成熟的框架,日期控制是少不了的,在網(wǎng)上也有很多日期控制可以選擇,而主框架用了bootstrap,日期控制也當(dāng)前要用它自己的,
控件地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
GitHub上開源地址:https://github.com/smalot/bootstrap-datetimepicker
在使用datetimepicker之前,先要經(jīng)過以下幾個步驟
1、引用JS腳本庫
<script src="/Content/bootstraps/js/bootstrap.js"></script> <script src="/Content/bootstraps/js/bootstrap-datetimepicker.js"></script> <script src="/Content/bootstraps/js/bootstrap-datetimepicker.zh-CN.js"></script>
其中bootstrap-datetimepicker.zh-CN.js表示可以使用中文的語言顯示日期時間
2、引入CSS類庫
<link href="/Content/bootstraps/css/bootstrap.css" rel="stylesheet"/> <link href="/Content/bootstraps/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
3、定義HTML標(biāo)簽
<input class="form_datetime form-control" type="text" value="2016-03-07" size="16">
4、編寫datetimepicker事件
<script type="text/javascript"> $(".form_datetime").datetimepicker({ format: "yyyy-mm-dd", autoclose: true, todayBtn: true, todayHighlight: true, showMeridian: true, pickerPosition: "bottom-left", language: 'zh-CN',//中文,需要引用zh-CN.js包 startView: 2,//月視圖 minView: 2//日期時間選擇器所能夠提供的最精確的時間選擇視圖 }); </script>
注意,有很多朋友都在網(wǎng)上問過,如何只用日期,或者不用時間,因?yàn)槟J(rèn)情況下,每次使用datetimepicker選擇時,都要選到日間那個級別上,很是不爽,大叔在研究中發(fā)展,使用minView這個參數(shù)解決了這個問題,它相當(dāng)于在控制上,最小的顯示精度,
0表示分鐘(默認(rèn)),1表示小時,而2表示天,我們把值設(shè)為2就不會再出現(xiàn)選擇小時的頁面了!
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附兩個精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
- Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
- 基于javascript bootstrap實(shí)現(xiàn)生日日期聯(lián)動選擇
- bootstrap-datetimepicker實(shí)現(xiàn)只顯示到日期的方法
- 淺談Bootstrap的DatePicker日期范圍選擇
- bootstrap laydate日期組件使用詳解
- javascript英文日期(有時間)選擇器
- Js日期選擇器并自動加入到輸入框中示例代碼
- javascript 日期聯(lián)動選擇器 [其中的一些代碼值得學(xué)習(xí)]
- js實(shí)現(xiàn)點(diǎn)擊文本框顯示日期選擇器特效代碼分享
- 利用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器
相關(guān)文章
JavaScript使用表單元素驗(yàn)證表單的示例代碼
這篇文章主要介紹了JavaScript使用表單元素驗(yàn)證表單的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08JS實(shí)現(xiàn)可調(diào)整倒計(jì)時間代碼分享
這篇文章主要介紹了JS實(shí)現(xiàn)可調(diào)整倒計(jì)時間代碼,效果很酷炫,也很具有實(shí)用價值,感興趣的小伙伴們可以參考一下2015-08-08如何用JavaScript檢測當(dāng)前瀏覽器是無頭瀏覽器
這篇文章主要介紹了如何用JavaScript檢測當(dāng)前瀏覽器是無頭瀏覽器,對無頭瀏覽器感興趣的同學(xué),可以參考一下2021-04-04深入淺析JavaScript系列(13):This? Yes,this!
在這篇文章里,我們將討論跟執(zhí)行上下文直接相關(guān)的更多細(xì)節(jié)。討論的主題就是this關(guān)鍵字。實(shí)踐證明,這個主題很難,在不同執(zhí)行上下文中this的確定經(jīng)常會發(fā)生問題2016-01-01