I have an issue regarding format when I use Angular bootstrap datepicker. I want it to display the same value as when I typed. For example:
Currently when I enter "01/01/21" or "01/01/2021", the only result is displayed as 01/01/2021.
Here my source code:
function directive() {
return {
template: '<section class="app-input" ng-show="show">' +
'<div class="row">' +
'<div class="small-12 columns">' +
'<div class="label-wrapper " ng-show="label">' +
'<label >{{label}} <span class="hint">{{hint}}</span>' +
'<span class="pull-right" ng-show="isRequired()"> (*) </span>' +
'</label>' +
'</div>' +
'<div class="input-wrapper ">' +
'<p ng-mouseenter="hideTooltip()" class="input-group">' +
'<input ng-blur="checkDate()" type="text" class="form-control" uib-datepicker-popup="MM/dd/yyyy" ng-model="ngModel"' +
'is-open="popup2.opened" placeholder="mm/dd/yy" data-ng-change="onChange()" datepicker-options="dateOptions"' +
'ng-required="isRequired()" close-text="Close"/>' +
'<span class="input-group-btn">' +
'<button type="button" class="btn btn-default" ng-click="open2()">' +
'<i class="glyphicon glyphicon-calendar"></i>' +
'</button>' +
'</span>' +
'<a ng-show="showToolTip" style="color:red" uib-tooltip=" Warnning!"> The date your entered not correct ! </a>' +
'</p>' +
'</div>' +
'</div>' +
'</div>' +
'</section>',
restrict: 'EAC',
require: '?ngModel',
transclude: true,
replace: true,
link: postLink,
scope: {
label: "=",
ngModel: "=",
type: "=",
placeholder: "=",
hint: "=",
bottomhint: "=",
readonly: "=",
name: "=",
setDefault: "=",
changeEvent: "<",
disabled: "="
},
};
Thanks.
The uib-datepicker receives the format to process as date into the uib-datepicker-popup attribute.
In this case you could interpolate this with a variable as in
uib-datepicker-popup="{{vm.dateFormat}}"
Check the source of your component for the placeholder attribute that's also a fixed string. If you want to send the placeholder from the parent component to your directive it should reference a controller variable.
You can check format syntax below
Link reference: http://angular-ui.github.io/bootstrap/#!#datepicker