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

您好

我的目标是找到一种方法来控制开始和结束日期，经过一些研究我找到了一个解决方案但是使用 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>

然后我完全删除了 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>