javascript：结束和开始日期控制答案

【问题标题】：javascript: end and start DATE controljavascript：结束和开始日期控制
【发布时间】：2020-10-19 18:16:16
【问题描述】：

嗯。我的问题是来自浏览器日历（例如默认的 chrome 日历）的 DATE 控件在输入此日历的日期后，后者的类型为 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>

因为它只控制日子谢谢你读到这里

【问题讨论】：

您有几个对ds_sh 的引用，但您发布的代码中不存在该函数，因此您的示例不可运行。请阅读minimal reproducible example。此外，您可以将两个单独的代码块变成一个可运行的 stack-sn-p。
好的，我明白了。所以，我更新了我的代码，它只控制天，没有月或年
您可以在帖子中编辑正式问题吗？我想我理解你的困境，日期格式不匹配，但为了清楚起见，一个问题真的很有帮助。
请参阅MDN regarding with statements，强烈建议不要使用它们。日期解析有缺陷（月份应为 -1），值是 ISO 8601 格式的日期（YYYY-MM-DD），因此可以在不转换为日期的情况下进行词法比较，例如date_debut_sem.value > date_fin_sem.value 就足够了。在块后面加分号只是一个多余的空语句，不要这样做。
RobG 我试过了，但是不管用，我的目标是结束和开始日期控制，不管是什么技术，所以我在 jquery 和 jquery-ui 中找到了我的愿望。我会为像我这样的学生分享它

标签： javascript php date

【解决方案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>

亲爱的阅读关注jQuery date format
谢谢

【讨论】：