1 回答

TA貢獻1780條經驗 獲得超4個贊
您好
我的目標是找到一種方法來控制開始和結束日期,經過一些研究我找到了一個解決方案但是使用 jquery 和 jquery-ui 技術(用戶界面)所以我在以下位置添加了這些 CDN 鏈接:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
然后我完全刪除了 type = "date" 屬性以免觸發默認瀏覽器日歷,我添加了 readonly = "readonly" 屬性以便用戶無法手動輸入
這是我的表格:
<form? name=formu action="ajouter_semestre.php"? method="POST">
<input readonly="readonly" placeholder="date debut semestre" value="<?php if (isset($_POST['date_debut_sem'])){echo $_POST['date_debut_sem'];} ?>" maxlength="10" name="date_debut_sem" id="txtFrom" class="calendrier" required><br>
<input readonly="readonly" placeholder="date? Fin du semestre" value="<?php if (isset($_POST['date_fin_sem'])){echo $_POST['date_fin_sem'];} ?>" maxlength="10" name="date_fin_sem" id="txtTo" class="calendrier" required><br>
最后jquery腳本如下:
<script>
$(function(){
$("#txtFrom").datepicker({
numberOfMonths:1,
dateFormat:'yy/mm/dd',
onSelect:function(selectdate){
var dt = new Date(selectdate);
dt.setDate(dt.getDate()+1)
$("#txtTo").datepicker("option","minDate",dt);
}
});
$("#txtTo").datepicker({
numberOfMonths:1,
dateFormat:'yy/mm/dd',
onSelect:function(selectdate){
var dt = new Date(selectdate);
dt.setDate(dt.getDate()-1)
$("#txtFrom").datepicker("option","maxDate",dt);
}
});
});
</script>
添加回答
舉報