i'm trying to use angularjs date picker on my project as but seems to be functionality has been broken when i'm integrating date picker to my project
<div class="input-group">
<div class="input-group ui-datepicker">
<input type="text"
class="form-control"
datepicker-popup="yyyy/MM/dd"
ng-model="dt"
is-open="opened"
max="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
controller
$scope.dt = new Date();
$scope.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
return $scope.opened = true;
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.disabled = function (date, mode) {
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
};
what am'i missing there?
thanks
here is the plunkr
You just need to add ng-click="open($event)" to an element, the span for example, and it will work.
http://plnkr.co/edit/bNNrFaeRl6iqFPfa3FMW?p=preview
Related
I know directive can generate HTML DOM
is It possible to have different controllers for each directive?
For example I have two similar datepickers, each has different controller
I wonder how to use directive to simplify my code
The differences between the two similar components are ng-model and ng-controller
VIEW
<div class="form-group" ng-controller="FlightSkuStartDatepickerCtrl">
<label class="col-sm-2 control-label"> {{ I18n.t("choose_start_date") }} </label>
<div class="col-sm-10" ng-click="open($event)">
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-date ng-valid-required" datepicker-popup="yyyy/MM/dd" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" required="required" aria-required="false" aria-invalid="false" ng-model="form.start_date"></input>
</div>
</div>
<div class="form-group" ng-controller="FlightSkuEndDatepickerCtrl">
<label class="col-sm-2 control-label"> {{ I18n.t("choose_end_date") }} </label>
<div class="col-sm-10" ng-click="open($event)">
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-date ng-valid-required" datepicker-popup="yyyy/MM/dd" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" required="required" aria-required="false" aria-invalid="false" ng-model="form.end_date"></input>
</div>
</div>
Controller
app.controller('FlightSkuStartDatepickerCtrl', ['$scope',
function($scope) {
// Disable weekend selection
$scope.disabled = function(date, mode) {
return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1,
class: 'datepicker'
};
$scope.formats = ['YYYY/MM/DD'];
$scope.format = $scope.formats[0];
}
]);
app.controller('FlightSkuEndDatepickerCtrl', ['$scope',
function($scope) {
// Disable weekend selection
$scope.disabled = function(date, mode) {
return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1,
class: 'datepicker'
};
$scope.formats = ['YYYY/MM/DD'];
$scope.format = $scope.formats[0];
}
]);
I have a form with a ui-bootstrap datepicker. I want to prevent the date from being in the past.
I set the min-date setting on the directive to a new Date() as shown below. This correctly prevents selection of dates in the past when using the popup, however I can still type in a date in the past and this validates OK.
How can I enforce min-date validation on dates that are typed in?
Plunkr: https://plnkr.co/edit/EHO1BG8BspNMvsoKT30l?p=preview
Html:
<div class="input-group">
<input type="text"
class="form-control"
uib-datepicker-popup="{{format}}"
ng-model="dt"
is-open="popup1.opened"
min-date="minDate"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
name="dt"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
JS:
app.controller('MainCtrl', function($scope) {
$scope.dt = new Date();
$scope.minDate = new Date();
$scope.format = "dd/MM/yyyy";
$scope.altInputFormats = ['d!/M!/yyyy'];
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.popup1 = {
opened: false
};
$scope.open1 = function() {
$scope.popup1.opened = true;
};
});
This should work correctly, I have added changeHandler function in your controller and called it on ng-change of input.
Html:
<div class="input-group">
<input type="text"
class="form-control"
uib-datepicker-popup="{{format}}"
ng-model="dt"
is-open="popup1.opened"
min-date="minDate"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
ng-change="changeHandler()"
name="dt"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
JS:
app.controller('MainCtrl', function($scope) {
$scope.dt = new Date();
$scope.minDate = new Date();
$scope.format = "dd/MM/yyyy";
$scope.altInputFormats = ['d!/M!/yyyy'];
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.popup1 = {
opened: false
};
$scope.changeHandler = function () {
$scope.dateForm.dt.$setValidity('$valid', $scope.dt.getTime() >= $scope.minDate.getTime());
}
$scope.open1 = function() {
$scope.popup1.opened = true;
};
});
I have a page that has a datepicker on it. When a date is picked I have a function being called which assigns the new date to a variable and then calls a $http.get.
The variable gets assigned fine as I have this returning to the page but the $http.get fails and I cant see why. The call syntax is fine as I use it in another function and when I look at the Network viewer in IE I can see that its not even being fired.
Any help would be great.
Thanks :-)
The HTML
<div>
<div id="date-picker" class="panel panel-heading" ng-controller="timesheetViewerCtrl">
<!--<div>
Choose A Week End Date:
<select ng-model="selectedWeek" ng-options="val for val in years"> </select>
</div>-->
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<div class="row">
<div class="col-md-6">
Choose a Week End Date:
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate" max-date="'2020-06-22'" datepicker-options="dateOptions"
date-disabled="isDateDisabled(date, mode)" ng-required="true" ng-change="changeSelect(dt)"
close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<pre>{{changeDate}}
<br>To Check Filter Select any of the following (joining date) from Datepicker.
</pre>
</div>
and the JS
angular.module("timesheetApp").controller("timesheetViewerCtrl", function ($scope) {
$scope.dt = new Date();
$scope.open = function (e) {
e.preventDefault();
e.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
'starting-day': 1
};
$scope.format = 'dd-MM-yyyy';
$scope.isDateDisabled = function (date, mode) {
return (mode === 'day' && date.getDay() !== 0);
};
$scope.changeSelect = function (dt) {
$scope.changeDate = moment(dt).format("MM-DD-YYYY");
$http.get("/api/tblEntries/")
.then(onUserComplete, onError);
}
});
Please inject $http service in your controller declaration like
controller("timesheetViewerCtrl", function ($scope, $http)
I have two datepickers, one representing start date and another the end date.
I am using angular-ui.
How to make each one to function independently.
EDIT:
And also how to make the 2 datepickers to appear on the same line
Here is plunkr demo
HTML code
<body ng-controller="DatepickerDemoCtrl">
<br><br><br>
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt1" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt1" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<script type="text/javascript" src="bootstrap-select.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Thanks in advance
Demo: http://plnkr.co/edit/rGJndx1sXK9u8WCXSMFS?p=preview
JS:
angular.module("myApp", ['ngAnimate', 'ui.bootstrap'])
.controller('DatepickerDemoCtrl', function($scope) {
$scope.today = function() {
$scope.dt1 = new Date();
$scope.dt2 = new Date();
};
$scope.today();
$scope.clear = function() {
$scope.dt1 = null;
$scope.dt2 = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open1 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened1 = true;
};
$scope.open2 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened2 = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 2);
$scope.events = [{
date: tomorrow,
status: 'full'
}, {
date: afterTomorrow,
status: 'partially'
}];
$scope.getDayClass = function(date, mode) {
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0, 0, 0, 0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
};
})
.controller("mainctrl", function($scope) {
$scope.courses = [{
"name": "Java",
"level": "I"
}, {
"name": "Python",
"level": "I"
}, {
"name": "Nodejs",
"level": "A"
}];
$scope.caller = function() {
console.log($scope.inputvalue);
};
})
.filter('inArray', function($filter) {
return function(list, arrayFilter, element) {
return $filter("filter")(list, function(listItem) {
return !arrayFilter || arrayFilter.length == 0 || arrayFilter.indexOf(listItem[element]) != -1;
});
};
});
HTML:
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt1" is-open="opened1" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt2" is-open="opened2" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
I am not sure if this is good way to do but I did it in this way. May be someone can correct me on this.
basically you just need to seperate the scope variable, that opens both datepickers.
scope.openFirst = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.openedFirst = true;
};
You could use the same function for both datepickers too and add an argument to the function.
http://plnkr.co/edit/df0GQfnh4g1Os3DwcK0V?p=preview
This is very rudimentary but can give you the right idea and works.
just elaborating on K K's comment
Use different is-open attribute and then pass the attribute in through the ng-click function.Also use different ng-models
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt1" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
<button class="btn" ng-click="open($event,'opened1')"><span class="glyphicon glyphicon-calendar"></span></button>
inside controller add the passing argument
$scope.open = function($event,opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
The date picker seems to be only working on the first click and then after that it won't pop up. I am guessing it has something to do with some crossed variable or function definitions, but I can't figure out how to fix it.
Here is the code:
http://plnkr.co/edit/ridTspMBHE1iphrSobQr?p=preview
HTML
<div ng-controller="ModalDemoCtrl">
<button class="btn btn-info" ng-click="open_modal()">Edit</button>
<script type="text/ng-template" id="notificationInput.html">
<div class="modal-header">
<h3 class="modal-title">My Modal</h3>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="n_title">Title</label>
<input type="text" class="form-control" id="n_title" value="{{selectedNotification.title}}">
</div>
<div class="form-group">
<label for="n_release">Release</label>
<p class="input-group">
<input type="text" id="n_release" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
Javascript
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {
$scope.open_modal = function(notification) {
$scope.selectedNotification = notification;
var modalInstance = $modal.open({
templateUrl: 'notificationInput.html',
controller: ModalInstanceCtrl,
scope: $scope
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.initDate = new Date('2016-15-20');
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
};
As you are using it inside modal there is scope issue. You just need to use $parent.opened instead opened.
Modified HTML
<input type="text" id="n_release" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="$parent.opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
Working DEMO
This has worked for me:
In html replace is-open="opened" by is-open="field.opened"
and the same in the controller, replace
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
by
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.field.opened = true;
};