Javascript日期控件是一種常見的Web功能,它允許用戶選擇日期而不必手動輸入文本。它適用于各種場景,例如預定航班機票、護理預約等。
下面我們來看一個簡單的代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>日期控件演示</title> <script type="text/javascript"> function showDate(){ var date = document.getElementById("date").value; alert(date); } </script> </head> <body> <input type="date" id="date"> <button onclick="showDate()">顯示日期</button> </body> </html>
代碼使用了HTML5提供的日期控件,當我們點擊"顯示日期"按鈕時,就會彈出所選擇的日期。
不過,HTML5的日期控件有一些限制,在不同瀏覽器中表現不一,不支持所有日期格式等。因此我們可以使用一些第三方庫來擴展日期控件的功能。
下面給大家介紹兩個常用的日期控件庫——Bootstrap Datepicker和jQuery UI Datepicker。
Bootstrap Datepicker是Twitter Bootstrap的一個插件,它基于Moment.js和Bootstrap的樣式,提供了豐富的選項,如選擇范圍、格式化、自動完成等。它的使用也非常簡單:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap Datepicker演示</title> <link rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script> <script type="text/javascript"> $(function(){ $('#date').datepicker({ format: "yyyy-mm-dd", autoclose: true }); }); </script> </head> <body> <input type="text" id="date" class="form-control"> </body> </html>
上面的代碼就利用了Bootstrap Datepicker來創建了一個日期選擇器。在這里我們設置了日期格式為"yyyy-mm-dd",同時啟用了自動關閉選項。
除了Bootstrap Datepicker,我們還可以使用jQuery UI Datepicker。這是一個高度可定制的日期選擇器,允許我們自定義皮膚、事件、日期范圍等選項。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery UI Datepicker演示</title> <link rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script type="text/javascript"> $(function(){ $('#date').datepicker({ dateFormat: "yy-mm-dd", onClose: function(date){ alert(date); } }); }); </script> </head> <body> <input type="text" id="date"> </body> </html>
上面的代碼使用了jQuery UI Datepicker,我們自定義了日期格式為"yy-mm-dd",同時在選擇完日期后彈出了一個提示窗口。
總之,Javascript日期控件是一種非常實用的Web功能,我們可以通過第三方庫等手段擴展它的功能,讓它更加適應不同的場景。以上只是其中兩個例子,還有很多其他庫可以使用,大家可以根據自己的需求進行選擇。