проверка дат начала и окончания

Я пытаюсь подтвердить даты отправления и возвращения.

На данный момент вы можете выбрать любые даты, начиная с сегодняшнего дня.

что мне нужно, так это даты, показанные в дате возвращения, чтобы отключить отображение или выбор дат до даты начала.

мой 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;
});

person Hasan    schedule 28.01.2015    source источник


Ответы (1)


EDIT: Только что заметил, что вы используете Bootstrap Datepicker вместо jQuery UI Datepicker.


Всякий раз, когда изменяется ввод «дата начала», получайте значение из средства выбора даты и обновляйте свойство «дата окончания» 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);
});
person tombeynon    schedule 28.01.2015
comment
я не могу найти параметр minDate как часть средства выбора даты начальной загрузки bootstrap-datepicker.readthedocs.org /en/release/options.html и где именно я могу добавить это в код, мне нужно создать его внутри оператора if? - person Hasan; 28.01.2015
comment
Я обновил свой ответ, включив в него настройки Bootstrap Datepicker. Стоит уточнить это в вашем исходном вопросе. - person tombeynon; 29.01.2015
comment
У вас получилось в итоге? Вы почти достигли цели в своем примере, найдите свою функцию on("changeDate"), а затем используйте мой пример, чтобы завершить ее :) - person tombeynon; 29.01.2015
comment
да, я понял, в конце концов, спасибо за вашу помощь, вы были в точку :) - person Hasan; 30.01.2015