daterangepicker的個性化使用技巧

来源:https://www.cnblogs.com/guoxiaoyu/archive/2018/09/08/9608115.html
-Advertisement-
Play Games

我主要進行對日期數據進行查看使用,有數據的顯示顏色、沒有數據可以不選 更多可以查看官方網站:http://www.daterangepicker.com/#examples ...


 1 datelist = {}  //自己創建或者從後臺獲取 格式為 (yyyy-MM-dd)
 2 //日曆
 3     $('.date-picker').daterangepicker({
 4         showDropdowns:true,
 5         isCustomDate:function( date ) { //看需求是否需要對樣式進行修改
 6             for(var i=0;i<datelist.length;i++){
 7                 if(date.format('YYYY-MM-DD') == datelist[i]){
 8                     return "in-range";    //有數據的返回淺藍顏色  active為深藍
 9                 }
10             }
11             return "disabled";  //沒有數據不可選 自己不想也可以return false
12         },
13       //用來設置預設時間顯示格式,各個按鈕空間的中文顯示
14         locale: {
15            format:'YYYY/MM/DD',
16            applyLabel:'確認',
17            cancelLabel:'取消',
18            fromLabel:'從',
19            toLabel:'到',
20            weekLabel:'W',
21            customRangeLabel:'選擇時間',
22            daysOfWeek:["日","一","二","三","四","五","六"],
23            monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十 一月","十二月"] 
24             }
25     }, function(start, end, label) {
26         startTime=start.unix();
27         endTime = end.unix();
28          });

我主要進行對日期數據進行查看使用,有數據的顯示顏色、沒有數據可以不選

更多可以查看官方網站:http://www.daterangepicker.com/#examples

1     裡面需要用的是哪個包下載下來引入就行了
2 <link rel="stylesheet" href="daterangepicker.css" />
3     <script src="/moment.min.js"></script>
4     <script src="daterangepicker.js"></script> 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 恢復內容開始 在不同類之間傳遞數據,我所學到的有三種,1.代理,2.block,3.通知。在這裡,我們先來講一下代理的使用,後面我會繼續講到block和通知。代理通常和協議是一起使用的,協議通常寫在代理類裡面,被代理的類要服從協議。 根據我的理解,在這種情況下:一個類裡面的數據需要在另一個類裡面實現 ...
  • 一、無繼承性的屬性 1、display:規定元素應該生成的框的類型 2、文本屬性: vertical-align:垂直文本對齊 text-decoration:規定添加到文本的裝飾 text-shadow:文本陰影效果 white-space:空白符的處理 unicode-bidi:設置文本的方向 ...
  • 本博文歸納在 Vue 學習過程中, Vue-cli 工具的使用說明。除此之外還通過 Vue-cli 工具將之前 Vuejs 基本語法當中實現的 todoList 進行重構。 安裝 創建 創建一個基於 webpack 模板的新項目,在此之前,先 cd Desktop 到桌面路徑 各選項簡介 安裝完畢之 ...
  • 《一統江湖的大前端》系列是自己的學習筆記,旨在介紹javascript在非網頁開發領域的應用案例和發現各類好玩的js庫,不定期更新。如果你對前端的理解還是寫寫頁面綁綁事件,那你真的是有點OUT了,前端能做的事情已經太多了, , , , , , 甚至 ,什麼火就搞什麼,絕對是專業的 蹭熱點小能手 。 ...
  • 字元串的生成轉換 你可以將任何類型的數據都轉換為字元串,你可以用下麵三種方法的任何一種: 字元串轉化為其他類型 js提供了parseInt()和parseFloat()兩個轉換函數,Number也可以實現轉化 字元的操作 字元串增刪查改 字元串比較 比較兩個字元串,比較是規則是按照字母表順序比較的 ...
  • todoList 結合之前 Vuejs 基礎與語法 使用 v-model 雙向綁定 input 輸入內容與數據 data 使用 @click 和 methods 關聯事件 使用 v-for 進行數據迴圈展示 <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • 剛開始學JQuery寫的如有錯誤歡迎批評指正 JQuery擁有的選擇器可以讓我們更快更方便找到想要的元素,然後對相應的元素進行操作 簡單介紹一下一些常用的選擇器: 1.基本選擇器: 2.層級選擇器: 層級函數 3.過濾選擇器: 4.內容選擇器: 5.屬性選擇器: 6.子元素選擇器: 7.表單選擇器: ...
  • 全棧工程師也可以叫web 前端 H5主要是網站 app 小程式 公眾號這一塊 HTML篇 html(超文本標記語言,標記通用標記語言下的一個應用。) “超文本”就是指頁面內可以包含圖片、鏈接,甚至音樂、程式等非文字元素。 超文本標記語言的結構包括“頭”部分(英語:Head)、和“主體”部分(英語:B ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...