Using AngularJs, I want to dynamically disable particular date of a Datepicker. Here what I have did.
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $q) {
$scope.date1 = new Date();
$scope.date2 = new Date();
$scope.date2.setDate($scope.date2.getDate() - 1);
var currentDay = new Date();
$scope.isDateDisabled = function(date, mode) {
/*console.log("date=="+date.getTime());
console.log("currentdate"+$scope.date2.getTime());*/
if (date.getDate() === $scope.date2.getDate()) {
return true;
} else {
return false;
}
};
});
/* Put your css in here */
.padTop {
padding-top: 20px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container padTop">
<div>
<div style="display:inline-block; min-height:290px;">
<datepicker ng-model="date1" min-date="minDate" show-weeks="true" date-disabled="isDateDisabled(date,mode)" class="well well-sm"></datepicker>
</div>
<div style="display:inline-block; min-height:290px;">
<datepicker ng-model="date2" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>
</div>
</div>
<p class="padTop">date1:</p>
<pre>
{{ date1 | date : 'dd/MM/yyyy' }}
{{ date2 | date : 'dd/MM/yyyy' }}
</pre>
</div>
</body>
</html>
It was disabled the date in 1st datepicker, which was selected in second datepicker. But If I change the date in 2nd datepicker It wont be reflected(i.e It wont be disabled in 1st datepicker). Anyway to handle this case?
AFAIK there is no clean way to do this, but the datepicker refreshes when you change your minDate attribute. So if you add this in your controller, it will work...
$scope.$watch("date2", function (newValue, oldValue) {
$scope.minDate= new Date();
$timeout(function () {
$scope.minDate = null;
}, 0);
});
Related
I am busy trying to enable 2 days only in the date picker but I am struggling to get it right. I am seeking to enable the 1st of the current month and the 1st of the next month only, everything else should be disabled.
Following is the code I am busy playing around with:
angular.module('plunker', ['ui.bootstrap']);
var DatepickerDemoCtrl = function ($scope, $timeout) {
$scope.dates = ["2017/08/01","2017/09/01"];
$scope.date = new Date();
$scope.minStartDate = 0; //fixed date
$scope.maxStartDate = Date.parse($scope.dates[0]); //init value
$scope.minEndDate = Date.parse($scope.dates[0]); //init value
$scope.maxEndDate = Date.parse($scope.dates[1]); //fixed date
$scope.openStart = function() {
$timeout(function() {
$scope.startOpened = true;
});
};
$scope.openEnd = function() {
$timeout(function() {
$scope.endOpened = true;
});
};
$scope.dateOptions = {
'year-format': "'yyyy'",
'starting-day': 1
};
};
--------------------HTML------------------
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<div class="form-horizontal">
<h3>Date</h3>
<p>
<input type="text" datepicker-popup="{{format}}" ng-model="date" is-open="endOpened" min="minEndDate" max="maxEndDate" datepicker-options="dateOptions" close-text="Close" />
<button class="btn" ng-click="openEnd()"><i class="icon-calendar"></i></button>
</p>
</div>
</div>
</body>
</html>
I've got
<div class="navbar-collapse">
<div class="row">
<div class="col-lg-2 img-fake"></div>
<div class="col-lg-10 native-item ">
<textarea class="form-control" rows="5" id="comment" ng-model="newComment" ng-keyup="$event.keyCode == 13 && comment(existingItem,newComment)"></textarea>
</div>
</div>
</div>
and in the comment function i've got
$scope.comment = function(existingItem,newComment){
existingItem.comments.push(newComment);
$scope.newComment = '';
} // just adding text from textarea to the list
so i'm wondering why the value of textarea does not go to empty value
http://plnkr.co/edit/kmBA3Cco8QNDL8i4eOjz its working.
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="navbar-collapse">
<div class="row">
<div class="col-lg-2 img-fake"></div>
<div class="col-lg-10 native-item ">
{{newComment}}
<textarea class="form-control" rows="5" id="comment" ng-model="newComment" ng-keyup="$event.keyCode == 13 && comment(existingItem, newComment)"></textarea>
</div>
</div>
</div>
</body>
</html>
In youe case it is not working because, you may not define comment property of existingItem
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.newComment = 'asdf';
$scope.existingItem = {};
$scope.existingItem.comments = [];
$scope.comment = function(existingItem, newComment){
existingItem.comments.push(newComment);
console.log(existingItem.comments);
$scope.newComment = '';
}
});
i had same issue and fixed like this
$scope.comment = function(existingItem,newComment){
existingItem.comments.push(newComment);
$scope.newComment = 'xx'; // add a random data
$scope.$evalAsync(function() { $scope.newComment = '' ; }); //or use $timeout(function() { $scope.newComment = '' ; });
}
I am new to Angularjs, how can I extend md-datepicker directive to implement clickable calendar pane which gives month picker based on selected month-year it results as months. I know that we can archive this in angular material version1.1.1, but we are using angular material version1.0.1.
index.html
<!doctype html>
<html ng-app="datepickerBasicUsage">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.1/angular-material.css">
</head>
<body>
<div ng-controller="AppCtrl" style='padding: 40px;'>
<md-content>
<md-datepicker ng-model="birthdate" placeholder="Enter date" md-max-date="maxDate" ></md-datepicker>
</md-content>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.1/angular-material.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function($scope, $timeout) {
$scope.birthdate = new Date();
$scope.maxDate = new Date(
$scope.birthdate.getFullYear(),
$scope.birthdate.getMonth(),
$scope.birthdate.getDate());
$scope.open = function() {
$timeout(function() {
$scope.birthdate = new Date();
$scope.maxDate = new Date(
$scope.birthdate.getFullYear(),
$scope.birthdate.getMonth(),
$scope.birthdate.getDate());
}, 400);
}
});
In the following code taken from my app, the dropdown is not getting updated with the scope data. How can I make this work? I need to pass the dropdown options from parent controller to child controller. I am getting [$injector:modulerr] error.
<div ng-app="myApp" ng-controller="parentCtrl as pt">
<button ng-click="pt.callChild()">Change Dropdown</button>
<div ng-controller="childCtrl as ct">
<select ng-model="ct.selectedName" ng-options="item for item in ct.names">
</select>
</div>
</div>
JS:
var app = angular.module('myApp', []);
app.controller('parentCtrl', function ($scope) {
var vm = this;
var newArray = ["Steve", "Jony"];
vm.callChild = function () {
$scope.$broadcast('someEvent', newArray);
};
});
app.controller('childCtrl', function ($scope) {
var vm = this;
vm.names = ["Emil", "Tobias", "Linus"];
$scope.$on('someEvent', function (e, newArray) {
vm.names = newArray;
});
});
Here is the fiddle.
The code is working fine for me and I have incorporated angular 1.5 version.
See plnkr here .
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<div ng-app="myApp" ng-controller="parentCtrl as pt">
<button ng-click="pt.callChild()">Change Dropdown</button>
<div ng-controller="childCtrl as ct">
<select ng-model="ct.selectedName" ng-options="item for item in ct.names">
</select>
</div>
</div>
</html>
I am trying to integrate a jQuery control (http://amsul.ca/pickadate.js/) into my angular app using a directive, however within my directive I have an isolated scope but the object type properties are always undefined.
Here is a plunker demonstrating the problem - the minDate and maxDate properties are undefined in the directive scope.
http://plnkr.co/edit/yeYxWy?p=preview
var app = angular.module('plunker', []);
app.controller('default', function($scope) {
$scope.minDate = new Date();
$scope.minDate.addDays(-5);
$scope.maxDate = new Date();
$scope.maxDate.addDays(5);
$scope.format = 'mm/dd/yyyy';
$scope.date = new Date();
$scope.date.addDays(-2);
$scope.onGetDate = function(){
alert($scope.date);
};
});
app.directive('amsulPickadate', function(){
return {
restrict: 'E',
template: '<input id="datepicker" class="form-control" type="text" ng-model="ngModel" value="ngModel">',
scope: {
ngModel: '=',
minDate: '=',
maxDate: '=',
format: '#'
},
link: function(scope){
var pkr = $('#datepicker').pickadate({
select: scope.ngModel,
minDate: scope.minDate,
maxDate: scope.maxDate,
format: scope.format,
container: '#pickadateContainer'
});
}
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="pickadate.js#*" data-semver="3.3.0" rel="stylesheet" href="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/themes/default.css" />
<link data-require="pickadate.js#*" data-semver="3.3.0" rel="stylesheet" href="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/themes/default.date.css" />
<link data-require="pickadate.js#*" data-semver="3.3.0" rel="stylesheet" href="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/themes/default.time.css" />
</head>
<body ng-controller="default">
<div style="margin: 100px;">
<amsul-pickadate ng-model="date"
minDate="minDate"
maxDate="maxDate"
format="{{format}}"></amsul-pickadate>
<div id="pickadateContainer"></div>
</div>
<div>
<button class="btn btn-primary" ng-click="onGetDate()">Get Date!</button>
</div>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="datejs#*" data-semver="0.1.0" src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<script data-require="bootstrap#3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script data-require="pickadate.js#*" data-semver="3.3.0" src="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/picker.js"></script>
<script data-require="pickadate.js#*" data-semver="3.3.0" src="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/picker.date.js"></script>
<script data-require="pickadate.js#*" data-semver="3.3.0" src="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/picker.time.js"></script>
<script data-require="angular.js#1.3.10" data-semver="1.3.10" src="https://code.angularjs.org/1.3.10/angular.js"></script>
<script src="app.js"></script>
<script src="amsulPickadate.js"></script>
</body>
</html>
Anyone have suggestions as to why this is happening?
Thanks
Angular automatically camel-case normalizes the element attributes to match against a directive name and scope properties.
When your scope variable are minDate and maxDate, the attribute names should be respectively min-date and max-date
<amsul-pickadate ng-model="date"
min-date="minDate"
max-date="maxDate"
format="{{format}}"></amsul-pickadate>