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..
Related
ng-invalid after selecting date from datepicker, but becomes valid if typed. Please help.
I worked around this by hiding the datepicker and showing an empty input text field when the value is null and then swapping/showing the datepicker when it is clicked.
<input
ng-if="my_date || set_my_date"
type="text"
id="my_date"
name="my_date"
datetime-picker="MM/dd/yyyy h:mma"
is-open="my_date"
ng-focus="set_my_date = true"
class="form-control"
ng-model="my_date"
placeholder="my date"
ng-readonly="true"
ng-required="true"
/>
<input
ng-if="!my_date && !set_my_date"
class="form-control"
placeholder="my date"
ng-click="set_my_date = true"
/>
ng-invalid class is added from angular when a required field is invalid (e.g empty), make sure the ng-model relative field , formvalue.workshopeDate, is correctly populated when you trigger the click.
How can I allow user to type date in input form in different formats? I see option alt-input-formats. I've tried to pass alternate formats with no result.
Controller:
vm.altInputFormats = ['M!/d!/yyyy'];
Markup:
<div class="calendar">
<label>END DATE</label>
<input type="text"
ng-click="vm.toggleCalendar('endDate')"
class="calendar-control"
uib-datepicker-popup="{{'MM/dd/yy'}}"
ng-model="vm.dateFilter.endDate"
is-open="vm.endDateOpened"
datepicker-options="vm.datePickerOptions"
min-date="vm.dateFilter.startDate"
max-date="vm.currentDate"
show-button-bar="false"
alt-input-formats="vm.altInputFormats"
close-text="Close" />
<i ng-click="vm.toggleCalendar('endDate')" class="glyphicon glyphicon-calendar calendar-btn"></i>
</div>
Now i'm able only to type date in such format: 01/01/16, but for 01/01/2016 I got undefined in model.
What's wrong with my code?
The altInputFormats should be provided not as attribute but as the part of the datepicker-options config object. In your case:
<input type="text"
ng-click="vm.toggleCalendar('endDate')"
class="calendar-control"
uib-datepicker-popup="{{'MM/dd/yy'}}"
ng-model="vm.dateFilter.endDate"
is-open="vm.endDateOpened"
datepicker-options="vm.datePickerOptions"
min-date="vm.dateFilter.startDate"
max-date="vm.currentDate"
show-button-bar="false"
close-text="Close" />
and then in controller
vm.datePickerOptions = {
altInputFormats: ['M!/d!/yyyy'],
// rest of options ...
}
alt-input-formats is defined as an attribute in directive uibDatepickerPopup so it can not take vm.altInputFormats as an array. One way to get around this is to insert the array directly into alt-input-formats
<input type="text"
ng-click="vm.toggleCalendar('endDate')"
class="calendar-control"
uib-datepicker-popup="{{'MM/dd/yy'}}"
ng-model="vm.dateFilter.endDate"
is-open="vm.endDateOpened"
datepicker-options="vm.datePickerOptions"
min-date="vm.dateFilter.startDate"
max-date="vm.currentDate"
show-button-bar="false"
alt-input-formats="['M!/d!/yyyy', 'yyyy-M!-d!']"
close-text="Close" />
try to change this line.
alt-input-formats="vm.altInputFormats[0]"
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 .
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.
I have an ng-repeat with each row having multiple UI-Bootstrap Datepickers. I am trying to call a function in my controller when the date is selected and the picker closes. I have tried using UI-Event to capture the blur event but the model hasn't been updated when this gets called. My question is how can I get the selected date when the picker closes? Can I do something like ui-event="{ blur : 'myBlurFunction( $event, this.text)' }, or is there another way to get the data with an onClose event?
<li ng-repeat="....">
<div ng-click="openEditStartCal($event, ticket)">
<input ui-event="{ blur : 'blurredStartDate( $event, ticket, this.text)' }"
type="text"
starting-day="2"
show-button-bar="false"
show-weeks="false"
class="form-control addTicketDateInput"
datepicker-popup="dd MMM"
ng-model="ticket.StartDate"
is-open="startEditTicketOpened && currentTicketUpdating == ticket.TicketId"
min-date="{{today()}}"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true" close-text="Close" />
</div>
I have solved this by using: ng-change="myChangeFunction()".
This is possible using ng-change :
html/jsp file
<input type="text"
id="StartDate"
name="StartDate"
class="form-control input-sm"
uib-datepicker-popup="{{format}}"
ng-model="StartDateVal"
is-open="status.opened"
min-date="min"
max-date="max"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
readonly="true"
ng-change="select(StartDateVal)" />
.js Controller
$scope.select = function(date) {
// here you will get updated date
};
You can put a $watch in your controller for your date variable.
$scope.$watch('ticket.StartDate',function(){
var date = $scope.ticket.StartDate;
});
I was dealing with this as well and onChange won't do the job for me, so I went to ui bootstrap .js and added some things. Then I can set a function to be called in HTML via on-close attribute.
<input type="text" on-close="dateClosed()" ng-model="date" datepicker-popup="dd.MM.yyyy" is-open="dateOpened" ng-click="dateOpened=true" />
then you need to change the ui-bootstrap.js at
.directive('datepickerPopup' ... function(...) ... return { ...
scope: { ... , onClose: '&' }
there are 3 options how to close the picker - date selection, click elsewhere or done button. you can find it easily, its the only place where isOpen is set to false
scope.isOpen = false;
Then i just call a function at those 3 places, where i call the function from the attribute
scope.onClosing = function () {
if (angular.isDefined(attrs.onClose))
scope.onClose();
}
If you want the ui-bootstrap.js PM me, I did it in the tpls version only tho.