javascript:结束并开始DATE控件

Question

好吧。我的问题是DATE控件，它来自浏览器日历(例如默认的chrome日历(，在该日历中输入日期后，后者的类型为mm/dd/yyyy但是我在输入后的数据库中找到的数据类型是yyyy/mm/dd这是我的html表单的代码：

<form  name=formu action="ajouter_semestre.php"  method="POST">  
<input type="date" placeholder="date debut semestre" value="<?php if (isset($_POST['date_debut_sem'])){echo $_POST['date_debut_sem'];} ?>" maxlength="10" name="date_debut_sem" id="date_debut_sem" required><br>
<input type="date" 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="date_fin_sem" required><br>
</form>

这是我的js控制器脚本

<script> 
with(document.formu) {
onsubmit = function() {
tabdeb = (date_debut_sem.value.split(/[- //]/));
tabfin = (date_fin_sem.value.split(/[- //]/));
Odeb = new Date(tabdeb[2],tabdeb[1],tabdeb[0]);
Ofin = new Date(tabfin[2],tabfin[1],tabfin[0]);
if(Odeb > Ofin) {
alert('date fin du semestre doit etre superieure a la date du debut')
date_debut_sem.focus(); date_fin_sem.style.backgroundColor='#F00';
return false
};
};
};
</script>

因为它只控制白天如果你已经阅读了目前为止的，谢谢

Answer 1

hi
我的目标是找到一种控制开始和结束日期的方法，经过一点研究，我找到了一个解决方案，但使用了jquery和jquery ui技术(用户界面(所以我在中添加了这些CDN链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

则我完全去除了类型＝"0"；日期"；属性以便不触发默认的浏览器日历；只读"；属性，以便用户不能手动输入

这是我的表格：

<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>

亲爱的读者请注意jQuery日期格式
谢谢