jQuery 日期选择器 - 仅当开始结束日期不为空时启用提交按钮

Question

$('#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);
        }

当从日历中选择日期但在文档加载时，以上不检查输入的开始和结束日期。从日期选择器

中选择日期时如何检查输入值是否为空

Answer 1

你可以做一个检查功能，当你选择一个日期时调用它类似的事情 :

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>

Answer 2

我建议你在 onSelect 日期选择器的事件中工作：

$('#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.
}

Answer 3

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

$(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

Answer 4

尝试这样的事情

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

jQuery 日期选择器 - 仅当开始结束日期不为空时启用提交按钮

jQuery Datepicker - Enable submit button only if start-end date are not empty

jquery

datepicker

jquery-ui-datepicker