I have following text input filled by model value in timestamp:
<md-datepicker ng-model="ln.dateofbirth" md-current-view="year" md-date-filter="ctrl.dateOfBirth" md-max-date="maxDate" md-placeholder="Date Of Birth" required></md-datepicker>
You need to setup minDate and maxDate on init method.
controller
var minDate = new Date(Date.now());
var maxDate = new Date(Date.now());
var startDate = maxDate;
// setting the min date and thus the max birth date allowing < 100 year old choosable birthdate
this.minDate.setDate( this.minDate.getDate() );
this.minDate.setFullYear( this.minDate.getFullYear() - 100 );
// setting the calendar's start date and youngest birth dates for > 18 years old
this.maxDate.setDate( this.maxDate.getDate() );
this.maxDate.setFullYear( this.maxDate.getFullYear() - 18 );
this.startDate = this.maxDate;
View
<md-datepicker ng-model="ln.dateofbirth" md-current-view="year" md-date-filter="ctrl.dateOfBirth" md-min-date="minDate" md-max-date="maxDate" md-placeholder="Date Of Birth" required></md-datepicker>
Check mdDatepicker API Documentation for more detail.
Related
I want to convert below date and time to UTC format
"1970-05-11T18:30:00.000+0000"
I am able to do this inside view, but i want to do it in the controller.
{{stmt.tranDate | date:"dd/MM/yyyy": 'UTC'}}
controller
$scope.kycinfo.dob = "1970-05-11T18:30:00.000+0000";
$scope.dob = $filter('date')($scope.kycinfo.dob, "dd/MM/yyyy");
view
<input type="text" id="dateOfBirth" placeholder="Please Select ..." data-ng-model="dob" name="dob" ng-required="true" mobi-date=true />
Pass "UTC" as third parameter to $filter('date).
$scope.kycinfo.dob = "1970-05-11T18:30:00.000+0000";
$scope.dob = $filter('date')($scope.kycinfo.dob, "dd/MM/yyyy", "UTC");
https://docs.angularjs.org/api/ng/filter/date
i think you can try the following code:
var toUTCDate = function(date){
var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
return _utc;
};
you can also visit Using AngularJS date filter with UTC date
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"
I am using the angular bootstrap datepicker in my form.
I am trying to achieve the following in this datepicker:
The minimum date that a user can pick is the next business day
The default date should be the next business day
In the date field only display Monday, December 22, 2014
Restrict users from selecting a non-business day
A business day would be M-F
Those who are familiar with configuring this widget, kindly advice.
Plnkr:
http://plnkr.co/edit/jKdD6W4vwrh9IkEgq5TR
Options:
//Set default date to be the next business day
$scope.forDate = moment().add(1, 'days');
//minDate should also start from next business day
$scope.minDate = $scope.minDate ? null : new moment()
//What should be entered here ?
$scope.disable = function(){
}
you can set starting day as monday using
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
and you can disable week days like
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" name='theDate' ng-required="true" />
look at date-disabled="disabled(date, mode)
here is the plunker
If you wish to disable weekends only then you could do it like this:
$('yourSelector').datepicker({
beforeShowDay: $.datepicker.noWeekends // disable weekends
});
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 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" />