Jquery 验证开始和结束日期

Jquery 验证开始和结束日期,jquery,bootstrap-datepicker,Jquery,Bootstrap Datepicker,我正在验证我的出发和返回日期 目前,您可以选择从今天开始的任何日期 我需要的是返回日期中显示的日期,以禁止在开始日期之前显示或选择任何日期 我的html <input class="fromDate" data-date-format="dd/mm/yyyy" data-val="true" data-val-required="[Required_DepartureDate] not found" id="DepartureDate" name="d" type="text" value

我正在验证我的出发和返回日期

目前,您可以选择从今天开始的任何日期

我需要的是返回日期中显示的日期,以禁止在开始日期之前显示或选择任何日期

我的html

<input class="fromDate" data-date-format="dd/mm/yyyy" data-val="true" data-val-required="[Required_DepartureDate] not found" id="DepartureDate" name="d" type="text" value="">
<input class="ToDate" data-date-format="dd/mm/yyyy" id="ReturnDate" name="d" type="text" value="">
我的jquery

 /* global google */
define(["jquery",
"modernizr",
"plugin/bootstrap-datepicker",
"plugin/bootstrap-datepicker.ar",
"plugin/bootstrap-datepicker.zh-CN"]
, function ($, Modernizr) {

    /**
     * D picker - a wrapper around datepicker with a bit of feature detection
     */
    $.fn.dPicker = function () {

        var htmlLang = $("html").attr("lang"),
            langObj = $.fn.datepicker.dates[htmlLang];

        if (langObj === undefined || langObj === null) {
            if(htmlLang.indexOf("-") > -1)
            {
                htmlLang = htmlLang.substring(0, htmlLang.indexOf("-"));
                langObj = $.fn.datepicker.dates[htmlLang];
            }
        }

        // If the language still isn't found the look for one matching the first part of the lang string
        if (langObj === undefined || langObj === null && htmlLang.indexOf("-") === -1) {
            for (var key in $.fn.datepicker.dates) {
                if (key.indexOf(htmlLang) === 0) {
                    htmlLang = key;
                    langObj = $.fn.datepicker.dates[key];
                    break;
                }
            }
        }

        var fromDate = {
            format: "dd/mm/yyyy",
            startDate: '1',//min date set to today
            autoclose: true,
            todayHighlight: true,
            language: langObj === undefined || langObj === null ? "en" : htmlLang,
            orientation: langObj === undefined || langObj === null || !langObj.rtl ? "auto auto" : "auto right",
            clearBtn : true
        };


        var toDate = {
            format: "dd/mm/yyyy",
            startDate: '1',//Set date x days from today
            maxDate: '+1y +1d',//max date x year + 1 day
            endDate: '+1y +1d',
            autoclose: true,
            todayHighlight: true,
            language: langObj === undefined || langObj === null ? "en" : htmlLang,
            orientation: langObj === undefined || langObj === null || !langObj.rtl ? "auto auto" : "auto right",
            clearBtn: true
        };


        return this.each(function (i, el) {

            var $that = $('.fromDate');
            var $this = $('.ToDate');

            if (!Modernizr.touch || !Modernizr.inputtypes.date) {
                //if (Modernizr.inputtypes.date) {
                    // Only swap the input type to text because IE8 doesn't allow changing types (throws error)
                    // We do this so that the placeholder shows in browsers that support it
                    //$that.attr("type", "text");
                //}

                try {
                    $that.attr("type", "text");
                    $this.attr("type", "text");
                } catch (e) {
                }

                // add localised date format from data attribute
                if ($that.data("date-format")) {
                    fromDate.format = $that.data("date-format");
                }

                if ($this.data("date-format")) {
                    toDate.format = $this.data("date-format");
                }

                // copy name attribute from $that.datepicker(dpOpts);
                // Insert hidden field & remove name attribute from textbox
                $that.after("<input name='" + $that.attr("name") + "' type='hidden'>")
                    .attr("name", "d")
                    .datepicker(fromDate)
                    .on("changeDate", function (e) {
                        $(this).next().val(e.format(0, "yyyy-mm-dd"));
                    });

                if ($that.val() !== "") {
                    $that.datepicker("setDate", new Date($that.val()));
                }


                $this.after("<input name='" + $this.attr("name") + "' type='hidden'>")
                    .attr("name", "d")
                    .datepicker(toDate)
                    .on("changeDate", function (e) {
                        $(this).next().val(e.format(0, "yyyy-mm-dd"));
                    });

                if ($this.val() !== "") {
                    $this.datepicker("setDate", new Date($this.val()));
                }

                // re-run validation after changing name attribute, see http://stackoverflow.com/a/18063874/486434
                var $form = $that.closest("form");
                var $form2 = $this.closest("form");
                $form.unbind();
                $form2.unbind();
                $form.data("validator", null);
                $form2.data("validator", null);
                $.validator.unobtrusive.parse(document);
                // Re add validation with changes
                $form.validate($form.data("unobtrusiveValidation").options);
                $form2.validate($form2.data("unobtrusiveValidation").options);
            }


        });
    };

    return $.fn.dPicker;
});
编辑:刚刚注意到您使用的不是jQueryUIDatePicker

每当“开始日期”输入更改时,从日期选择器获取值并更新“结束日期”minDate/startDate属性

引导数据采集器的应答

jQueryUIDatePicker的答案


我找不到minDate选项作为bootstrap datepicker的一部分,我应该在哪里将其添加到代码中,是否必须在if语句中创建它?我更新了答案以包含bootstrap datepicker设置。值得在你最初的问题中澄清这一点。你最终解决了吗?在示例中,您几乎就完成了,请查找onchangeDate函数,然后使用我的示例完成它:是的,我最终得到了它,感谢您的帮助,您的回答是:
$('.fromDate input').on("changeDate", function(){
  var minDate = $(this).datepicker( "getDate" );
  $('.toDate input').datepicker("setStartDate", minDate);
});
$('.fromDate input').on("change", function(){
  var minDate = $(this).datepicker( "getDate" );
  $('.toDate input').datepicker("option", "minDate", minDate);
});