2. 加入您的意見

建立輸入欄位:

<輸入id='myID'>

3. 初始化日曆

用一行簡單的 JavaScript 來設定:

new DeskyCalendar({'myID': {}});

最少的例子

兩列

輕鬆切換到雙日期選擇:

new DeskyCalendar({'calendar_date_selector1': {mode: \\\"double\\\"}});

禁用日期

想要限制日期?只需添加

const d = new Date();
new DeskyCalendar({'calendar_date_selector2': {disableBefore: d}});
結論

DeskyCalendar 只需幾行程式碼,即可滿足您的日期選擇需求,同時又輕量且有效率。是時候用這個優雅的解決方案來升級您的表單了。快樂編碼!

","image":"http://www.luping.net/uploads/20241009/17284428126705f1bc90a10.jpg","datePublished":"2024-11-03T20:05:55+08:00","dateModified":"2024-11-03T20:05:55+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 使用 DeskyCalendar 提升您的日期選擇:Vanilla JS 解決方案

使用 DeskyCalendar 提升您的日期選擇:Vanilla JS 解決方案

發佈於2024-11-03
瀏覽:947

Elevate Your Date Selection with DeskyCalendar: A Vanilla JS Solution

想要增強您的表單而不顯得多餘?來認識 DeskyCalendar,這是一個用純原生 JavaScript 製作的極簡、響應式日期選擇器。它旨在為您的日期選擇過程添加風格和功能,而不會給您的項目帶來壓力。

演示和項目頁面

示範頁面 -> https://danruggi.github.io/datepicker/
專案連結 -> https://github.com/danruggi/datepicker

主要特點

?完全響應式:在任何裝置上看起來都很棒——日曆不再被壓扁。
?雙/單格式:輕鬆選擇單一日期或範圍。
?新增“任何日期”選項:允許使用者自由選擇任何日期,非常適合過濾器和報告。
?停用日期:防止選擇過去或未來的日期,讓一切都在檢查中。
?單擊時執行外部函數:想要在選擇日期時觸發自訂操作嗎?簡單易行!
快速設定

1.內含CSS和JS

只需將這些連結放入您的 HTML 中即可:


2. 加入您的意見

建立輸入欄位:

3. 初始化日曆

用一行簡單的 JavaScript 來設定:

new DeskyCalendar({'myID': {}});

最少的例子

兩列

輕鬆切換到雙日期選擇:

new DeskyCalendar({'calendar_date_selector1': {mode: "double"}});

禁用日期

想要限制日期?只需添加

const d = new Date();
new DeskyCalendar({'calendar_date_selector2': {disableBefore: d}});
結論

DeskyCalendar 只需幾行程式碼,即可滿足您的日期選擇需求,同時又輕量且有效率。是時候用這個優雅的解決方案來升級您的表單了。快樂編碼!

版本聲明 本文轉載於:https://dev.to/daniele_rugginenti_fecc8b/elevate-your-date-selection-with-deskycalendar-a-vanilla-js-solution-50h4?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 在 JavaScript 什麼時候應該使用 setAttribute() 與點表示法?
    在 JavaScript 什麼時候應該使用 setAttribute() 與點表示法?
    JavaScript 中的setAttribute 與.attribute 表示法:最佳實踐指南在JavaScript 中使用HTML 元素時,開發人員經常面臨以下問題選擇使用setAttribute() 方法和點(.) 屬性表示法來設定屬性值。要確定最佳實踐,了解這些方法之間的細微差別至關重要。 ...
    程式設計 發佈於2024-11-15
  • 如何在 PHP 中產生一維數組中所有可能的元素組合和排列?
    如何在 PHP 中產生一維數組中所有可能的元素組合和排列?
    PHP:如何取得一維數組的所有可能組合在本文中,我們將深入研究一種方法來檢索一維數組中元素的所有可能組合PHP 中的一維數組。與其他解決方案相比,這種方法確保同時考慮組合和排列。 問題陳述給定一個字串或數字數組,目標是產生所有可能的元素組合,考慮到不同的安排。例如,「Alpha Beta」和「Bet...
    程式設計 發佈於2024-11-15
  • 如何控制 MySQL GROUP_CONCAT 語句中值的順序?
    如何控制 MySQL GROUP_CONCAT 語句中值的順序?
    對 GROUP_CONCAT 語句中的值進行排序在 MySQL 中,GROUP_CONCAT 根據特定分組組合來自一列的值。然而,連接值的順序通常由分組發生的順序決定。要控制這些值的排序,需要特定的語法。 若要對 GROUP_CONCAT 語句中的串連值進行排序,請在巢狀查詢中使用 ORDER BY...
    程式設計 發佈於2024-11-15
  • 如何在 Golang 中將資料從中間件傳遞到處理程序?
    如何在 Golang 中將資料從中間件傳遞到處理程序?
    將資料從中間件傳遞到處理程序在您的設計中,您有處理傳入請求的中間件和返回http.Handler 的處理程序。您想要將資料從中間件傳遞到處理程序,特別是從請求正文解析的 JSON Web 令牌。 要實現此目的,您可以利用 Gorilla 的上下文套件:import ( "githu...
    程式設計 發佈於2024-11-15
  • JavaScript 資料類型
    JavaScript 資料類型
    JavaScript 資料類型 JavaScript提供了不同的資料類型來保存各種值。 JavaScript 有兩種主要的資料型態。 原型 非原始型 原始資料類型 JavaScript 提供的預先定義資料型別稱為原始資料型別。原始資料型別也稱為內建資料型別。它們可...
    程式設計 發佈於2024-11-15
  • 如何在 Java 中有效地執行外部程式並檢索其輸出?
    如何在 Java 中有效地執行外部程式並檢索其輸出?
    在 Java 中執行外部程式在 Java 程式中,您嘗試使用 Runtime.exec( ) 方法。雖然它不會產生錯誤,但該程式似乎無效。 提供的程式碼利用 Runtime.exec(params) 方法來啟動外部程式。但是,此方法在處理 Java 程式和外部程序之間的輸入和輸出資料方面有其限制。 ...
    程式設計 發佈於2024-11-15
  • 可以使用 CSS 設計 SVG 背景圖片嗎?
    可以使用 CSS 設計 SVG 背景圖片嗎?
    您可以使用 CSS 設計 SVG 背景圖片嗎? 作為 SVG 愛好者,您精通將 SVG 用作背景圖像。然而,仍然存在一個持續存在的問題:您是否也可以在同一個檔案中使用 CSS 設計 SVG 樣式? 遺憾的是,答案是不。用作背景圖片的 SVG 被視為與 CSS 樣式表隔離的單一實體。 CSS 檔案中的...
    程式設計 發佈於2024-11-15
  • 如何使用Python腳本安全地掛載VirtualBox共享資料夾?
    如何使用Python腳本安全地掛載VirtualBox共享資料夾?
    在Python 腳本中使用sudo:安全方法在Python 腳本中使用sudo 的安全使用,特別是在安裝VirtualBox共享時資料夾。雖然原始解決方案嘗試對密碼進行硬編碼,但重要的是要認識到與此做法相關的安全風險。 不要對密碼進行硬編碼,請考慮以下更安全、更可靠的方法:編輯/etc/fstab:...
    程式設計 發佈於2024-11-15
  • Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta:列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而,隨著 Beta 2 的後續發布,這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    程式設計 發佈於2024-11-15
  • Rx Observables 預設是冷的嗎?  了解「發布」和「共享」的資料流
    Rx Observables 預設是冷的嗎? 了解「發布」和「共享」的資料流
    熱 Observable 和冷 Observable:了解資料流預設所有 Rx Observable 都是冷的嗎? 默認,除受試者外,所有 Rx 可觀察量都是冷的。這意味著它們只有在至少有一個觀察者訂閱時才會發出值。 Rx 運算子將冷Observables 轉換為Hot Observables有兩個...
    程式設計 發佈於2024-11-15
  • 為什麼要在 Java 中使用「final」作為局部變數和方法參數?
    為什麼要在 Java 中使用「final」作為局部變數和方法參數?
    Java中局部變數和方法參數使用「final」的優點Java中,將局部變數和方法參數標記為「final ” " 為您的程式碼帶來了幾個好處。方法的範圍內無法變更。變數或參數的值不會執行過程中改變。 ]使用「final」明確表示該值是無意修改,增強程式碼的可讀性和可維護性。 “final”,...
    程式設計 發佈於2024-11-15
  • 如何使用 PHP 計算 MySQL 表中的行數
    如何使用 PHP 計算 MySQL 表中的行數
    使用 PHP 在 MySQL 中計算行數在處理資料庫時,準確的行數計數對於資料分析和高效查詢至關重要。在這種情況下,我們的目標是確定 MySQL 表中的總行數,無論應用的條件為何。此任務可以透過 SQL 命令或 PHP 函數來完成,從而擴展了資料檢索的可能性。 一種簡單的方法涉及 SQL COUNT...
    程式設計 發佈於2024-11-15
  • 在 Go 中使用 WebSocket 進行即時通信
    在 Go 中使用 WebSocket 進行即時通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    程式設計 發佈於2024-11-15
  • 顯示未知數量的卡片時如何防止 Flex 項目重疊?
    顯示未知數量的卡片時如何防止 Flex 項目重疊?
    重疊 Flex 項目問題水平顯示一組未知數量的撲克牌,如果它們超過一定寬度,可能會導致它們重疊。 Flex 框可以用於此目的,但控制大小和重疊可能很棘手。 解決方案此解決方案涉及設定特定的 CSS 屬性以實現所需的效果。細分如下:Container:.cards 容器使用 flexbox (disp...
    程式設計 發佈於2024-11-15
  • uint8_t 總是等於 unsigned char 嗎?
    uint8_t 總是等於 unsigned char 嗎?
    對uint8_t 和unsigned char 等價性的調查C 和C 領域中uint8_t 和unsigned char 之間的相互作用提出了有關它們的問題可能出現的分歧。特別是,當 CHAR_BIT 超過 8 時,就會出現問題,導致 uint8_t 無法封裝在 8 位元內。 定義 uint8_t ...
    程式設計 發佈於2024-11-15

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3