minDate не устанавливается в средстве выбора даты

Вот как я использую средство выбора даты, на мой взгляд:

<input type="text" class="form-control datepicker" name="ChartStartDate1" id="dailySummaryDt" data-bind="datePicker: targetDate, minDate: viewModel.datePickerMinDate()" />
<span id="temp" data-bind="text:viewModel.datePickerMinDate()"></span>

Последняя строка с span работает отлично. Я создал этот диапазон только для того, чтобы проверить, имеет ли моя модель правильное значение или нет. Но средство выбора даты не получает это значение, и я не знаю, почему.

minDate для выбора даты не устанавливается; другими словами, я не могу установить минимальную дату для средства выбора даты. Обратите внимание, что следующее работает правильно:

minDate: new Date()  or
minDate:new Date('01/10/2015')

Это не работает. Если я попытаюсь отладить обработчик привязки, значение даты будет либо неопределенным, либо недопустимым во всех этих случаях:

minDate: new Date(viewModel.datePickerMinDate())  OR
minDate: viewModel.datePickerMinDate()  OR
minDate: viewModel.datePickerMinDate

Вот код моего обработчика привязки

ko.bindingHandlers.datePicker = {
    init: function (element, valueAccessor, allBindings) {
        var minDate = moment(allBindings.get('minDate') || ''),
            maxDate = moment(allBindings.get('maxDate') || ''),
            options = {
                minDate: minDate.isValid() ? minDate.toDate() : undefined,
                maxDate: maxDate.isValid() ? maxDate.toDate() : undefined,
                onClose: function () { if ($.fn.valid) $(this).valid(); },
                dateFormat: allBindings.get('format') || GGS.dateFormats.pickerDateFormat
            },
            dp = $(element).datepicker(options);
        console.log('minDate ' + minDate + '  ' + moment.utc($("#ChartStartDate").val()).format('MM/DD/YYYY'));
        dp.change(function () {
            var observable = valueAccessor(),
                unwrapped = ko.unwrap(observable)
                current = unwrapped ? moment.utc(unwrapped) : null,
                raw = dp.datepicker("getDate"),
                localValue = raw ? moment(raw) : null, //n.b. not UTC; stupid jQuery UI
                value = localValue ? moment.utc([localValue.year(), localValue.month(), localValue.date()]) : null //extract the date part to a UTC date
                if (!value || (!current || !current.isSame(value, 'day'))) {
                    console.log('value = ' + value.toDate());
                     observable(value ? value.toDate() : value);
                }
        });
    },
    update: function (element, valueAccessor) {
        var dp = $(element);
        var observable = valueAccessor(),
            unwrapped = ko.unwrap(observable),
            value = unwrapped ? moment.utc(unwrapped) : null,
            localValue = value ? moment([value.year(), value.month(), value.date()]) : null //make sure that jQuery UI shows the date we expect, rather than trying to convert to local time
        ;
        dp.datepicker("setDate", localValue ? localValue.toDate() : localValue);
        dp.blur();        
    },
}

knockout.js bootstrap-datepicker
person ATHER    schedule 14.02.2015    source источник
comment
ищите что-то вроде этого jsfiddle.net/supercool/X82aC/1251 . вы можете изменить new Date() на любую наблюдаемую, где вы можете указать свою собственную минимальную дату   -  person super cool    schedule 17.02.2015
comment
хорошо, если возникнет проблема, дайте мне знать, вот скрипка с вашим кодом . ваше здоровье .   -  person super cool    schedule 17.02.2015
comment
Спасибо, это сработало. !!   -  person ATHER    schedule 17.02.2015

Ответы (1)


arrow_upward
2
arrow_downward

Ну, как упоминалось в комментариях, вам просто нужно сделать это

просмотр:

<input type="text" class="form-control datepicker" data-bind="datePicker:targetDate, minDate:datePickerMinDate()" />
<span id="temp" data-bind="text:targetDate"></span>

Модель представления:

var ViewModel = function () {
    var self = this;
    self.targetDate = ko.observable('01/10/2015');
    self.datePickerMinDate = ko.observable('01/10/2015');
};

//In bindingHandler update 

 update: function (element, valueAccessor) {

        var dp = $(element);
        var observable = valueAccessor(),
            unwrapped = ko.unwrap(observable)

          //here you have to format the Date before setting 
            $(element).datepicker("setDate", unwrapped);
        dp.blur();

    }

Рабочая скрипка для справки здесь

person super cool    schedule 18.02.2015