I have integrated a datepicker from angular-ui/bootstrap. However, I am facing an issue where the user can freely type in the input field instead of selecting a date.
Here is a snippet of my code:
session.js
session.getDateFormat = function() {
return 'yyyy-MM-dd';
};
session.formatDate = function(date) {
return $filter('date')(date, session.getDateFormat());
};
Controller.js
vm.dateFormat = session.getDateFormat();
function submit() {
date : session.formatDate(vm.data.date)
}
The code related to date handling is more extensive, but this is the gist of it. Also, below is the HTML snippet:
<input type="text" class="form-control" uib-datepicker-popup="{{vm.dateFormat}}" placeholder="{{vm.dateFormat}}" ng-model="vm.data.date" is-open="vm.dateOpened" ng-required="true" ng-disabled="disabled" />
Admins have the option to choose date formats like yyyy-mm-dd or dd-mm-yyyy.
My requirements are:
- Verify that the user inputs a date in the correct format before submission, clearing the field automatically and displaying an error message with the correct format as a hint.
- Restrict users from entering non-numeric characters.
- Avoid using hardcoded HTML regex and instead check if the input matches the selected format.
- Exclude the use of JQuery in the project.
- If you are aware of any other datepicker compatible with Angular and Bootstrap without JQuery, please suggest it.