建立輸入欄位:
<輸入id='myID'>
用一行簡單的 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,這是一個用純原生 JavaScript 製作的極簡、響應式日期選擇器。它旨在為您的日期選擇過程添加風格和功能,而不會給您的項目帶來壓力。
示範頁面 -> https://danruggi.github.io/datepicker/
專案連結 -> https://github.com/danruggi/datepicker
?完全響應式:在任何裝置上看起來都很棒——日曆不再被壓扁。
?雙/單格式:輕鬆選擇單一日期或範圍。
?新增“任何日期”選項:允許使用者自由選擇任何日期,非常適合過濾器和報告。
?停用日期:防止選擇過去或未來的日期,讓一切都在檢查中。
?單擊時執行外部函數:想要在選擇日期時觸發自訂操作嗎?簡單易行!
快速設定
只需將這些連結放入您的 HTML 中即可:
建立輸入欄位:
用一行簡單的 JavaScript 來設定:
new DeskyCalendar({'myID': {}});
輕鬆切換到雙日期選擇:
new DeskyCalendar({'calendar_date_selector1': {mode: "double"}});
想要限制日期?只需添加
const d = new Date();
new DeskyCalendar({'calendar_date_selector2': {disableBefore: d}});
結論
DeskyCalendar 只需幾行程式碼,即可滿足您的日期選擇需求,同時又輕量且有效率。是時候用這個優雅的解決方案來升級您的表單了。快樂編碼!
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3