首頁 web前端 js教程 angular專案中bootstrap-datetimepicker時間插件的使用範例

angular專案中bootstrap-datetimepicker時間插件的使用範例

May 30, 2018 am 10:13 AM
angular 外掛

這篇文章主要介紹了angular專案中bootstrap-datetimepicker時間插件的使用範例,現在分享給大家,也給大家做個參考。

一、需求:

後台系統中常會使用到的功能,選擇一個時間區間,根據這個時間區間去篩選一些訊息,比如,某一時段的註冊用戶。

二、最後效果

#三、需要引進的檔案(src/index.html)

注意:1、jQuery檔案先引用,因為在初始化日期插件是,需要找到DOM中的對象,加入一些樣式;

2、可以看到,我專案中並沒有引用bootstrap.min.css這個文件,因為是在index.html全域引用的這個樣式,對已經寫好的樣式有很大的影響,因此產生的影響就是樣式是亂掉的,你看到的效果圖(第一張圖片)的樣式就需要自己動手啦,寫一個共用的樣式,在每個組件中引用。

具體樣式就不加了,相信如果你引用插件的這個坑淌過來了,這點兒小事兒,就想一顆奶油巧克力,帶著成就感慢慢'品嚐'吧~

四、程式碼部分

A、 To Date

#(html程式碼)

<!--选择时间 datetimepicker 选择到天-->
<p>
 <label class="date-label-width">时间(To Date):</label>
 <p class="input-group date form_datetime date-p-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-p-inline"><span class="fa fa-calendar fa-lg"></span></span>
 </p>

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

JS程式碼

//初始化日期插件 -- 选择到天
$(&#39;#startTime&#39;).datetimepicker({
 format: &#39;yyyy-mm-dd&#39;,//显示格式
 todayHighlight: 1,//今天高亮
 minView: "month",//设置只显示到月份
 startView:2,
 forceParse: 0,
 showMeridian: 1,
 autoclose: true,//选择后自动关闭
 language: &#39;zh-CN&#39;,
 weekStart: 1,
 // todayBtn: 1,
 // autoclose: 1,
 // todayHighlight: 1,
 // startView: 2,
 // minView: 2,
 // forceParse: 0,
 // pickerPosition:&#39;bottom-right&#39;//日期插件弹出的位置
}).on("changeDate", function () {
 $(&#39;#endTime&#39;).datetimepicker(&#39;setStartDate&#39;, $("#startTime").val());
 console.log( $("#startTime").val());
 $("#endTime").focus()
});

$(&#39;#endTime&#39;).datetimepicker({
 format: &#39;yyyy-mm-dd&#39;,//显示格式
 todayHighlight: 1,//今天高亮
 minView: "month",//设置只显示到月份
 startView:2,
 forceParse: 0,
 showMeridian: 1,
 autoclose: true,//选择后自动关闭
 language: &#39;zh-CN&#39;,
 weekStart: 1,
 // todayBtn: 1,
 // autoclose: 1,
 // todayHighlight: 1,
 // startView: 2,
 // minView: 2,
 // forceParse: 0,
 // pickerPosition:&#39;bottom-right&#39;//日期插件弹出的位置
}).on("changeDate", function () {
 $(&#39;#startTime&#39;).datetimepicker(&#39;setEndDate&#39;, $("#endTime").val());
 console.log( $("#endTime").val());
});
登入後複製

format這個參數可以設定日期的格式,yyyy-mm-dd,yyyy/mm/dd

B、To Minute

(html代碼)

<!--选择时间 datetimepicker 选择到分钟-->
<p>
 <label for="dtp_input1" class="date-label-width">时间(To Minute):</label>
 <p class="input-group date form_datetime date-p-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-p-inline"><span class="fa fa-calendar fa-lg"></span></span>
  <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
 </p>
 <input type="hidden" id="dtp_input1" value="" />

 <label for="dtp_input2">-</label>
 <p class="input-group date form_datetime date-p-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-p-inline"><span class="fa fa-calendar fa-lg"></span></span>
  <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
 </p>
 <input type="hidden" id="dtp_input2" value="" />
</p>
登入後複製

(JS代碼)

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

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

}).on("changeDate", function () {
 $(&#39;#startTimeMinute&#39;).datetimepicker(&#39;setEndDate&#39;, $("#endTimeMinute").val());
 console.log( $("#endTimeMinute").val());
});
登入後複製

注意:因為是一個時間區間,第一個input是開始時間,第二個是結束時間,開始時間必須在結束時間之前,因此,id必須加在input上,而不是p上。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

解決npm管理員身分install時出現權限的問題

JS匿名函數與匿名自執行函數概念與用法分析

p5.js入門教學之滑鼠互動的範例

#

以上是angular專案中bootstrap-datetimepicker時間插件的使用範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1654
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1225
24
PyCharm新手指南:全面了解外掛程式安裝! PyCharm新手指南:全面了解外掛程式安裝! Feb 25, 2024 pm 11:57 PM

PyCharm是一款功能強大且受歡迎的Python整合開發環境(IDE),提供了豐富的功能和工具,讓開發者可以更有效率地編寫程式碼。而PyCharm的插件機制更是其功能擴充的利器,透過安裝不同的插件,可以為PyCharm增加各種功能和客製化的特性。因此,對於PyCharm新手來說,了解並熟練安裝插件是至關重要的。本文將為你詳細介紹PyCharm插件安裝的全

在Illustrator中載入插件時出錯[修復] 在Illustrator中載入插件時出錯[修復] Feb 19, 2024 pm 12:00 PM

啟動AdobeIllustrator時是否會彈出載入插件時出錯的訊息?一些Illustrator用戶在打開該應用程式時遇到了此錯誤。訊息後面緊跟著一系列有問題的插件。此錯誤提示表示已安裝的插件有問題,但也可能是由於VisualC++DLL檔案損壞或首選項檔案受損等其他原因所引起。如果遇到此錯誤,我們將在本文中指導您修復問題,請繼續閱讀以下內容。在Illustrator中載入外掛程式時出錯如果您在嘗試啟動AdobeIllustrator時收到「載入外掛程式時出錯」的錯誤訊息,您可以使用以下用途:以管理員身

分享Edge瀏覽器不支援此外掛程式的三種解決方法 分享Edge瀏覽器不支援此外掛程式的三種解決方法 Mar 13, 2024 pm 04:34 PM

  用戶使用Edge瀏覽器的過程中可能會添加一些插件來滿足自己更多的使用需求。但是在添加插件時顯示不支援此插件,這該如何解決?今日小編就來給大家分享三種解決方法,快來試試看。  方法一:嘗試用其他的瀏覽器。  方法二:瀏覽器上的FlashPlayer可能過時或遺失,導致此外掛程式不受支援狀態,可在官網下載最新版本。  方法三:同時按下「Ctrl+Shift+Delete」鍵。  點選“清除資料”,重新開啟瀏覽器即可。

如何在Ubuntu 24.04上安裝Angular 如何在Ubuntu 24.04上安裝Angular Mar 23, 2024 pm 12:20 PM

Angular.js是一種可自由存取的JavaScript平台,用於建立動態應用程式。它允許您透過擴展HTML的語法作為模板語言,以快速、清晰地表示應用程式的各個方面。 Angular.js提供了一系列工具,可協助您編寫、更新和測試程式碼。此外,它還提供了許多功能,如路由和表單管理。本指南將討論在Ubuntu24上安裝Angular的方法。首先,您需要安裝Node.js。 Node.js是一個基於ChromeV8引擎的JavaScript運行環境,可讓您在伺服器端執行JavaScript程式碼。要在Ub

Chrome的插件擴充功能安裝目錄是什麼 Chrome的插件擴充功能安裝目錄是什麼 Mar 08, 2024 am 08:55 AM

Chrome的插件擴充功能安裝目錄是什麼?正常情況下,Chrome外掛程式擴充功能的預設安裝目錄如下:1、windowsxp中chrome外掛程式預設安裝目錄位置:C:\DocumentsandSettings\使用者名稱\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件預設安裝目錄位置:C:\Users\使用者名稱\AppData\Local\Google\Chrome\User

如何使用WordPress外掛實現即時定位功能 如何使用WordPress外掛實現即時定位功能 Sep 05, 2023 pm 04:51 PM

如何使用WordPress外掛實現即時定位功能隨著行動裝置的普及,越來越多的網站開始提供基於地理位置的服務。在WordPress網站中,我們可以透過使用外掛程式來實現即時定位功能,為訪客提供與地理位置相關的服務。一、選擇適合的外掛程式在WordPress外掛程式庫中有很多提供地理位置服務的外掛程式可供選擇。根據需求和要求,選擇適合的插件是實現即時定位功能的關鍵。以下是幾個

如何使用WordPress外掛實現影片播放功能 如何使用WordPress外掛實現影片播放功能 Sep 05, 2023 pm 12:55 PM

如何使用WordPress外掛實現影片播放功能一、介紹影片在網站和部落格中的應用越來越普遍。為了提供優質的使用者體驗,我們可以使用WordPress外掛程式來實現影片播放功能。本文將介紹如何使用WordPress外掛程式來實現影片播放功能,並提供程式碼範例。二、選擇外掛WordPress擁有眾多影片播放外掛程式可供選擇。在選擇插件時,我們需要考慮以下幾個方面:相容性:確保插件

如何為WordPress外掛新增微信小程式功能 如何為WordPress外掛新增微信小程式功能 Sep 06, 2023 am 09:03 AM

如何為WordPress外掛程式添加微信小程式功能隨著微信小程式的普及和流行,越來越多的網站和應用程式開始考慮將其與微信小程式整合。對於使用WordPress作為內容管理系統的網站來說,添加微信小程式功能可以為使用者提供更便利的存取體驗和更多的功能選擇。本文將介紹如何為WordPress外掛程式新增微信小程式功能。步驟1:註冊微信小程式帳號首先,您需要在微信開放平

See all articles