模糊功能后如何防止onselect日期填充字段答案

【问题标题】：How to prevent onselect date filling in the field after the blur function模糊功能后如何防止onselect日期填充字段
【发布时间】：2018-12-25 20:02:17
【问题描述】：

我有一个模糊功能，可以通过日期选择器检查两个日期。如果结束日期早于开始日期，则会提示错误，并且无法在输入字段中填写所选日期。首先触发模糊事件：

...date picker
onSelect: function() {
    this.focus();

},
onClose: function() {
    this.blur();
}

...验证部分

jQuery("#p_stdy_edate").blur(function() {
    var stdy_bdate = jQuery("#p_stdy_sdate").val();
    var stdy_edate = jQuery("#p_stdy_edate").val();
    if (stdy_edate < stdy_bdate) {
        alert("End date should be later than begin date");    
    }

});

但是当我选择一个无效的结束日期（结束日期输入框有一个默认日期）时，无效日期会在显示警报后填充到输入字段中。如何解决？

【问题讨论】：

对您的问题更优雅的解决方案可能是不允许用户选择任何无效日期。你可以看到here。

标签： jquery datepicker blur

【解决方案1】：

在您显示警报后，您可以将 edate 的值强制为无效条目之前的值；例如：

jQuery("#p_stdy_edate").blur(function() {
    var stdy_bdate = jQuery("#p_stdy_sdate").val();
    var stdy_edate = jQuery("#p_stdy_edate").val();
    if (stdy_edate < stdy_bdate) {
        alert("End date should be later than begin date"); 
        $("#p_stdy_edate").val("Please Select Ending Date");
    }
});

如果“请选择结束日期”是你的默认值，你当然可以修改它；我也会使用 on focusout 作为事件而不是模糊（在我以这种方式使用它时，模糊会导致误报）；使用 focusout 和验证可能会更好（尤其是如果您动态设置值，您希望用户的焦点触发验证，而不是在您以编程方式进行值更改时）。

-- 编辑；通过更改事件变得更加容易；请测试以下代码：

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />

      <title>Ilan's Test</title>
   </head>
   <body>

<div class="container">
    <div class="row">
        <div class='col-sm-12'>
            <div class="form-group">
                Start Date : <input id="sdate" class="form-control" type="text" /><br />
                End Date : <input id="edate" class="form-control" type="text" /><br />
            </div>
        </div>
    </div>
</div>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

        <script type="text/javascript">
        $(function(){

            $('#sdate').datepicker({
                dateFormat: 'dd-mm-yy',
                altField: '#thealtdate',
                altFormat: 'yy-mm-dd'
            });

            $('#edate').datepicker({
                dateFormat: 'dd-mm-yy',
                altField: '#thealtdate',
                altFormat: 'yy-mm-dd'
            });

            $('#edate').on('change',function () {
                var sdate = $('#sdate').val();
                var edate = $('#edate').val();
                var diff = new Date(new Date(edate) - new Date(sdate));
                var days = diff/1000/60/60/24;
                if(days < 0){
                    alert("Sorry! You must pick an end date that is greater!");
                    $('#edate').val('');    
                } else {
                    alert ("This date range is good! Your start date and end dates are " + days + " days apart!");
                }           
                return false;
            });

        });
        </script>

   </body>
</html>

【讨论】：

你能给我一个简单的演示，关于使用 focusout 来处理日期范围检查吗？谢谢
太棒了！欢迎:)
对了，函数中需要“return false”吗？我试过没有那个，它也可以正常工作。
不需要，只是我的一个习惯，包括它，呵呵