Laravel 禁止在选择开始日期之前选择结束日期

Question

我试图禁用结束日期以防止用户在他们首先选择开始日期之前选择结束日期，这是我的代码：

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

    });

但它会完全禁用结束日期，即使用户已经输入了开始日期。我是不是遗漏了什么或者有人有解决方案吗？谢谢。

Answer 1

试试这个，

// 日期选择器

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

});

Answer 2

我尝试阅读 documentation，您可以将 minDate 设置为：

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

所以根据你的情况你可以试试:

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

Laravel 禁止在选择开始日期之前选择结束日期

Laravel disable choosing end date before choosing start date

php

jquery-ui-datepicker

laravel