Binding a datepicker max date in future based on checkbox in Knockout.js

Question

I have a datepicker whose max selectable date is six months in the future. And if I select a checkbox, the max selectable date can be any time in the future. I'm trying to do this with Knockout.js.

This would be my date picker input options:

<input id="newRequestStartDate"
       type="text"
       data-bind="sfDatePicker: request.startDate, sfDatePickerOptions: startDateOptions, disable: summaryHasInvalidDays()"
       id="newTimeOffRequestStartDate"
       class="sf-form-input"
       data-range-group="ptoRange"
       name="newTimeOffRequestStartDate"
/>

This would be my checkbox input:

<input type="checkbox"
       id="globalOverrideCheckbox"
       data-bind="checked: request.isGlobalOverride, disable: summaryHasInvalidDays()"
/>

I have a subscribe binding based on this:

self.request.isGlobalOverride.subscribe(self.updateMaxAllowableDateInFuture);

and the code for subscribable is:

this.updateMaxAllowableDateInFuture = (function (isGlobalOverrideSet) {
     if (isGlobalOverrideSet) {
          _maxAllowableDateInFuture = _dateTenYearsFromNow;
          //this.startDateOptions.maxDate = _maxAllowableDateInFuture;
          self.destroyDatePicker();
     }
     return _maxAllowableDateInFuture;
});

Two steps: First, change maxDate to be an observable, and include maxDate in your binding directly (this may require modifying the sfDatePicker binder). Second, update the sfDatePicker binding so that it changes the setting on your datepicker when the maxDate observable changes. If you want more details, please provide the code for the sfDatePicker binder. — CodeThug, Jun 07 '14 at 05:04
@CodeThug post that as an answer so this question can make it out of "unanswered". Also, in the original post, the datepicker has 2 id attributes - that should never be. Ideally, people would just refrain from using id attributes altogether, especially when dealing with knockout as you never have to operate with the DOM. — Milimetric, Aug 28 '14 at 11:14

score 0 · Answer 1 · answered Aug 28 '14 at 20:22

Two steps:

Change maxDate to be an observable, and include maxDate in your binding directly (this may require modifying the sfDatePicker binder).
Update the sfDatePicker binding so that it changes the setting on your datepicker when the maxDate observable changes.

If you want more details, please provide the code for the sfDatePicker binder

Binding a datepicker max date in future based on checkbox in Knockout.js

1 Answers1