i am using this directive for datepicker
define(['./module'], function(directives) {
'use strict';
directives.directive('ngDate', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
$(element).datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(date) {
console.log(date);
ngModelCtrl.$setViewValue(date);
scope.$apply();
}
});
}
};
});
});
i have used it in html as follow
<input type='text' data-ng-model='fromDate' placeholder="dd-mm-yy" id="fromDate" data-ng-date='' readonly='readonly'>
<input type='text' data-ng-model='toDate' placeholder="dd-mm-yy" id="toDate" data-ng-date='' readonly='readonly'>
here from date should not be greater than todate. how to validate that in angularjs? second datepicker should not display dates before selected date in to datepicker ie if 26th April is selected in from datepicker than in to datepicker dates before 26th should not be displayed. how to achieve that?
Related
I am new to Angularjs. I have put 2 Datepickers. I need that When I select date from first datepicker then the smaller dates from that date should be disabled in second Datepicker. I am unable to set "minDate" for second Datepicker directive.
Below is my code :
HTML Code :
<div ng-controller='TestController'>
<label>From Date :</label>
<input type="text" id="1" datepicker="" ng-init="variable=''"
ng-model="startDate" ng-change="test()" />
<label>To Date :</label>
<input type="text" id="2" callFuc="test()" datepicker1=""
ng-model="endDate" />
</div>
Js Code:
app.controller('TestController', function($scope, $window) {
$scope.test = function() {
$scope.variable = $scope.startDate;
$window.alert("From date is" + $scope.variable);
};
});
app.directive('datepicker', function() {
return {
require: 'ngModel',
link: function(scope, el, attr, ngModel) {
$('#1').datepicker({
minDate: 0,
onSelect: function(dateText) {
scope.$apply(function() {
ngModel.$setViewValue(dateText);
});
}
});
}
};
});
app.directive('datepicker1', function() {
return {
require: 'ngModel',
link: function(scope, el, attr, ngModel) {
$('#2').datepicker({
minDate: scope.test(),
onSelect: function(dateText) {
scope.$apply(function() {
ngModel.$setViewValue(dateText);
});
}
});
}
};
});
I am able to disable past dates in first Datepicker using minDate : "0".
But I am unable to set minDate properly for the second Datepicker. I am not able to fetch selected date from the First Datepicker and pass it to "datepicker1" directive. Any help or suggestion will be appreciated.
Update
I have updated code. Kindly review it.
https://plnkr.co/edit/ohCFzpwLGgFPPH49jybq?p=preview
The datepicker directive needs to watch for changes and update minDate as needed:
app.directive('datepicker1', function() {
return {
require: 'ngModel',
link: function(scope, el, attr, ngModel) {
scope.$watch(attr.minDate, function(value) {
el.datepicker({
minDate: value,
onSelect: function(dateText) {
scope.$apply(function() {
ngModel.$setViewValue(dateText);
});
}
});
});
}
};
});
Usage:
<label>To Date :</label>
<input type="text" min-date="variable" datepicker1
ng-model="endDate" />
app.directive("datepicker", function () {
function link(scope, element, attrs) {
element.datepicker({
dateFormat: "dd/mm/yy"
});
}
return {
require: 'ngModel',
link: link
};
});
<input type = "text" datepicker class="form-control" ng-disabled = "x.status_flag == 1" ng-model = "x.closure_date" >
Here it is giving error that datepicker is not a function.
I have a custom directive for applying jQuery UI Datepicker to some inputs. I can pick a date and it updates the input. However, when i post back the results. The input(control) that was edited isn't marked dirty so the changes never get saved. See below..
<td>
<input type="text" jqdatepicker name="Delegation.StartDate" ng-model="delegation.StartDate" />
</td>
<td>
<input type="text" jqdatepicker name="Delegation.EndDate" ng-model="delegation.EndDate" />
</td>
App.directive('jqdatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'm/dd/yy',
onSelect: function (date) {
scope.date = date;
scope.$apply();
ngModelCtrl.$setDirty(); <--doesn't work
}
});
}
};});
I have tried using scope, element, ngModel and can't get the state of the control to change from pristine to dirty. On save, i scrap the rows(tr) for those that have the class ng-dirty and process them. Any thoughts on how to do this? I use the same method on about 8 other pages without issue but those do not use the directive/datepickers.
After lots of trial and error and reading. I finally got it to work! Below is the directive.
App.directive('jqdatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'm/dd/yy',
onSelect: function (date) {
console.log(ngModelCtrl);
ngModelCtrl.$setViewValue(date);
}
});
}
};
});
Datepicker in my application is working fine but i am not able to change year directly. I have to go month by month to change year
Directive for datepicker
app.directive('adatepicker', function() {
return {
require: 'ngModel',
link: function(scope, el, attr, ngModel) {
$(el).datepicker({
onSelect: function(dateText) {
scope.$apply(function() {
ngModel.$setViewValue(dateText);
});
}
});
}
};
});
In HTML page
<input type="text" adatepicker="" ng-model="Date"/>
screenshot of datepicker
From the documentation, initialize the datepicker with the changeYear option specified:
$( ".selector" ).datepicker({
changeYear: true
});
Get or set the changeYear option, after initialization:
// Getter
var changeYear = $( ".selector" ).datepicker( "option", "changeYear" );
// Setter
$( ".selector" ).datepicker( "option", "changeYear", true );
I am using ui-date in AngularJS.
<input name="dateofbirth" id="dateofbirth" type="text" ng-model="search.dateofbirth" ui-date="dateOptions" ui-date-format="mm/dd/yy">
When I click on the textbox, a calendar pops up, but the user cannot type in the textbox.
How can I make this textbox editable?
You can use this directive, when you click on the text field calendar should be shown.. Here is the working fiddle
http://jsfiddle.net/nabeezy/HB7LU/209/
myApp.directive('calendar', function () {
return {
require: 'ngModel',
link: function (scope, el, attr, ngModel) {
$(el).datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (dateText) {
scope.$apply(function () {
ngModel.$setViewValue(dateText);
});
}
});
}
};
})