使用 DeskyCalendar 提升您的日期選擇：Vanilla JS 解決方案
發佈於2024-11-03
瀏覽：215
想要增強您的表單而不顯得多餘？來認識 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]刪除
最新教學
更多>
-
如何正確使用與PDO參數的查詢一樣？在pdo 中使用類似QUERIES在PDO中的Queries時，您可能會遇到類似疑問中描述的問題：此查詢也可能不會返回結果，即使$ var1和$ var2包含有效的搜索詞。錯誤在於不正確包含％符號。 通過將變量包含在$ params數組中的％符號中，您確保將％字符正確替換到查詢中。沒有此修改，PD...程式設計 發佈於2025-07-10 -
Python元類工作原理及類創建與定制python中的metaclasses是什麼？ Metaclasses負責在Python中創建類對象。就像類創建實例一樣，元類也創建類。他們提供了對類創建過程的控制層，允許自定義類行為和屬性。 在Python中理解類作為對象的概念，類是描述用於創建新實例或對象的藍圖的對象。這意味著類本身是使用...程式設計 發佈於2025-07-10
-
在Java中使用for-to-loop和迭代器進行收集遍歷之間是否存在性能差異？For Each Loop vs. Iterator: Efficiency in Collection TraversalIntroductionWhen traversing a collection in Java, the choice arises between using a for-...程式設計 發佈於2025-07-10
-
Java數組中元素位置查找技巧在Java數組中檢索元素的位置 利用Java的反射API將數組轉換為列表中，允許您使用indexof方法。 （primitives）（鏈接到Mishax的解決方案） 用於排序陣列的數組此方法此方法返回元素的索引，如果發現了元素的索引，或一個負值，指示應放置元素的插入點。程式設計 發佈於2025-07-10
-
PHP陣列鍵值異常：了解07和08的好奇情況PHP數組鍵值問題，使用07&08 在給定數月的數組中，鍵值07和08呈現令人困惑的行為時，就會出現一個不尋常的問題。運行print_r（$月）返回意外結果：鍵“ 07”丟失，而鍵“ 08”分配給了9月的值。 此問題源於PHP對領先零的解釋。當一個數字帶有0（例如07或08）的前綴時，PHP將...程式設計 發佈於2025-07-10
-
在PHP中如何高效檢測空數組？在PHP 中檢查一個空數組可以通過各種方法在PHP中確定一個空數組。如果需要驗證任何數組元素的存在，則PHP的鬆散鍵入允許對數組本身進行直接評估：一種更嚴格的方法涉及使用count（）函數： if（count（count（$ playerList）=== 0）{ //列表為空。 } 對...程式設計 發佈於2025-07-10
-
如何在Java中正確顯示“ DD/MM/YYYY HH：MM：SS.SS”格式的當前日期和時間？如何在“ dd/mm/yyyy hh：mm：mm：ss.ss”格式“ gormat 解決方案： args）拋出異常{ 日曆cal = calendar.getInstance（）; SimpleDateFormat SDF =新的SimpleDateFormat（“...程式設計 發佈於2025-07-10
-
解決Spring Security 4.1及以上版本CORS問題指南彈簧安全性cors filter：故障排除常見問題 在將Spring Security集成到現有項目中時，您可能會遇到與CORS相關的錯誤，如果像“訪問Control-allo-allow-Origin”之類的標頭，則無法設置在響應中。為了解決此問題，您可以實現自定義過濾器，例如代碼段中的MyFi...程式設計 發佈於2025-07-10
-
使用jQuery如何有效修改":after"偽元素的CSS屬性？在jquery中了解偽元素的限制：訪問“ selector 嘗試修改“：”選擇器的CSS屬性時，您可能會遇到困難。 This is because pseudo-elements are not part of the DOM (Document Object Model) and are th...程式設計 發佈於2025-07-10
-
Java中假喚醒真的會發生嗎？在Java中的浪費喚醒：真實性或神話？ 在Java同步中偽裝喚醒的概念已經是討論的主題。儘管存在這種行為的潛力，但問題仍然存在：它們實際上是在實踐中發生的嗎？ Linux的喚醒機制根據Wikipedia關於偽造喚醒的文章，linux實現了pthread_cond_wait（）功能的Linux實現，...程式設計 發佈於2025-07-10
-
為什麼在我的Linux服務器上安裝Archive_Zip後，我找不到“ class \” class \'ziparchive \'錯誤？Class 'ZipArchive' Not Found Error While Installing Archive_Zip on Linux ServerSymptom:When attempting to run a script that utilizes the ZipAr...程式設計 發佈於2025-07-10
-
如何實時捕獲和流媒體以進行聊天機器人命令執行？在開發能夠執行命令的chatbots的領域中，實時從命令執行實時捕獲Stdout，一個常見的需求是能夠檢索和顯示標準輸出（stdout）在cath cath cant cant cant cant cant cant cant cant interfaces in Chate cant inter...程式設計 發佈於2025-07-10
-
如何在無序集合中為元組實現通用哈希功能？在未訂購的集合中的元素要糾正此問題，一種方法是手動為特定元組類型定義哈希函數，例如： template template template 。 struct std :: hash { size_t operator（）（std :: tuple const&tuple）const {...程式設計 發佈於2025-07-10
-
Android如何向PHP服務器發送POST數據？在android apache httpclient（已棄用） httpclient httpclient = new defaulthttpclient（）; httppost httppost = new httppost（“ http://www.yoursite.com/script.p...程式設計 發佈於2025-07-10
-
版本5.6.5之前，使用current_timestamp與時間戳列的current_timestamp與時間戳列有什麼限制？在時間戳列上使用current_timestamp或MySQL版本中的current_timestamp或在5.6.5 此限制源於遺留實現的關注，這些限制需要對當前的_timestamp功能進行特定的實現。 創建表`foo`（ `Productid` int（10）unsigned not ...程式設計 發佈於2025-07-10
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
