bootstrapdatetimepicker日期插件超詳細(xì)使用方法介紹

本文實(shí)例為大家分享了bootstrap datetimepicker日期插件的簡(jiǎn)單使用，供大家參考，具體內(nèi)容如下

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比遼陽(yáng)縣網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式遼陽(yáng)縣網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋遼陽(yáng)縣地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。

首先在文件頭部引入必要的文件：

<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

詳情及文件可以通過(guò)下面地址下載：http://www.bootcss.com/p/bootstrap-datetimepicker/

使用場(chǎng)景

單獨(dú)引入一個(gè)日期控件可以參考上面提供的連接地址上的案例。此處介紹的是怎么使用兩個(gè)日期控件，一個(gè)為開(kāi)始日期，另外一個(gè)為結(jié)束日期，兩個(gè)日期之間建立相互約束關(guān)系。即開(kāi)始日期不能大于結(jié)束日期，結(jié)束日期不能小于開(kāi)始日期。

使用方法

兩個(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'
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站標(biāo)題：bootstrapdatetimepicker日期插件超詳細(xì)使用方法介紹
文章轉(zhuǎn)載：http://muchs.cn/article40/joodho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站導(dǎo)航、全網(wǎng)營(yíng)銷推廣、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)