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" />
Related
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.
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 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 use angular strap datePicker
<input type="text" name="dateFrom" ng-model="dateFrom" bs-datepicker
data-end-date="{{endDate}}" data-start-date="{{startDate}}" />
How ever when change endDate or startDate from code it does update in the DOM but the date picker remains unaware of this change, is there some kind of update I need to trigger?
The change is done via a ng-click with function on the same scope, that then sets a new value for endDate and startDate.
Like so (CoffeeScript):
$scope.setDateRange = (dateRange) ->
if dateRange is "past"
$scope.endDate = "-1d"
$scope.startDate = ""
if dateRange is "now"
$scope.endDate = ""
$scope.startDate = ""
if dateRange is "future"
$scope.endDate = ""
$scope.startDate = "+1d"
Edit:
Here is the solution:
On the controller constructor I store the date from and to controls:
dateFromCtrl = $element.find 'input[name="dateFrom"]'
dateToCtrl = $element.find 'input[name="dateTo"]'
Then when setDateRangeis called I made few helper methods to call the datepicker setEndDate and setStartDate methods:
setEndDate = (date) ->
dateFromCtrl.datepicker 'setEndDate', date
dateToCtrl.datepicker 'setEndDate', date
setStartDate = (date) ->
dateFromCtrl.datepicker 'setStartDate', date
dateToCtrl.datepicker 'setStartDate', date
setDateRange = (dateRange) ->
if dateRange is "past"
setEndDate "-1d"
setStartDate ""
if dateRange is "now"
setEndDate ""
setStartDate ""
if dateRange is "future"
setEndDate ""
setStartDate "+1d"
Try using the setStartDate() and setEndDate() calls:
http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html#setstartdate
Or you might look at the datepicker that is now provided by the Angular folks, so it has especially nice integration within Angular: http://angular-ui.github.io/bootstrap/