Question

我正在尝试验证我的离开和返回日期。

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

我需要的是返回日期中显示的日期，以禁用在开始日期之前显示或被选中的任何日期。

我的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;
});

Answer 1

编辑：注意到您正在使用Bootstrap Datepicker而不是jQuery UI Datepicker。

每当“开始日期”＆＃39;输入更改，从Datepicker获取值并更新结束日期＆＃39; minDate / startDate属性

回答Bootstrap Datepicker

$('.fromDate input').on("changeDate", function(){
  var minDate = $(this).datepicker( "getDate" );
  $('.toDate input').datepicker("setStartDate", minDate);
});

回答jQuery UI Datepicker

$('.fromDate input').on("change", function(){
  var minDate = $(this).datepicker( "getDate" );
  $('.toDate input').datepicker("option", "minDate", minDate);
});

验证日期的开始和结束

1 个答案: