How can I disable an input type date with jQuery if the first input is empty

Question

I'm working at a checkout page. I need to disable an input (#dreturn) if the previous input (dpick) is empty.

This is my code:

    $(document).ready(function(){
    var minDate = new Date();
    $("#dpick").datepicker({
        showAnim: 'drop',
        numberOfMonth: 1,
        maxDate: 7,
        minDate: minDate,
        dateFormat: 'yy/mm/dd',
        onClose : function(selectedDate){
            $('#dreturn').datepicker("option", "minDate", selectedDate);
        }});
        var minDate = new Date();
    $("#dreturn").datepicker({
        showAnim: 'drop',
        numberOfMonth: 1,
        maxDate: 7,
        minDate: minDate,
        dateFormat: 'yy/mm/dd',
        onClose : function(selectedDate){
            $('#dreturn').datepicker("option", "minDate", selectedDate);
        }});

This is my datapicker but this isn't helping me.

    $('#dreturn').change(function() {
     var start = $('#dpick').datepicker('getDate');
     var end   = $('#dreturn').datepicker('getDate');

     if (start<end) {
      var days   = (end - start)/1000/60/60/24;
      $('#days').val(days);
     }
     else {
      alert ("Please chech again your dates!");
      $('#dpick').val("");
      $('#dreturn').val("");
      $('#days').val("");
     }
    });

I've tried this but isn't working.

if (!'dpick').val() {
    document.getElementById("dreturn").disabled = true;
}
});

`if (!'dpick').val() {` <= this has at least 3 syntax errors. First you are not doing a jquery method call there with `$(selector)` and your selector is wrong. The `!` also does not go in the selector. And the `if` expression's `()` is not closed properly. — Taplar, Jun 10 '20 at 16:14

plutolaser · Accepted Answer · 2020-06-10T17:12:42.437

0

Change your if statement to

if(!Date.parse($("dpick").val())){

and move this if to blur event handler, something like this

 $("#dpick").blur(function (){
  if(!Date.parse($(this).val())){
    document.getElementById("dreturn").disabled = true;
  }else{
    document.getElementById("dreturn").disabled= false;
  }
})

edited Jun 10 '20 at 17:12

answered Jun 10 '20 at 16:34

plutolaser

448
4
17

"if(!$("dpick").val()){" thanks, this works but after I pick the date in "dpick" it remains disabled – teo Jun 10 '20 at 16:45
I have assumed it is an id. Kindly check it – plutolaser Jun 10 '20 at 17:05
Yes, it is an id, I've modified it when you send me that answer but still doesn't work. – teo Jun 10 '20 at 17:10
This time, I had change the event from on change to blur. – plutolaser Jun 10 '20 at 17:22

isteeak · Answer 2 · 2020-06-11T04:05:48.000

Initially disable the second date-picker "#dreturn" after initializing your date-pickers:

 $(document).ready(function(){
        //initialization
        $("#dpick").datepicker({...});
        $("#dreturn").datepicker({...});

        $("#dreturn").prop('disabled',true);



         /****************** new code to be inserted see below ************/


});

Now, on the change of "#dpick" enable "#dreturn":

/************************ CODE TO BE INSERTED ABOVE ****************/

$("#dpick").change"(
    function()
    {
      var val= $("#dpick").val();

      if(!(val))
      {
            $("#dreturn").prop('disabled',false);
      }
    }

   );

Note: 1. " if(val)" evaluates to true if "val" is not null, undefined and the jQuery UI documentation states for the datepicker in https://api.jqueryui.com/datepicker/#option-defaultDate that the default value is "null". 2. Now to use "change()" for the datepicker of jQuery UI, check jQuery Datepicker onchange event issue which so, it means you have to use "onSelect" of jQuery datepicker UI to address the defect of your datepicker.

   $(document).ready(
            function()
            {
                //initialization
                 $("#dpick").datepicker({
                                             showAnim: 'drop',
                                            numberOfMonth: 1,
                                            maxDate: 7,
                                            minDate: minDate,
                                            dateFormat: 'yy/mm/dd',
                                            onClose : function(selectedDate){
                                                $('#dreturn').datepicker("option", "minDate", selectedDate);
                                            },
                                             onSelect: function(){
                                                            $(this).change();
                                            }
                            });
                 $("#dreturn").datepicker({.....});


                 $("#dreturn").prop('disabled',true);


                    $("#dpick").change"(
                                        function()
                                        {
                                          var val= $("#dpick").val();

                                          if(val)
                                          {
                                                $("#dreturn").prop('disabled',false);
                                          }
                                        }

                                       );


            }


);

And your problem should be solved. Hope it helps. :-)

How can I disable an input type date with jQuery if the first input is empty

2 Answers2