色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

javascript 日期控件

劉柏宏1年前8瀏覽0評論

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功能,我們可以通過第三方庫等手段擴展它的功能,讓它更加適應不同的場景。以上只是其中兩個例子,還有很多其他庫可以使用,大家可以根據自己的需求進行選擇。