0

this may be a simple question, but I have looked and cannot find my answer...

I have an input box with an Angular-UI Bootstrap datepicker:

<input type="text" class="form-control" 
    id="id" name="id"
    uib-datepicker-popup="MMddyyyy" ng-model="date" 
    is-open="isDatePickerOpen" 
    close-text="Close" />
<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="openFrom($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>

This works fine for selecting dates. I can also enter free-form text, but it only binds properly when I enter a date in the format specified. If I enter something else like 'abcd', it binds to undefined. I suspect the datepicker itself is putting restrictions on what is allowed in the input box, but not sure how to remove those restrictions. I am open to using any datepicker that is supported by most browsers.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
user972276
  • 2,973
  • 9
  • 33
  • 46
  • 1
    What does `ng-model-options="{ allowInvalid: true }"` return with invalid dates? – georgeawg Sep 25 '19 at 19:45
  • @georgeawg adding that to my input tag still results in undefined for 'abcd' – user972276 Sep 25 '19 at 19:59
  • 2
    In my experience it is not worth the effort to fight these libraries. The HTML5 date picker has a stricter format and makes it difficult to enter invalid dates. When the date is invalid it returns `""`, `null`, and `NaN` for `value`, `valueAsDate`, and `valueAsNumber` respectively. It never returns the actual invalid text. With the `uib-datepicker`, you could write a directive that returns the actual text because under-the-hood it uses ``. – georgeawg Sep 25 '19 at 21:37
  • When using online tools, I can get it to work exactly how I want using `ng-model-options="{ allowInvalid: true }"`, but I copied and pasted that code directly into my code and it no longer works. Wonder if its a version issue or something else is overriding it. I will probably just have to accept this limitation and find another solution. I initially thought this would be fairly easy as you mention it is a text input box and not a date. Thanks for your help. – user972276 Sep 26 '19 at 14:56

0 Answers0