I use Angular JS Calendar.
There is input field with current date:
<input
type="text"
class="form-control"
readonly
datepicker-popup="dd MMMM yyyy"
ng-model="event.startsAt"
is-open="event.startOpen"
close-text="Close" >
By default it look as full date with day of week, time and day.
How I can set short date in this input field like as:
05 October 22:30
if it is based on angualr-ui bootstrap then changing the date format to ' MMMM dd HH:mm' should work like this .
<input
type="text"
class="form-control"
readonly
datepicker-popup="MMMM dd HH:mm"
ng-model="event.startsAt"
is-open="event.startOpen"
close-text="Close" >
Let me know if this works for you.
I made a sample plunker to address your problem using angular bootstrap .
Related
I am using simple angularjs input type = date for displaying date picker.
How to disable the previous dates means dates before the current dates.
html is like
<input class="form-control" type="date" name="sevadate" ng-model="sevadate" min-date="" placeholder="yyyy-MM-dd" ng-required="true" /> //What do i write in min-date..
change min-date="" to min="2017-12-30"
or you can do something like this min="{{minDate | date:'yyyy-MM-dd'}} " and on the controller
$scope.minDate = new Date();
<input class="form-control" type="date" name="sevadate" ng-model="sevadate" min="2017-04-12" placeholder="yyyy-MM-dd" ng-required="true" /> //What do i write in min-date..
This is not a duplicate of this
I have a form which has start date and end date with date pickers. The user can add more than one date in the form. In this case the first from date and to date select boxes will be cloned and appended to the form.
I need to check the validity of the dates in each from date and to date pair. That is if to date is smaller than from date error message should be displayed near the to date. I have added the code below. Thanks.
<form name="myForm">
<span ng-repeat="data in userdata">
<ng-form name="repeatForm">
<input type="text" name="expFromDate" ng-model="form.fromDate"/>
<input type="text" name="expToDate" ng-model="form.toDate"/>
<span class="error input-icon fui-alert input-icon-check" ng-show="repeatForm.expToDate.$error.expFromDate"></span>
</ng-form>
</form>
Rather than cloning the date boxes with jQuery or so, you should use an ng-repeat like:
<input ng-repeat="fromDate in ctrl.fromDates" type="text" name="expFromDate" ng-model="fromDate"/>
<input ng-repeat="toDate in ctrl.toDates" type="text" name="expFromDate" ng-model="toDate"/>
Then you can have a method on your controller to do the validation:
<span class="error input-icon fui-alert input-icon-check" ng-show="!ctrl.datesValid()"></span>
public datesValid(): boolean {
return _.all(this.fromDates, date => ...)
&& _.all(this.toDates, date => ...);
};
I am using this library. I am having trouble converting the date format. When I pick a new date it should display date in dd/mm/yyyy
<input type="text" ui-date-format="dd/mm/yy" .../>
EDIT:
If you want the date on the input to appear in dd/mm/yy format as well, you need to init dateOptions with the format:
$scope.dateOptions = {
dateFormat: 'dd/mm/yy',
}
And HTML:
<input type="text" ui-date-format="dd/mm/yy" ng-model="ngModel" ui-date="dateOptions"/>
updated fiddle
I am using 720kb.datepicker for picking the date.
What I'm trying to do is:
1.- On the UI I want to have a date in angular's 'large' format
2.- In the mode I need to have it in 'yyyyMMdd' format
this is the code I have:
<section ng-controller="InboundCTRL as vm">
<datepicker date-set="2015/08/15" date-set-hidden="false" date-format="yyyyMMdd">
<input ng-model="date" type="text"/>
</datepicker>
</section>
Anyway, how do I assign this 'date' to vm's property??
Thank you!
I have a date input like this:
<input type="date" name="input" ng-model="date" placeholder="yyyy-MM-dd" class="form-control"/>
Now I want show calendar when click the input. How to controller the date calendar?
<input type="date"> is implemented on the level of the browser. I use Chrome and I do see datetime field.