Laravel disable choosing end date before choosing start date-CodePudding

I tried to disable end period date to prevent user from choosing end date before they choose start date first, here is my code :

// Datepicker
        
    $('.dtpicker').datepicker({
            startDate: new Date(),
            format: "dd-MM-yyyy",
            todayBtn: "linked",
            autoclose: true,
    });

    $(document).ready(function(){
    $("#periode_end").attr("disabled", "disabled");

    $("#periode_start").datepicker({
        todayBtn:  "linked",
        format: "dd-MM-yyyy",
        autoclose: true,
        }).on('changeDate', function (selected) {
            var minDate = new Date(selected.date.valueOf());

        $("periode_end").removeAttr("disabled");
        $('#periode_end').datepicker('setStartDate', minDate);
        });

        $("#periode_end").datepicker({
            format: "dd-MM-yyyy",
            autoclose: true,
        })
        .on('changeDate', function (selected) {
            var maxDate = new Date(selected.date.valueOf());
            $('#periode_start').datepicker('setEndDate', maxDate);
        });

    });

but it disable end date completely, even if user already input the start date. Am I missing something or anyone has an solution?, thanks.

CodePudding user response：

I try read the documentation, you can set the minDate with:

$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );

So at your condition you can try :

$('.dtpicker').datepicker({
    startDate: new Date(),
    format: "dd-MM-yyyy",
    todayBtn: "linked",
    autoclose: true,
});

$(document).ready(function(){
    $("#periode_end").prop("disabled", true)
    .datepicker({
        format: "dd-MM-yyyy",
        autoclose: true,
    }).on('changeDate', function (selected) {
        var maxDate = new Date(selected.date.valueOf());
        $('#periode_start').datepicker('option', 'maxDate', maxDate);
    });

    $("#periode_start").datepicker({
        todayBtn:  "linked",
        format: "dd-MM-yyyy",
        autoclose: true,
    }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        //here you set disabled to false, and set min date for periode_end
        $("#periode_end").prop("disabled", false)
        .datepicker('option', 'minDate', minDate);
    });
});

CodePudding user response：

try this,

// Datepicker

$('.dtpicker').datepicker({
        startDate: new Date(),
        format: "dd-MM-yyyy",
        todayBtn: "linked",
        autoclose: true,
});

$(document).ready(function(){
$("#periode_end").attr('disabled', true);

$("#periode_start").datepicker({
    todayBtn:  "linked",
    format: "dd-MM-yyyy",
    autoclose: true,
    }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());

    
  **// add this**
    if(!new Date($(this).val())){
           $("#periode_end").attr('disabled', true);
    }else{
           $("#periode_end").attr('disabled', false);
    }

    //

    $('#periode_end').datepicker('setStartDate', minDate);
    });

    $("#periode_end").datepicker({
        format: "dd-MM-yyyy",
        autoclose: true,
    })
    .on('changeDate', function (selected) {
        var maxDate = new Date(selected.date.valueOf());
        $('#periode_start').datepicker('setEndDate', maxDate);
    });

});