<input id="startDate" kendo-date-time-picker
k-ng-model="vm.startDate"
k-on-change="vm.updateStartDate()"
required
/>
How to add disabled dates to this date picker?
Not using jquery !!
Is there a attribute as k-disabled-dates?
Specify the k-options attribute:
<input id="startDate" kendo-date-time-picker
k-ng-model="vm.startDate"
k-on-change="vm.updateStartDate()"
required,
k-options="startDateOptions"
/>
And then implement the options with the disabledDates(http://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker#configuration-disableDates) config specified however is appropriate for your situation, i.e.
$scope.startDateOptions = {
disableDates: function (date) {
var disabled = [13,14,20,21];
if (date && disabled.indexOf(date.getDate()) > -1 ) {
return true;
} else {
return false;
}
}
};
Example: http://dojo.telerik.com/#Stephen/eLuWE
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);
}
}
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've generated a Spring Boot + Angular 1 based project in jHipster. I'm kind of newbie the Angular world. Everything works fine, but when I input the date using the provided UI datepicker (https://angular-ui.github.io/bootstrap), its format is yyyy-MM-dd, even if I've defined spanish to be my only language package (I would prefer it to be dd/MM/yyyy). That's the code snippet for the input:
regulation-version-dialog.html
<div class="form-group">
<label class="control-label"
data-translate="selfprotectionApp.regulationVersion.versionDate"
for="field_versionDate">Version Date</label>
<div class="input-group">
<input id="field_versionDate" type="text" class="form-control"
name="versionDate" uib-datepicker-popup="{{dateformat}}"
ng-model="vm.regulationVersion.versionDate"
is-open="vm.datePickerOpenStatus.versionDate" /> <span
class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="vm.openCalendar('versionDate')">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
</div>
Here there's the {{dateformat}} binding, but I don't know where jHipster picks it from. The only matches are in the date-util.service.js file, but changing the format here doesn't seem to affect.
date-util.service.js
(function() {
'use strict';
angular
.module('selfprotectionApp')
.factory('DateUtils', DateUtils);
DateUtils.$inject = ['$filter'];
function DateUtils($filter) {
var service = {
convertDateTimeFromServer: convertDateTimeFromServer,
convertLocalDateFromServer: convertLocalDateFromServer,
convertLocalDateToServer: convertLocalDateToServer,
dateformat: dateformat
};
return service;
function convertDateTimeFromServer(date) {
if (date) {
return new Date(date);
} else {
return null;
}
}
function convertLocalDateFromServer(date) {
if (date) {
var dateString = date.split('-');
return new Date(dateString[0], dateString[1] - 1, dateString[2]);
}
return null;
}
function convertLocalDateToServer(date) {
if (date) {
return $filter('date')(date, 'yyyy-MM-dd');
} else {
return null;
}
}
function dateformat() {
return 'yyyy-MM-dd';
}
}
})();
Of course, I could replace the {{dateformat}} expression by some date format in HTML, but I would like to do it for the whole project.
There is no default way in angular JS to set up dateformat from a provider for example for the complete project.
What you could do; is define a filter with your format to be used like that : {{dateformat | date:'MM/dd/yyyy'}}
OR define a global filter for that requirement to make it more easy to type (source https://stackoverflow.com/a/18402623/3687474 )
.filter('myDate', function($filter) {
var angularDateFilter = $filter('date');
return function(theDate) {
return angularDateFilter(theDate, 'dd MMMM # HH:mm:ss');
}
});
and used it like that : {{dateformat | myDate }}
The ultimate solution is to used a very robust library to manage your dates such as moment.js and it angularjs diretives
this is my favorite solution; as it is more scalable for many uses and date manipulation.
However; adding libraries to your project has always a performance cost ;)
In this pagei found this example
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
vardatepicker = $("#datepicker").data("kendoDatePicker");
datepicker.readonly();</script>
How can use this readonly function to datetime input created by Angular?
example of datetime with angular
I want to add disabled input using only AngularJs
At my code:
<input kendo-date-picker
id="linesDateObject"
k-options="linesPickDateOptions"
k-ng-model="linesDateObject"
style="width:200px;"
class="pull-left" />
In my controller
$scope.linesPickDateOptions = {
value: new Date(),
format: "dd/MM/yyyy",
change: function () {
var value = this.value();
console.log(value);
}
}
I want to add disable property inside $scope.linesPickDateOptions object
$('#datepicker').data('kendoDatePicker').enable(false);
I am new in angular and I stuck at point where I am unable to restrict the user to enter valid date manually. It sets the date as undefined for empty, characters as well as invalid date entered by the user. The date format I have mentioned is MM-dd-yyyy. Even if I enter 85/34/2102 it assumes this as a date and takes some junk value instead of validating and throwing an error.
my code of angular date-picker in html
<input type="text" class="form-control" datepicker-popup="{{clCtrl.format}}"
ng-model="clCtrl.QualityExpirationDate" is-open="clCtrl.openedQualityDate"
min-date="clCtrl.minDate" datepicker-options="clCtrl.dateOptions"
ng-required="true" close-on-date-selection="true" show-button-bar="false" />
and code in angular controller side
self.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
self.formats = ['MM-dd-yyyy', 'MM/dd/yyyy', 'MM.dd.yyyy', 'shortDate'];
self.format = self.formats[0];
self.openQualityDate = function ($event) {
$event.preventDefault();
$event.stopPropagation();
self.openedQualityDate = true;
};
self.toggleMin = function () {
self.minDate = self.minDate ? null : new Date();
};
self.toggleMin();
self.clear = function () {
self.QualityExpirationDate = null;
};
Add a 'readonly' attribute to the input field:
<input type="text" readonly class="form-control" datepicker-popup="{{clCtrl.format}}" ng-model="clCtrl.QualityExpirationDate" is-open="clCtrl.openedQualityDate" min-date="clCtrl.minDate" datepicker-options="clCtrl.dateOptions" ng-required="true" close-on-date-selection="true" show-button-bar="false" />
If you want to allow user input but restrict to valid dates you could add this to your controller:
$scope.$watch('dt', function(val) {
$scope.isValidDate = isNaN(new Date(val).getTime());
});
then use the 'isValidDate' scope property to show/hide a message and/or disable submission, or whatever you want to do.
Of course it would be better to abstract this validation into a directive so it could easily be reused on all your date fields.