How to Dynamically Set Min and Max Dates in Layui Date Picker Based on a 90-Day Range

When creating a project, the start and end dates need to be linked so that the end date cannot be earlier than the start date and cannot exceed 90 days after the start date. Using Layui's laydate component, the min and max parameters can be set dynamically.

First, define the current date, and compute the initial min and max strings:

var now = new Date();
var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1);
var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);

Render the start date picker and in its done callback convert the selected value to a timestamp, add 90 days (90*24*3600*1000 ms), and build a date object for the end date's limits.

var start = laydate.render({
    elem: '#bx_start',
    type: 'date',
    max: max,
    min: min,
    showBottom: false,
    btns: ['clear', 'confirm'],
    done: function (value, date) {
        var date1 = new Date(value).getTime();
        var date2 = date1 + 90 * 24 * 3600 * 1000;
        var date3 = new Date(date2);
        var date5 = {
            'date': date3.getDate(),
            'month': date3.getMonth() + 1,
            'year': date3.getFullYear()
        };
        end.config.max = date5;
        end.config.max.month = date5.month - 1;
        end.config.min = date;
        end.config.min.month = date.month - 1;
    }
});

Render the end date picker and in its done callback assign the computed start date as its max value, handling empty input by defaulting to the current date.

var end = laydate.render({
    elem: '#bx_end',
    type: 'date',
    max: max,
    min: min,
    showBottom: false,
    done: function (value, date) {
        if ($.trim(value) == '') {
            var curDate = new Date();
            date = {
                'date': curDate.getDate(),
                'month': curDate.getMonth() + 1,
                'year': curDate.getFullYear()
            };
        }
        start.config.max = date;
        start.config.max.month = date.month - 1;
    }
});

The complete script combines the variable definitions and both render calls inside a Layui module.

<script>
layui.use(['form','layedit','laydate','layer','element'], function() {
    $ = layui.jquery;
    layer = layui.layer;
    var form = layui.form;
    layedit = layui.layedit;
    laydate = layui.laydate;
    // define now, min, max as above
    var now = new Date();
    var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1);
    var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);
    // start date picker (see code above)
    // end date picker (see code above)
});
</script>