如何确保“to”日期始终晚于“from”日期？ [复制]答案

【问题标题】：How can I ensure that a "to" date is always later than the "from" date? [duplicate]如何确保“to”日期始终晚于“from”日期？ [复制]
【发布时间】：2013-06-23 10:28:06
【问题描述】：

在“From”字段中，用户选择一个日期，在“To”字段中，日期不应小于“From”字段日期。

我怎样才能做到这一点？

<script type="text/javascript">
    $(document).ready(function() {

        $('.ui-datepicker-prev ui-corner-all').hide();

        $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: "-0:c+10",
            dateFormat: "dd - M - yy",
            onClose: function(selectedDate) {
                $('#datepicker1').datepicker("setDate", selectedDate);
            }
        });

        $('#datepicker').datepicker("setDate", new Date());

        $("#datepicker1").datepicker({
            changeMonth:false,
            yearRange: "-0:+0",
            dateFormat: "dd - M - yy"
        });
    });
</script>

这是我的代码（到目前为止）：http://jsfiddle.net/Mounika_Garrepalli/8z2UH/

【问题讨论】：

签出jqueryui.com/datepicker/#date-range

标签： javascript jquery css html datepicker

【解决方案1】：

您可以通过将日期传递给函数来比较日期

var dt1_temp = date1.split("-");
var ctdt1 = new Date(dt1_temp[2],dt1_temp[1],dt1_temp[0]); // Y/m/d format
var dt2_temp = date2.split("-");
var ctdt2 = new Date(dt2_temp[2],dt2_temp[1],dt2_temp[0]);

现在我们可以比较日期

if(ctdt1>ctdt2) {
alert("To date should not be equal or before the from date");
}

【讨论】：

【解决方案2】：

这是FIDDLE

        $(document).ready(function () {

        $('.ui-datepicker-prev ui-corner-all').hide();
        $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: "-0:c+10",
            dateFormat: "dd - M - yy",
            onClose: function (selectedDate) {
                $('#datepicker1').datepicker("setDate", selectedDate);
            }
        });
        $('#datepicker').datepicker("setDate", new Date());

        $("#datepicker1").datepicker({
            yearRange: "-0:+0",
            dateFormat: "dd - M - yy"
        });
        $('#datepicker').change(function () {
            checkDate($(this), $('#datepicker1'));
        });
        $('#datepicker1').change(function () {
            checkDate($('#datepicker'), $(this));
        });
    });

    function checkDate(date1, date2) {
        if (date1.val() > date2.val()) {
            alert('Error');
            date2.val(date1.val());
        }
    }

【讨论】：

【解决方案3】：

您可以使用 minDate 选项：

$("#datepicker1").datepicker({
    yearRange: "-0:+0",
    //Set the initial minDate
    minDate: $("#datepicker").datepicker("getDate"),
    dateFormat: "dd - M - yy"
});

然后反应：

$("#datepicker").on("change", function() {
    $("#datepicker1").datepicker("option", "minDate", $(this).datepicker("getDate"));
});

http://jsfiddle.net/8z2UH/5/

【讨论】：

【解决方案4】：

尝试一次this

        $(document).ready(function() {

        $('.ui-datepicker-prev ui-corner-all').hide();
        $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: "-0:c+10",
            dateFormat: "dd - M - yy",
            onClose: function(selectedDate) {
                $('#datepicker1').datepicker("setDate", selectedDate);
            }
        });
        $('#datepicker').datepicker("setDate", new Date());
        $("#datepicker").change(function() {
             datepicker1_mindate = $(this).datepicker('getDate');
             datepicker1_mindate = new Date(datepicker1_mindate.getTime());
             $("#datepicker1").datepicker("option", "minDate", datepicker1_mindate);
         });
        $("#datepicker1").datepicker({
            yearRange: "-0:+0",
            dateFormat: "dd - M - yy",                
        });

    });

【讨论】：

【解决方案5】：

试试这个：

$(document).ready(function() {

    $('.ui-datepicker-prev ui-corner-all').hide();
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-0:c+10",
        dateFormat: "dd - M - yy",
        onSelect: function(selectedDate) {
            $("#datepicker1").datepicker("option", "minDate", selectedDate);
            $('#datepicker1').datepicker("setDate", selectedDate);
        }
    });
    $('#datepicker').datepicker("setDate", new Date());

    $("#datepicker1").datepicker({
        yearRange: "-0:+0",
        dateFormat: "dd - M - yy"
    });

});

【讨论】：