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

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);
        }

The above does not checks the start-end dates input when date is selected from calendar but on document load. How to check input value is empty or not when date is selected from datepicker

Your "enable submit button only if..." should be handled by an event. I mean, how do you know when datepickers have a value? — kosmos
– kosmos, Commented Apr 22, 2015 at 11:55
@kmsdev, that could be handled using onSelect event for datepicker — Slimshadddyyy
– Slimshadddyyy, Commented Apr 22, 2015 at 12:00
Yes, that's it. Other workaround would be to manage your submit button, something like $('#btn_submit').on('click', function(){ // if datepickers have values return true, else return false }); — kosmos
– kosmos, Commented Apr 22, 2015 at 12:02

Bhushan Kawadkar · Accepted Answer · 2015-04-22 11:55:57Z

Try this : You can create a function to enable or disable submit button and call it after selecting a date value.

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

Islam Zedan · Accepted Answer · 2015-04-22 11:53:47Z

You can make a check function and call it when you pick a date some thing like that :

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>

Jai · Accepted Answer · 2015-04-22 12:00:33Z

Well i suggest you to work within the onSelect datepicker's event:

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

Rajendra Gupta · Accepted Answer · 2015-04-22 11:57:12Z

-1

Try something like this

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

answered Apr 22, 2015 at 11:57

Rajendra Gupta

3791 silver badge16 bronze badges

1 Comment

kosmos Over a year ago

This makes no sense and has no relation with real issue. Also you will get always a NaN from the datepickers values.

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related