I am working on a feature that requires me to inactivate an entity for a given period. So, I show two date pickers : 1) Starting date and 2) Ending date.
The two dates are interdependent in a manner where the starting date limits the min date for ending date and the ending date limits the max date for starting date.
<input type="text" ui-date="inactive.datePicker" ui-date-format="mm/dd/yy" ng-model="inactive.details.fromDate" id="fromDate" ng-change="error.dueDate=false" value="inactive.details.fromDate}}"/>
<img ng-click="showFromDatePicker($event)" class="ui-datepicker-trigger" src="../design/calendar3.gif" >
<input type="text" ui-date="inactive.datePicker" ui-date-ormat="mm/dd/yy" ng-model="inactive.details.toDate" id="toDate" ng-change="error.dueDate=false" value="{{inactive.details.toDate}}"/>
<img ng-click="showToDatePicker($event)" class="ui-datepicker-trigger" src="../design/calendar3.gif" >
$scope.showFromDatePicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.inactive.fromDatepicker = {
max : $scope.inactive.details.toDate;
}
angular.element("#fromDate").focus();
};
$scope.showToDatePicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.inactive.toDatepicker = {
max : $scope.inactive.details.fromDate;
}
angular.element("#toDate").focus();
};
But right now this piece of snippet isn't exactly working properly. The min date is setting properly but let's kind of disabling the datepicker so I couldn't select a date. Also how do I reinitialize or refresh the datepicker in AngularJS like we could do in Jquery by
$("#myDatepicker").datepicker("refresh");
In angular-ui-bootstrap 0.14.3 I managed to achieve this just by binding min and max to the other model. I use a wrapper directive around datepicker but it shouldn't make any difference:
Begin datepicker: max-date="myobject.endDate"
End datepicker: min-date="myobject.beginDate" max-date="today"
Related
I am using 0.14.3 angular-bootstrap version. I have issues with min and max validation for uib-datepicker-popup. min-date and max-date are working as expected, dates are disabled on popup view. However if I enter manually dates inside input text validation is not there...I added even min and max attributes but nothing again. When check in form.$error and there is not validation error.
<input id="projEndDate" class="form-control date-picker"
uib-datepicker-popup="{{planningvm.format}}"
show-button-bar="false"
ng-model="reviewvm.review.projectedEndDt"
data-ng-click="planningvm.openDatePicker('projEndDate')"
placeholder="mm/dd/yyyy" name="projEndDate" show-weeks="false"
required is-open="planningvm.projEndDate.opened"
min="reviewvm.review.projectedStartDt"
min-date="reviewvm.review.projectedStartDt" />
<span data-ng-class="{'not-allowed input-group-addon' : !reviewvm.userReviewAssoc || !reviewvm.editMode, 'input-group-addon' : reviewvm.userReviewAssoc}"
data-ng-click="planningvm.openDatePicker('projEndDate')">
<div class="icon-calendar" id="icon-daterange-end" >
</div>
</span>
Is there some way that i can maybe check for date validation when user type manually in input and set that ng-model to min or max corresponding?
This appears to be a known issue when using the uib-datepicker-popup with input min and max validations: Datepicker input not validated for min and max when manually inserting date #4664 that they do not intend on fixing. I developed a workaround that performs the validations when the input value changes like so:
// watch date value
scope.$watch((scope) => {
//return object to watch.
return this.date;
}, (newValue: Date, oldValue: Date) => {
this.onValueChange();
});
private onValueChange() {
if (angular.isDefined(this.date) && this.date && !this.myForm.date.$error.date) {
this.myForm.date.$setValidity("min", moment(this.date).isSameOrAfter(this.minDate));
this.myForm.date.$setValidity("max", moment(this.date).isSameOrBefore(this.maxDate));
} else {
this.myForm.date.$setValidity("min", true);
this.myForm.date.$setValidity("max", true);
}
}
This should be simple and I believed all my code is correct, but I suppose it is not.
I have two Datepickers. Datepicker 2 should be setting it's minDate to the value of datepicker 1. This works, as I can see the min-date attr updating when I select a date on Datepicker 1, but Datepicker 2 does not re-render the disabled dates. I feel like I should be refreshing the Datepicker somehow, but unsure how.
// Datepicker Controller
app.controller('datepickerController', ['$scope', function($scope) {
// open depart date
$scope.openDepartDatepicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
// open depart datepicker
$scope.departDatepickerOpen = true;
}
// open return date
$scope.openReturnDatepicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
// open return datepicker
$scope.returnDatepickerOpen = true;
}
$scope.$watch('search.searchparams.journeys[0].departuredate',function(value){
$scope.returnMinDate = value;
});
// minDate set intiitally
$scope.departMinDate = new Date();
$scope.returnMinDate = new Date();
// date options
$scope.departDateOptions = {};
$scope.returnDateOptions = {};
// date format
$scope.dateFormat = 'EEE dd/MM/yyyy';
}]);
And here is the actual input
<input id="returnDate" placeholder="Returning" type="text" class="form-control" data-ng-model="search.searchparams.journeys[1].departuredate" datepicker-popup="{{dateFormat}}" data-ng-focus="openReturnDatepicker($event)" show-button-bar="false" min-date="{{returnMinDate}}" is-open="returnDatepickerOpen" datepicker-options="returnDateOptions" readonly=""/>
Nothing I have tried has made a difference. The new minDate is updating, but just not being applied to the Datepicker. I can actually see the updated min-date attribute in my inspector, so all values are updating as expected.
Any help appreciated
The issue is so simple and so silly.
min-date="{{returnMinDate}}"
needs to be
min-date="returnMinDate"
It smacked me right in the face this morning.
I am a novice in Angular and need help regarding the Custom Directive.
I have a date picker Directive where the user selects Date, Month and Year from a Drop Down which is then displayed in a textbox in the format : YYYY-MM-DD
$scope.$watch('model', function ( newDate ) {
$scope.dateFields.day = new Date(newDate).getUTCDate();
$scope.dateFields.month = new Date(newDate).getUTCMonth();
$scope.dateFields.year = new Date(newDate).getUTCFullYear();
});
The Drop Down is displayed using :
<select required name="dateFields.month" data-ng-model="dateFields.month" p ng-options="month.value as month.name for month in months" value="{{dateField.month}}" ng-change="checkDate()" ng-disabled="disableFields"></select>
<select required ng-if="!yearText" name="dateFields.year" data-ng-model="dateFields.year" ng-options="year for year in years" ng-change="checkDate()" ng-disabled="disableFields"></select>
When all above Dropdowns are selected, the Input Textbox shows only the Year whic I want to show the complete date in the Format : YYYY-MM-DD
The Code for that is :
<input required ng-if="yearText" type="text" name="dateFields.year" data-ng-model="dateFields.year" placeholder="Year" class="form-control" ng-disabled="disableFields">
In the above code there is data-ng-model="dateFields.year". is there any method where I can customize this to show dateFields.year-dateFields.month-dateFields.date
The simplest solution is to use dedicated model for complete date. I can see that you are using ngChange directive. In this case you could set proper model value in this function:
$scope.checkDate = function() {
// checking date ...
// all is fine set full date model
$scope.dateFields.fullDate = $scope.dateFields.year + '-' + $scope.dateFields.month + '-' + $scope.dateFields.day;
}
and use in in HTML:
<input data-ng-model="dateFields.fullDate" required ng-if="yearText" type="text" name="dateFields.year" placeholder="Year" class="form-control" ng-disabled="disableFields">
I think it should work in your case.
Demo: http://plnkr.co/edit/SKCbABDifkbnIT2FTV6X?p=preview
I am trying to create an AngularJS datepicker on the push of a button. I am using this bootstrap-ui control. The control works (pops up on the click of a button, and I can select a date), but I can't seem to set the initial date back from the scope (so that when it is first opened, the designated date is already selected).
The error I get in the Chrome console is:
Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.
jade:
button(type="button" ng-model="date.from" btn-radio="'From'" ng-click="date.openFromPopup($event);" show-weeks="false" show-button-bar="false" datepicker-popup = "date.format" is-open = "date.fromOpened" min = "date.minDate" max = "date.today") From
Since I have a watch on $scope.date.from, I can confirm that the selected date is correct, but I can never set it from the controller. Any ideas?
AngularJS controller:
$scope.date = {};
$scope.date.format = "yyyy/MM/dd";
$scope.date.opened = false;
$scope.date.from = new Date();
$scope.date.today = new Date();
$scope.date.minDate = null;
$scope.date.fromOpened = false;
$scope.$watch('date.from', function(v) {
if(v){
alert(v);
}
});
In the example on the angular-ui page, it says to use it like this...
$scope.from = function() {
$scope.dt = new Date();
};
$scope.from();
Does that work?
I have two datepicker textbox From date and To Date... I need default in From date this month start date and To date today's day...
How to set default dates in Angularjs Datepicker textbox..?
I am not sure what you mean by a datepicker textbox.
Are you using a date input?
<input name="dateInput" type="date" ng-model="date"/>
If so in the controller you need to set the ng-model variable, in this case, $scope.date to the default date you want to use
e.g. to use today's date
var d=new Date();
var year=d.getFullYear();
var month=d.getMonth()+1;
if (month<10){
month="0" + month;
};
var day=d.getDate();
$scope.date=year + "-" + month + "-" + day;
I have set up a plunkr at http://plnkr.co/edit/WJ86aB?p=preview
If so in the controller you need to set the ng-model variable, in this case, $scope.date to the default date you want to use
e.g. to use today's date
$scope.date = new Date();
In your html:
<input name="dateInput" type="date" ng-model="date"/>
$scope.date = new Date().toLocaleDateString()
<input datepicker data-ng-model="date" type="date" />