bootstrap datetimepicker日期插件超詳細(xì)使用方法介紹
本文實(shí)例為大家分享了bootstrap datetimepicker日期插件的簡單使用,供大家參考,具體內(nèi)容如下
首先在文件頭部引入必要的文件:
<link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css" rel="external nofollow" > <script src="Js/bootstrap-datetimepicker.js"></script>
想用中文顯示,加入bootstrap-datetimepicker.zh-CN.js文件
<script src="Js/bootstrap-datetimepicker.zh-CN.js"></script>
然后調(diào)用初始化日期插件方法:
$('.date').datetimepicker({ language: 'zh-CN',//顯示中文 format: 'yyyy-mm-dd',//顯示格式 minView: "month",//設(shè)置只顯示到月份 initialDate: new Date(),//初始化當(dāng)前日期 autoclose: true,//選中自動(dòng)關(guān)閉 todayBtn: true//顯示今日按鈕 })
引入控件
使用bootstrap的日期控件需要單獨(dú)引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js
詳情及文件可以通過下面地址下載:http://www.bootcss.com/p/bootstrap-datetimepicker/
使用場景
單獨(dú)引入一個(gè)日期控件可以參考上面提供的連接地址上的案例。此處介紹的是怎么使用兩個(gè)日期控件,一個(gè)為開始日期,另外一個(gè)為結(jié)束日期,兩個(gè)日期之間建立相互約束關(guān)系。即開始日期不能大于結(jié)束日期,結(jié)束日期不能小于開始日期。
使用方法
兩個(gè)時(shí)間輸入域如圖:
html代碼
<input size="16" type="text" id="datetimeStart" readonly class="form_datetime"> -- <input size="16" type="text" id="datetimeEnd" readonly class="form_datetime">
js代碼如下
<script type="text/javascript"> $("#datetimeStart").datetimepicker({ format: 'yyyy-mm-dd', minView:'month', language: 'zh-CN', autoclose:true, startDate:new Date() }).on("click",function(){ $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val()) }); $("#datetimeEnd").datetimepicker({ format: 'yyyy-mm-dd', minView:'month', language: 'zh-CN', autoclose:true, startDate:new Date() }).on("click",function(){ $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart".val())) }); </script>
關(guān)于bootstrap插件datepicker,只選擇年月;
<input type="text"class="form-control form_datetime_2"readonly id="month_time"value=""/> $(".form_datetime_2"). datetimepicker({ language: 'zh-CN', format: 'yyyy-mm', autoclose: true, todayBtn: true, startView: 'year', minView:'year', maxView:'decade' });
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Bootstrap時(shí)間選擇器datetimepicker和daterangepicker使用實(shí)例解析
- angularjs封裝bootstrap時(shí)間插件datetimepicker
- Bootstrap3 datetimepicker控件使用實(shí)例
- bootstrap datetimepicker日期插件使用方法
- bootstrap-datetimepicker實(shí)現(xiàn)只顯示到日期的方法
- Bootstrap 設(shè)置datetimepicker在屏幕上面彈出設(shè)置方法
- bootstrap datetimepicker實(shí)現(xiàn)秒鐘選擇下拉框
- vue2.0 與 bootstrap datetimepicker的結(jié)合使用實(shí)例
- 基于bootstrap-datetimepicker.js不支持IE8的快速解決方法
- bootstrap datetimepicker控件位置異常的解決方法
相關(guān)文章
微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解
這篇文章主要介紹了微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03JavaScript詳細(xì)分析數(shù)據(jù)類型和運(yùn)算符
這篇文章主要介紹了JavaScript數(shù)據(jù)類型和運(yùn)算符案例,結(jié)合實(shí)例形式分析了JavaScript數(shù)據(jù)類型和運(yùn)算符特性與相關(guān)操作技巧,需要的朋友可以參考下2022-07-07js操作CheckBoxList實(shí)現(xiàn)全選/反選(在客服端完成)
對于CheckBoxList控件來說,一方面要實(shí)現(xiàn)大量數(shù)據(jù)在服務(wù)器端的綁定工作,另一方面往往要求實(shí)現(xiàn)全選、反選等功能,接下來將介紹js操作CheckBoxList實(shí)現(xiàn)全選/反選,感興趣的朋友可以了解下,或許對你有所幫助2013-02-02javascript for循環(huán)從入門到偏門(效率優(yōu)化+奇特用法)
for循環(huán)是非?;A(chǔ)的javascript知識,但由于JS太靈活了,所以可能出現(xiàn)一些讓初學(xué)者崩潰的寫法。我決定由淺入深的解釋一下for循環(huán),算是給比我還新手的新手解惑吧,少走彎路2012-08-08基于JQuery+HTML+JavaScript實(shí)現(xiàn)地圖位置選取和地址模糊查詢
本文詳細(xì)講解了如何使用 JQuery+HTML+JavaScript 實(shí)現(xiàn)移動(dòng)端頁面中的地圖位置選取功能,本文逐步展示了如何構(gòu)建基本的地圖頁面,如何通過點(diǎn)擊地圖獲取經(jīng)緯度和地理信息,以及如何實(shí)現(xiàn)模糊查詢地址并在地圖上標(biāo)注,感興趣的小伙伴跟著小編一起來看看吧2024-07-07原生javascript實(shí)現(xiàn)無間縫滾動(dòng)示例
原生javascript無間縫滾動(dòng)目前支持的是豎向與橫向滾動(dòng),下面有個(gè)不錯(cuò)的示例,大家可以參考下2014-01-01