I have the following HTML below in my app.
<p class="input-group">
<input ng-model="myDate" datepicker-popup="MM/dd/yyyy"
is-open="isopen" />
<span style="cursor:pointer" ng-click="opendate($event)" class="input-group-addon input-sm"><i class="glyphicon glyphicon-calendar"></i></span>
</p>
I would like to have the ngModel populated when the user enters the date in the format 4.3.2015 or 4.3.15 , but currently i am getting ngModel as undefined.
How can i tell the datepicker to accept other date formats as well?
Please check this plunkr http://plnkr.co/edit/t1f9AkHeKzvyPTQNzvxf?p=preview, This works in Chrome but not in IE . You can type 4.4.15 in chrome and it works, the same does not work in IE
If I understand correctly, you want to allow the user to decide how they enter their date format?
As far as I know, the date format needs to be defined beforehand and cannot be "detected" as the user fills it in. But, you could create an array with accepted date formats in your controller:
// Accepted date formats.
$scope.formats = ['MM/dd/yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
// Default date format.
$scope.format = $scope.formats[0];
Change the datepicker-popup attribute to datepicker-popup="{{format}}" in your HTML input field.
The user could have a dropdown (HTML select) menu in the view where they can select their preferred date format, which will change the value of $scope.format. The datepicker will change accordingly.
I have used the alt-input-formats on the DateParser to provide alternate formats
alt-input-formats (Default: []) - A list of alternate formats acceptable for manual entry.
Related
I am using the Angular Moment Picker library and trying to set a custom date in the input field whilst also trying to prevent the user from selecting a date in the past.
My element looks like so:
<input class="form-control"
moment-picker="endTimePicker"
name="campaignEndDate"
locale="en"
format="MMMM Do YYYY, h:mm A"
today="true"
start-view="month"
min-date="minDate"
ng-model="endTime"
ng-model-options="{ updateOn: 'blur' }"
ng-required="!campaign.NeverEnds"
style="width: 60%;"/>
And my controller:
$scope.minDate = moment();
$scope.endTime = moment( $scope.campaign.EndTime );
When I open the form, the Angular Moment Picker shows today's date/time in the input field, even though $scope.endTime is showing a date in the past.
The only way I can seem to get the correct date showing in the input field is to set validate="false" on the element, but then the control doesn't pass validation because the date is a date in the past.
What I am trying to achieve is to show an initial date (2020-07-29 02:14:00) when the user opens the form, but if they try and change the endTime, then cannot select a new date in the past.
Is this achievable somehow?
Okay, after playing around with this some more, and going back over the documentation, I found the best approach to achieve what I wanted was to implement a selectable method:
angular-moment-picker#methods
I removed the min-date="minDate" which allowed the Moment Picker to then show the correct date in the input field and then added a selectable="isSelectable( date )" to the element to filter out and disable any previous days:
$scope.isSelectable = function( date ) {
// Disable all previous days
return date >= moment();
};
Is there a possibility to also use $parser and $formatter for an input field and not only for a directive?
This is my input field (AngularJs DateTimePicker)
<input type="text"
class="form-control date"
name="date"
data-ng-model="vmModal.account.creationDate"
datepicker-popup="dd.MM.yyyy"
is-open="vmModal.openedDatePicker"
close-text="schließen"
current-text="heute"
clear-text="löschen"
datepicker-options="{startingDay: 1}"
placeholder="Datum">
[EDIT]
Actually I don't know what to do, I need the string representation of the date because I show it elsewhere in the application. The only possibility I know would be to have another field in my javascript object which represents a date object.
I may have miss-understood your problem, but from your EDIT, it seems that you need to display or use the date selected through the input in some other place. This is standard stuff to have one model and several views. In your case, you can just display vmModal.account.creationDate with a different format as the one used in the datepicker, using the angular date filter.
E.g. when you select the following date in the datepicker: 25.12.2016
<em>{{vmModal.account.creationDate | date:'EEEE, dd MMMM yyyyy' }}</em>
shall display
Sonntag, 25 Dezember 2016
See the plunker in action.
Note that you can specify alternate date formats for manual entry. In the plunker I added alt-input-formats="['dd/MM/yy']". The user can now enter 25.12.2016 or 25/12/16, both formatted dates will be parsed as date objects.
I'm using the angular-moment-picker component for handling dates in my application and I'm working on introducing i18n support. I have the datepicker rendering correctly with arabic labels, however the submitted date string is also in arabic text. Is it possible to have the labels remain in the locale specified, but have the underlying model value remain in English format (to submit in, for example, YYYY-MM-DD format)?
The component has a change event, which I can use to listen to the date changing and reformat the date using the following code, however obviously the underlying model still contains Arabic text.
vm.onChange = function(newValue) {
var englishDate = moment(newValue, 'LL', 'ar').locale('en');
var date = englishDate.format('YYYY-MM-DD HH:mm');
// date correctly contains the english format date however it is not on the model variable
}
Thank you!
You can use different objects for the moment-picker and ng-model, where the one for moment-picker will be formatted and the ng-model will be a moment.js object.
<div id="fromDatePicker" class="input-group" moment-picker="vm.fromDateFormatted" format="L" ng-model="vm.fromDate">
<input class="form-control" ng-model="vm.fromDateFormatted" ng-model-options="{ updateOn: 'blur' }" placeholder="From date...">
<span class=" input-group-addon "><i class="icon icon-calendar "></i></span>
</div>
Use vm.fromDateFormatted for display and vm.fromDate in code like the change event
Formatted date: {{ vm.fromDateFormatted}}
Please see the answer in this issue for more information: https://github.com/indrimuska/angular-moment-picker/issues/92
I use datetime picker in this way:
<datetimepicker
hour-step="vm.hourStep"
minute-step="vm.minuteStep"
ng-model="vm.time"
show-meridian="vm.showMeridian"
show-date="false"
show-spinners="true"
readonly-time="false"></datetimepicker>
and it shows the input like this way:
Is it possible to don't show the first input (date) with directive attribute (or css if no attribute is available) - I only need the time adjustment.
Thanks a lot!
There is a Timepicker (ui.bootstrap.timepicker) available from here. Use it like this:
<uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>
I have found an issue with validation of a manually typed date value that falls outside of the minDate or maxDate values when using the datepicker-popup.
This can be demonstrated with the datepicker popup on the angular ui site by following the steps below: http://angular-ui.github.io/bootstrap/#/datepicker
Ensure the min date option is turned on (min date should equal today)
Type in yesterdays date to the datepicker-popup
This shows a red border around the inline datepicker (as it is flagged as ng-invalid-date) however the input box for the datepicker-popup is still valid.
On further investigation it seems that the ng-invalid-date attribute has been set against the popup part of datepicker and not against the input box. This causes issues because firstly, the user cannot see that the element is invalid and secondly the popup does not have a name property so I am unable to check validity from the ng-form (e.g. myForm.myDate.$invalid
Does anyone know any way around this?
You can do an additional validation on ng-change for the text field and setValidity of that field to false to achieve what you want. Here is a plunker that demonstrates the idea.
http://plnkr.co/edit/N9Hk9QFIfj3IXfHoWwbt?p=preview
I added a little css styling to get the red border to show when the field is invalid. The validity test is very basic; you'd want to enhance it to allow the current day.
If you have the input set up like this, <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" is-open="open" datepicker-options="datePickerDateOptions" close-text="Close" ng-change="change()" />
then in your controller you can check what $scope.date is in your $scope.change() function. If $scope.date is undefined then its not valid. If its null then its empty. Anything else is a valid date.