------
Phần 68. Datepicker
Đây là clip số 56: datepicker
datepicker là một tiện ích cho phép người dùng chọn ngày
tháng được tiện lợi, chính xác.
Muốn hiểu phần này cần có kiến thức về jQuery UI, để dễ hiểu
jQuery UI cần có kiến thức về jQuery, để hiểu jQuery cần học cơ bản về
JavaScript. Vậy thứ tự cần học là JavaScript > jQuery > jQuery UI.
Sử dụng datepicker của jQuery UI tại đây: https://jqueryui.com/datepicker/
Để đổi cách hiển thị mm/dd/yyyy thành dd/mm/yyyy, tìm hiểu
tại đây: http://api.jqueryui.com/datepicker/#option-dateFormat
Ví dụ,
$( function() {
$(
"#datepicker" ).datepicker({ dateFormat: "dd/mm/yy" });
} );
Để đổi ngày mặc định khi xuất hiện datepicker, tham khảo tại
đây: http://api.jqueryui.com/datepicker/#option-defaultDate
Ví dụ,
$( function() {
$(
"#datepicker" ).datepicker({
dateFormat:
"dd/mm/yy",
defaultDate:
"-1m"
});
} );
Để cho phép người dùng chọn năm, tham khảo tại đây: http://api.jqueryui.com/datepicker/#option-changeYear
Ví dụ,
$( function() {
$(
"#datepicker" ).datepicker({
dateFormat:
"dd/mm/yy",
defaultDate: "-1m",
changeYear: true,
yearRange: "2012:2020"
});
} );
Đây là đoạn mã có sử dụng datepicker,
<!doctype html>
<html lang="en">
<head>
<meta
charset="utf-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<title>jQuery UI
Datepicker - Default functionality</title>
<link
rel="stylesheet"
href="jquery-ui-1.12.1.custom/jquery-ui.css">
<script
src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script
src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script>
$( function() {
$(
"#datepicker" ).datepicker({
dateFormat:
"dd/mm/yy",
defaultDate:
"-1m",
changeYear: true,
yearRange:
"2012:2020"
});
} );
</script>
</head>
<body>
<?php
$date =
(isset($_POST['datepicker'])) ? $_POST['datepicker'] : '';
?>
<form
action="#" method="post" id="mainForm"
name="mainForm">
<p>Date:
<input readonly="readonly" type="text"
name="datepicker" id="datepicker" value="<?php echo
$date; ?>"></p>
<input
type="submit" value="Submit">
</form>
</body>
</html>
-----------
Cập nhật [14/9/2020]
-----------