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
});
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 have something like this
<input type="datetime"
data-ng-model="vm.dtPicker"
data-ng-init="(#Model.Expiration.HasValue ? vm.setDate(#Model.Expiration.Value.Year,#Model.Expiration.Value.Month,#Model.Expiration.Value.Day) : vm.setDate('','','')) "
class="form-control form-control-md date-align"
uib-datepicker-popup="MM/dd/yyyy"
is-open="vm.popup1.opened"
popup-placement="bottom-right"
ng-required="true"
name="Expiration"
datepicker-options="vm.dateOptions"
close-text="Close"
show-button-bar="true"
close-on-date-selection="true" readonly />
Here is the angular function
function setDate(year, month, day) {
vm.dtPicker = new Date(year, month - 1, day);
};
I need to call the setDate function based on the condition if the Expiration has value or not.
But the problem is #Model.Expiration.HasValue returns true or false but the corresponding SetDate() doesn't calls.
Suppose if the Expiration has no value it still calls the vm.setDate(#Model.Expiration.Value.Year,#Model.Expiration.Value.Month,#Model.Expiration.Value.Day)) and I get the NullException error.
If I have the Expiration Date from Model then I should fill the textbox else I must show as null.
What am I doing wrong here?
I'm using this angularJS datepicker in my application and would like to know if there is a way to display only months and years in the calendar and remove the days?
This is how I'm using the datepicker:
<datepicker date-format="MM yy" button-prev-title="previous month" button-next-title="next month" button-prev="<i class='fa fa-arrow-left'></i>" button-next="<i class='fa fa-arrow-right'></i>" id="dtDate" name="dtDate" >
<input ng-model="dtDate" />
</datepicker>
I tried to add date-format="MM yy" but it only changes the selected date and not the datepicker itself.
I think you might be interested in using this git repository that I created.
https://github.com/morfsys/multiple-month-picker
This is how you can use it in your project:
HTML
<input type="text" multiple-month-picker />
JS
//Initiate your app by injecting 'mmp-morfsys'
var app = angular.module('app-name', ['mmp-morfsys'])
It helps you to select multiple months across multiple years. The best thing? It is on AngularJS.
I hope it helps you.
I have the same problem with angularjs-datepicker.
I used another datepicker: angularjs-material.
Here is how you can use it:
<md-datepicker ng-model="startDate" md-mode="month" md-placeholder="dd/MM/yyyy" md-date-locale="mylocale" md-open-on-focus></md-datepicker>
And then in your controller:
function pad(n) {return n < 10 ? "0"+n : n;}
$scope.mylocale = {
formatDate: function(date) {
var d=new Date(date);
if(isNaN(d.getTime())) {
return '';
} else {
return pad(d.getDate())+"/"+pad(d.getMonth()+1)+"/"+d.getFullYear();
}
},
parseDate: function(date) {
var ds = date.split('/');
var d=new Date(ds[2],ds[1]-1,ds[0]);
if(isNaN(d.getTime())&&d!=''){
return new Date(NaN);
} else {
return d;
}
} };
And it is working. Just make sure that you properly handle case when input is invalid (form.startDate.$invalid).
If someone has a solution for angularjs-datepicker, please let us know.
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" />