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
瀏覽:483

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]刪除
最新教學 更多>
  • 如何將PANDAS DataFrame列轉換為DateTime格式並按日期過濾?
    如何將PANDAS DataFrame列轉換為DateTime格式並按日期過濾?
    Transform Pandas DataFrame Column to DateTime FormatScenario:Data within a Pandas DataFrame often exists in various formats, including strings.使用時間數據時...
    程式設計 發佈於2025-05-25
  • MySQL中如何高效地根據兩個條件INSERT或UPDATE行?
    MySQL中如何高效地根據兩個條件INSERT或UPDATE行?
    在兩個條件下插入或更新或更新 solution:的答案在於mysql的插入中...在重複鍵更新語法上。如果不存在匹配行或更新現有行,則此功能強大的功能可以通過插入新行來進行有效的數據操作。如果違反了唯一的密鑰約束。 實現所需的行為,該表必須具有唯一的鍵定義(在這種情況下為'名稱'...
    程式設計 發佈於2025-05-25
  • HTML格式標籤
    HTML格式標籤
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    程式設計 發佈於2025-05-25
  • 如何在JavaScript對像中動態設置鍵?
    如何在JavaScript對像中動態設置鍵?
    在嘗試為JavaScript對象創建動態鍵時,如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正確的方法採用方括號: jsobj ['key''i] ='example'1; 在JavaScript中,數組是一...
    程式設計 發佈於2025-05-25
  • 如何有效地選擇熊貓數據框中的列?
    如何有效地選擇熊貓數據框中的列?
    在處理數據操作任務時,在Pandas DataFrames 中選擇列時,選擇特定列的必要條件是必要的。在Pandas中,選擇列的各種選項。 選項1:使用列名 如果已知列索引,請使用ILOC函數選擇它們。請注意,python索引基於零。 df1 = df.iloc [:,0:2]#使用索引0和1 ...
    程式設計 發佈於2025-05-25
  • 如何在Java的全屏獨家模式下處理用戶輸入?
    如何在Java的全屏獨家模式下處理用戶輸入?
    Handling User Input in Full Screen Exclusive Mode in JavaIntroductionWhen running a Java application in full screen exclusive mode, the usual event ha...
    程式設計 發佈於2025-05-25
  • Java數組中元素位置查找技巧
    Java數組中元素位置查找技巧
    在Java數組中檢索元素的位置 利用Java的反射API將數組轉換為列表中,允許您使用indexof方法。 (primitives)(鏈接到Mishax的解決方案) 用於排序陣列的數組此方法此方法返回元素的索引,如果發現了元素的索引,或一個負值,指示應放置元素的插入點。
    程式設計 發佈於2025-05-25
  • Go語言如何動態發現導出包類型?
    Go語言如何動態發現導出包類型?
    與反射軟件包中的有限類型的發現能力相反,本文探討了在運行時發現所有包裝類型(尤其是struntime go import( “ FMT” “去/進口商” ) func main(){ pkg,err:= incorter.default()。導入(“ time”) ...
    程式設計 發佈於2025-05-25
  • Python元類工作原理及類創建與定制
    Python元類工作原理及類創建與定制
    python中的metaclasses是什麼? Metaclasses負責在Python中創建類對象。就像類創建實例一樣,元類也創建類。他們提供了對類創建過程的控制層,允許自定義類行為和屬性。 在Python中理解類作為對象的概念,類是描述用於創建新實例或對象的藍圖的對象。這意味著類本身是使用...
    程式設計 發佈於2025-05-25
  • 在JavaScript中如何並發運行異步操作並正確處理錯誤?
    在JavaScript中如何並發運行異步操作並正確處理錯誤?
    同意操作execution 在執行asynchronous操作時,相關的代碼段落會遇到一個問題,當執行asynchronous操作:此實現在啟動下一個操作之前依次等待每個操作的完成。要啟用並發執行,需要進行修改的方法。 第一個解決方案試圖通過獲得每個操作的承諾來解決此問題,然後單獨等待它們: c...
    程式設計 發佈於2025-05-25
  • 解決Spring Security 4.1及以上版本CORS問題指南
    解決Spring Security 4.1及以上版本CORS問題指南
    彈簧安全性cors filter:故障排除常見問題 在將Spring Security集成到現有項目中時,您可能會遇到與CORS相關的錯誤,如果像“訪問Control-allo-allow-Origin”之類的標頭,則無法設置在響應中。為了解決此問題,您可以實現自定義過濾器,例如代碼段中的MyFi...
    程式設計 發佈於2025-05-25
  • 編譯器報錯“usr/bin/ld: cannot find -l”解決方法
    編譯器報錯“usr/bin/ld: cannot find -l”解決方法
    錯誤:“ usr/bin/ld:找不到-l “ 此錯誤表明鏈接器在鏈接您的可執行文件時無法找到指定的庫。為了解決此問題,我們將深入研究如何指定庫路徑並將鏈接引導到正確位置的詳細信息。 添加庫搜索路徑的一個可能的原因是,此錯誤是您的makefile中缺少庫搜索路徑。要解決它,您可以在鏈接器命令中添...
    程式設計 發佈於2025-05-25
  • 如何干淨地刪除匿名JavaScript事件處理程序?
    如何干淨地刪除匿名JavaScript事件處理程序?
    刪除匿名事件偵聽器將匿名事件偵聽器添加到元素中會提供靈活性和簡單性,但是當要刪除它們時,可以構成挑戰,而無需替換元素本身就可以替換一個問題。 element? element.addeventlistener(event,function(){/在這里工作/},false); 要解決此問題,請考...
    程式設計 發佈於2025-05-25
  • 如何使用“ JSON”軟件包解析JSON陣列?
    如何使用“ JSON”軟件包解析JSON陣列?
    parsing JSON與JSON軟件包 QUALDALS:考慮以下go代碼:字符串 } func main(){ datajson:=`[“ 1”,“ 2”,“ 3”]`` arr:= jsontype {} 摘要:= = json.unmarshal([] byte(...
    程式設計 發佈於2025-05-25
  • 如何在GO編譯器中自定義編譯優化?
    如何在GO編譯器中自定義編譯優化?
    在GO編譯器中自定義編譯優化 GO中的默認編譯過程遵循特定的優化策略。 However, users may need to adjust these optimizations for specific requirements.Optimization Control in Go Compi...
    程式設計 發佈於2025-05-25

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

Copyright© 2022 湘ICP备2022001581号-3