jQuery Datepicker - 仅在开始日期不为空时启用提交按钮答案

【问题标题】：jQuery Datepicker - Enable submit button only if start-end date are not emptyjQuery Datepicker - 仅在开始日期不为空时启用提交按钮
【发布时间】：2015-04-22 11:47:38
【问题描述】：

$('#datepicker_start').datepicker({
         dateFormat: 'd-M-y' ,
         onSelect: function(selected) {
              $("#datepicker_end").datepicker("option","10-03-2015", selected)
            }
    });


$('#datepicker_end').datepicker({
         dateFormat: 'd-M-y' ,
         onSelect: function(selected) {
              $("#datepicker_start").datepicker("option","09-04-2015", selected)
            }
    });


<button class="btn" id="btn_submit" type="button" disabled="disabled">Submit</button> 


        //enable 'Submit' button only if start-end dates both are not empty
        if( $('#datepicker_start').val().length !=0 && $('#datepicker_end').val().length !=0 ){
            $('#btn_submit').attr('disabled', false);            
        }else{
            $('#btn_submit').attr('disabled',true);
        }

当从日历中选择日期但在文档加载时，上述内容不检查输入的开始-结束日期。从日期选择器中选择日期时如何检查输入值是否为空

【问题讨论】：

以上代码有什么问题？错误还是不工作？
您的“仅在...时启用提交按钮”应由事件处理。我的意思是，你怎么知道日期选择器何时有价值？
@kmsdev，可以使用 datepicker 的 onSelect 事件来处理
是的，就是这样。其他解决方法是管理您的提交按钮，例如$('#btn_submit').on('click', function(){ // if datepickers have values return true, else return false });

标签： jquery datepicker jquery-ui-datepicker

【解决方案1】：

试试这个：您可以创建一个函数来启用或禁用提交按钮，并在选择日期值后调用它。

$(function(){

   var enableDisableSubmitBtn = function(){
     var startVal = $('#datepicker_start').val().trim();
     var endVal = $('#datepicker_end').val().trim();
     var disableBtn =  startVal.length == 0 ||  endVal.length == 0;
     $('#btn_submit').attr('disabled',disableBtn);
   }

   $('#datepicker_start').datepicker({
         dateFormat: 'd-M-y' ,
         onSelect: function(selected) {
              $("#datepicker_end").datepicker("option","10-03-2015", selected);
              enableDisableSubmitBtn();
            }
    });


    $('#datepicker_end').datepicker({
         dateFormat: 'd-M-y' ,
         onSelect: function(selected) {
              $("#datepicker_start").datepicker("option","09-04-2015", selected);
             enableDisableSubmitBtn();
            }
    });
});


<button class="btn" id="btn_submit" type="button" disabled="disabled">Submit</button>

JSFiddle Demo

【讨论】：

【解决方案2】：

你可以做一个检查函数，当你选择一个日期时调用它类似的东西：

function check(){
        if( $('#datepicker_start').val().length !=0 && $('#datepicker_end').val().length !=0 ){
            $('#btn_submit').attr('disabled', false);            
        }else{
            $('#btn_submit').attr('disabled',true);
        }
}
$('#datepicker_start').datepicker({
         dateFormat: 'd-M-y' ,
         onSelect: function(selected) {
              $("#datepicker_end").datepicker("option","10-03-2015", selected)
check();
            }
    });


$('#datepicker_end').datepicker({
         dateFormat: 'd-M-y' ,
         onSelect: function(selected) {
              $("#datepicker_start").datepicker("option","09-04-2015", selected)
            }
    });


<button class="btn" id="btn_submit" type="button" disabled="disabled">Submit</button>

【讨论】：

【解决方案3】：

我建议你在onSelect datepicker 的活动中工作：

$('#datepicker_start').datepicker({
     dateFormat: 'd-M-y' ,
     onSelect: function(selected) {
        $("#datepicker_end").datepicker("option","10-03-2015", selected);
        enablebtn($("#btn_submit"), $('#datepicker_start'), $('#datepicker_end')); // use it here and pass the elements
     }
});

$('#datepicker_end').datepicker({
     dateFormat: 'd-M-y' ,
     onSelect: function(selected) {
        $("#datepicker_start").datepicker("option","09-04-2015", selected);
        enablebtn($("#btn_submit"), $('#datepicker_start'), $('#datepicker_end')); // use it here and pass the elements
     }
});

function enablebtn(btn, startDate, endDate){
    var bool = startDate.val().length && endDate.val().length; // returns true/false;
    btn.prop('disabled', bool); // now it enables when true and disables if false.
}

【讨论】：

【解决方案4】：

试试这样的

if(isNaN(fromDate) || isNaN(toDate))
{
alert("Please select To/From Date");
}

【讨论】：

这毫无意义，与实际问题无关。此外，您将始终从 datepickers 值中获得 NaN。