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>