日期时间选择器验证不起作用答案

【问题标题】：Datetimepicker validation doesn't work日期时间选择器验证不起作用
【发布时间】：2017-11-09 02:39:12
【问题描述】：

我有一个带有 2 个 datetimepciker 的表单：一个用于开始日期，另一个用于结束日期。

验证是选择开始日期时，结束日期必须大于或等于开始日期。

我在 Internet 上搜索，但我的代码不起作用。

这是我的js函数：

function formatFields() {
    $('#report_startDate').datepicker({
        format: 'mm/dd/yyyy',
        todayHighlight: true,
        autoclose: true,
        startDate: "01/01/1900",
        endDate: "01/01/2100"
    });
    $('#report_endDate').datepicker({
        format: 'mm/dd/yyyy',
        todayHighlight: true,
        autoclose: true,
        startDate: "01/01/1900",
        endDate: "01/01/2100"
    });
    $("#report_endDate").datepicker().on("dp.change", function (e) {
        $('#report_startDate').data("DateTimePicker").minDate(e.date);
    });
}

这是我的 2 个日期时间选择器的 html：

 <table style="width: 100%">
        <tr>
            <td>
                <div class="form-group">
                    <label class="control-label col-sm-3" id="lb_report_startDate"></label>
                    <div class="col-sm-8 date">
                        <div class="input-group input-append date" id="report_startDate">
                            <input runat="server" type="text" class="form-control" name="report_startDate_datePicker" id="report_startDate_datePicker" />
                            <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <span id="report_startDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
                    </div>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <label class="control-label col-sm-3" id="lb_report_endDate"></label>
                    <div class="col-sm-8 date">
                        <div class="input-group input-append date" id="report_endDate">
                            <input runat="server" type="text" class="form-control" name="report_endDate_datePicker" id="report_endDate_datePicker" />
                            <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <span id="report_endDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
                    </div>
                </div>
            </td>
        </tr>
    </table>

这里的任何人都可以解释我的代码有什么问题以及如何解决问题？非常感谢。

function formatFields() {
    $('#report_startDate').datepicker({
        format: 'mm/dd/yyyy',
        todayHighlight: true,
        autoclose: true,
        startDate: "01/01/1900",
        endDate: "01/01/2100"
    });
    $('#report_endDate').datepicker({
        format: 'mm/dd/yyyy',
        todayHighlight: true,
        autoclose: true,
        startDate: "01/01/1900",
        endDate: "01/01/2100"
    });
    $("#report_endDate").datepicker().on("dp.change", function (e) {
        $('#report_startDate').data("DateTimePicker").minDate(e.date);
    });
}

<table style="width: 100%">
        <tr>
            <td>
                <div class="form-group">
                    <label class="control-label col-sm-3" id="lb_report_startDate"></label>
                    <div class="col-sm-8 date">
                        <div class="input-group input-append date" id="report_startDate">
                            <input runat="server" type="text" class="form-control" name="report_startDate_datePicker" id="report_startDate_datePicker" />
                            <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <span id="report_startDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
                    </div>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <label class="control-label col-sm-3" id="lb_report_endDate"></label>
                    <div class="col-sm-8 date">
                        <div class="input-group input-append date" id="report_endDate">
                            <input runat="server" type="text" class="form-control" name="report_endDate_datePicker" id="report_endDate_datePicker" />
                            <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <span id="report_endDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
                    </div>
                </div>
            </td>
        </tr>
    </table>

【问题讨论】：

标签： javascript datetimepicker

【解决方案1】：

尝试在您的 js 中更改以下代码

$('#report_startDate').data("DateTimePicker").minDate(e.date);

到

$('#report_startDate').datepicker("option", "minDate", e.date);

【讨论】：

这里的“selectedDate”是什么？
哎呀忘了替换变量，我已经编辑了答案。
我只是意识到当 datetimepicker 更改值时我调用了错误的事件。看看我的回答。还是谢谢。

【解决方案2】：

我终于找到了答案。

我的函数在更改时调用了 datetimepicker 的错误事件。

我的函数改为：

function formatFields() {
    $('#report_startDate').datepicker({
        format: 'mm/dd/yyyy',
        todayHighlight: true,
        autoclose: true,
        startDate: "01/01/1900",
        endDate: "01/01/2100"
    }).on("changeDate", function (e) {
        $('#report_endDate').datepicker('setStartDate', e.date);
    });
    ;
    $('#report_endDate').datepicker({
        format: 'mm/dd/yyyy',
        todayHighlight: true,
        autoclose: true,
        startDate: "01/01/1900",
        endDate: "01/01/2100"
    });
}

而且它有效。

参考：Bootstrap datepicker change minDate/startDate from another datepicker

【讨论】：