Feature: add custom validation callback

[t-evans]

The component has a selectable method where I can specify which dates should be grayed out when using the mouse. However, users can still manually input a bad date. So I tried doing this:

<div class="icon-input-wrapper"
     moment-picker="ctrl.start_date"
     format="M/DD/YY"
     start-view="month"
     selectable="ctrl.startDateIsSelectable(date, type)"
     change="ctrl.onStartDateChanged(newValue, oldValue)">
        {{adminObject.object.start_date | date:'MM/dd/yy'}}
</div>

in order to avoid manually-input bad dates. However, it seems to ignore the change attribute if there is no <input> tag.

So I tried adding some validation inside my change callback such that it could check that the new value is valid and change the date back if it is not valid (in my case "valid" = "the same weekday as the previously-selected date"). However, if I programmatically change a bad date back to the previous value, that triggers another change callback, which fails validation again (since that changes the weekday again), so it gets stuck in an infinite loop.

Is there a way that I can have date restrictions/validation AND have the change attribute work? Or is there a way to get the change attribute to work when not using an input field? Or is there some sort of "validate" callback, that documentation is missing, such that it will validate manually-input values before changing the model so that changing it back doesn't trigger another validate?

The ideal solution would be one that allows me to keep an <input> field, but prevents bad dates from being typed in.

[indrimuska]

Hi @t-evans,

The component has a selectable method where I can specify which dates should be grayed out when using the mouse. However, users can still manually input a bad date.

This is not correct, selectable is an helpful method to avoid to select custom set of dates. In this sample you can check how to use it in order to disable all Sundays.

[t-evans]

Thanks for the quick response!

In that plunkr, I'm able to manually enter "2017-05-21" into the text field, even though that is a Sunday:

I can't select that date with the mouse, but I can manually enter it... Maybe there's something else I'm missing(?)

[indrimuska]

OH right! This needs a new feature, there's no way at the moment to avoid this, except setting the input as a readonly field or using a non-editable tag (e.g. <div>).

[t-evans]

Thanks. Nice work on the component!

[ssimo3lsuhsc]

For that matter, we need custom validation rules if we need to validate Moment pickers relative to other Moment pickers on the same form. For example, specifying that two Moments should have the same year, month, and day.