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>
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();
};
Are there any md-year pickers available? if yes, please share me some links. If no, then is it possible to turn a md-datepicker into a year picker?
I have tried with a normal one with giving modes, types of models etc but no useful output.
In the docs on <md-datepicker>, there is an option for a year picker by using the md-current-view attribute, setting it to either year or month:
<md-datepicker
md-current-view="year"
ng-model="myCustomYearDate"
md-placeholder="Enter Date">
</md-datepicker>
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 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.