làm cách nào để vô hiệu hóa ngày trước trong HTML?
Trong bài viết này, tôi sẽ tìm hiểu làm thế nào để vô hiệu hóa ngày trước trong bộ chọn ngày sử dụng JQuery. Trong ví dụ này, tôi sẽ thấy làm thế nào để vô hiệu hóa việc chọn ngày trước trong bộ chọn ngày HTML.
làm cách nào để vô hiệu hóa ngày trước trong đầu vào kiểu ngày của HTML?
Mã JS
$(function(){
var currentDt = new Date();
var month = currentDt.getMonth() + 1;
var day = currentDt.getDate();
var year = currentDt.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var maxDate = year + '-' + month + '-' + day;
alert(maxDate);
$('#txtDate').attr('min', maxDate);
});
Mã JQuery: Sử dụng thuộc tính min
<script language="javascript">
var currentDt = new Date();
var dd = String(currentDt.getDate()).padStart(2, '0');
var mm = String(currentDt.getMonth() + 1).padStart(2, '0');
var yyyy = currentDt.getFullYear();
currentDt = yyyy + '-' + mm + '-' + dd;
$('#set_bdate').attr('min',currentDt);
</script>
Toàn bộ mã nguồn
<html>
<head>
<title>How to disable previous dates in date picker using JQuery - Pakainfo.com</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<h1>How to disable previous dates in date picker using JQuery</h1>
Date : <input id="set_bdate" type="date">
<script language="javascript">
var currentDt = new Date();
var dd = String(currentDt.getDate()).padStart(2, '0');
var mm = String(currentDt.getMonth() + 1).padStart(2, '0');
var yyyy = currentDt.getFullYear();
currentDt = yyyy + '-' + mm + '-' + dd;
$('#set_bdate').attr('min',currentDt);
</script>
</body>
</html>
Sử dụng thuộc tính minDate
<script language="javascript">
$(document).ready(function () {
$("#set_bdate").datepicker({
minDate: 0
});
});
</script>
ví dụ
<html>
<head>
<title>How to disable previous dates in date picker using JQuery - www.pakainfo.com</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"
type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<h2>How to disable previous dates in date picker using JQuery</h2>
Date : <input id="set_bdate" type="text">
<script language="javascript">
$(document).ready(function () {
$("#set_bdate").datepicker({
minDate: 0
});
});
</script>
</body>
</html>
Hy vọng bạn đã có ý tưởng về làm cách nào để vô hiệu hóa ngày trước trong HTML.
- Bài viết blog này ban đầu được xuất bản tại: https://www.pakainfo.com
