快捷導(dǎo)航

angular項(xiàng)目中bootstrap-datetimepicker時(shí)間插件的使用示例

更新時(shí)間：2018年03月15日 13:38:33 作者：淺笑安然-rr

這篇文章主要介紹了angular項(xiàng)目中bootstrap-datetimepicker時(shí)間插件的使用示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

一、需求：

后臺(tái)系統(tǒng)中經(jīng)常會(huì)使用到的功能，選擇一個(gè)時(shí)間區(qū)間，根據(jù)這個(gè)時(shí)間區(qū)間去篩選一些信息，比如，某一時(shí)間段的注冊(cè)用戶。

二、最后效果

三、需要引入的文件（src/index.html）

注意：1、jQuery文件先引用，因?yàn)樵诔跏蓟掌诓寮?，需要找到DOM中的對(duì)象，添加一些樣式；

2、可以看到，我項(xiàng)目中并沒有引用bootstrap.min.css這個(gè)文件，因?yàn)槭窃趇ndex.html全局引用的這個(gè)樣式，對(duì)已經(jīng)寫好的樣式有很大的影響，因此產(chǎn)生的影響就是樣式是亂掉的，你看到的效果圖（第一張圖片）的樣式就需要自己動(dòng)手啦，寫一個(gè)共用的樣式，在每個(gè)組件中引用。

具體樣式就不加了，相信如果你引用插件的這個(gè)坑淌過來(lái)了，這點(diǎn)兒小事兒，就想一顆奶油巧克力，帶著成就感慢慢‘品嘗'吧~

四、代碼部分

A、 To Date

（html代碼）

<!--選擇時(shí)間 datetimepicker 選擇到天-->
<div>
 <label class="date-label-width">時(shí)間（To Date）:</label>
 <div class="input-group date form_datetime date-div-inline">
  <input type="datetime" size="16" id="startTime" name="startTime" class="date-input-size date-minute-bgcolor" value="" readonly >
  <span class="input-group-addon date-div-inline"><span class="fa fa-calendar fa-lg"></span></span>
 </div>

 <label for="endTime" >-</label>
 <div class="input-group date form_datetime date-div-inline">
  <input type="datetime" id="endTime" name="endTime" class="date-input-size date-minute-bgcolor" value="" readonly>
  <span class="input-group-addon date-div-inline"><span class="fa fa-calendar fa-lg"></span></span>
 </div>
</div>

JS代碼

//初始化日期插件 -- 選擇到天
$('#startTime').datetimepicker({
 format: 'yyyy-mm-dd',//顯示格式
 todayHighlight: 1,//今天高亮
 minView: "month",//設(shè)置只顯示到月份
 startView:2,
 forceParse: 0,
 showMeridian: 1,
 autoclose: true,//選擇后自動(dòng)關(guān)閉
 language: 'zh-CN',
 weekStart: 1,
 // todayBtn: 1,
 // autoclose: 1,
 // todayHighlight: 1,
 // startView: 2,
 // minView: 2,
 // forceParse: 0,
 // pickerPosition:'bottom-right'//日期插件彈出的位置
}).on("changeDate", function () {
 $('#endTime').datetimepicker('setStartDate', $("#startTime").val());
 console.log( $("#startTime").val());
 $("#endTime").focus()
});

$('#endTime').datetimepicker({
 format: 'yyyy-mm-dd',//顯示格式
 todayHighlight: 1,//今天高亮
 minView: "month",//設(shè)置只顯示到月份
 startView:2,
 forceParse: 0,
 showMeridian: 1,
 autoclose: true,//選擇后自動(dòng)關(guān)閉
 language: 'zh-CN',
 weekStart: 1,
 // todayBtn: 1,
 // autoclose: 1,
 // todayHighlight: 1,
 // startView: 2,
 // minView: 2,
 // forceParse: 0,
 // pickerPosition:'bottom-right'//日期插件彈出的位置
}).on("changeDate", function () {
 $('#startTime').datetimepicker('setEndDate', $("#endTime").val());
 console.log( $("#endTime").val());
});

format這個(gè)參數(shù)可以設(shè)置日期的格式，yyyy-mm-dd，yyyy/mm/dd

B、To Minute

(html代碼)

<!--選擇時(shí)間 datetimepicker 選擇到分鐘-->
<div>
 <label for="dtp_input1" class="date-label-width">時(shí)間（To Minute）：</label>
 <div class="input-group date form_datetime date-div-inline" data-date="" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
  <input class="date-input-size " id="startTimeMinute" size="16" type="text" value="" readonly>
  <span class="input-group-addon date-div-inline"><span class="fa fa-calendar fa-lg"></span></span>
  <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
 </div>
 <input type="hidden" id="dtp_input1" value="" />

 <label for="dtp_input2">-</label>
 <div class="input-group date form_datetime date-div-inline" data-date="" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
  <input class="date-input-size " id="endTimeMinute" size="16" type="text" value="" readonly>
  <span class="input-group-addon date-div-inline"><span class="fa fa-calendar fa-lg"></span></span>
  <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
 </div>
 <input type="hidden" id="dtp_input2" value="" />
</div>

(JS 代碼)

// //初始化日期插件 -- 選擇到分鐘
$('#startTimeMinute').datetimepicker({
 //language: 'fr',
 format: 'yyyy-mm-dd hh:ii',//顯示格式
 weekStart: 1,
 todayBtn: 1,
 autoclose: 1,
 todayHighlight: 1,
 startView: 2,
 forceParse: 0,
 showMeridian: 1
}).on("changeDate", function () {
 $('#endTimeMinute').datetimepicker('setStartDate', $("#startTimeMinute").val());
 console.log( $("#startTimeMinute").val());
 $("#endTimeMinute").focus()
});

$('#endTimeMinute').datetimepicker({
 //language: 'fr',
 format: 'yyyy-mm-dd hh:ii',//顯示格式
 weekStart: 1,
 todayBtn: 1,
 autoclose: 1,
 todayHighlight: 1,
 startView: 2,
 forceParse: 0,
 showMeridian: 1

}).on("changeDate", function () {
 $('#startTimeMinute').datetimepicker('setEndDate', $("#endTimeMinute").val());
 console.log( $("#endTimeMinute").val());
});

注意：因?yàn)槭且粋€(gè)時(shí)間區(qū)間，第一個(gè)input是開始時(shí)間，第二個(gè)是結(jié)束時(shí)間，開始時(shí)間必須在結(jié)束時(shí)間之前，因此，id必須加在input上，而不是div上。

至此，我已經(jīng)如愿看到了理想的效果，以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: