Below is my Controller and html code where I'm implementing date and can someone explain me how to add maxdate and mindate to below code.
app.controller('viewfullproductionsummaryController', function ($scope, productionService, usSpinnerService) {
$scope.open1 = function () { $scope.popup1.opened = true; };
$scope.popup1 = { opened: false };
$scope.data = {};
$scope.data.ProductionReportDate = new Date();
});
<div class="col-md-2 inputGroupContainer">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
<input type="text" class="form-control" uib-datepicker-popup="dd-MMM-yyyy" ng-model="data.ProductionReportDate" is-open="popup1.opened" required close-text="Close" />
</div>
</div>
You can use maxDate and minDate in datepicker options.
According to documentation
to configure the uib-datepicker you need to create an object in
Javascript with all the options and use it on the datepicker-options
attribute
so in your html
<input type="text" class="form-control" uib-datepicker-popup="dd-MMM-yyyy" ng-model="data.ProductionReportDate" is-open="popup1.opened" datepicker-options="options" required close-text="Close" />
and in your controller
$scope.options = {
minDate: new Date(), // set this to whatever date you want to set
}
Have a look at this plunker
In AngularJS you can set a series of dateOptions such as dateMin, dateMax for the uib-datepicker
Check this plunker taken from this thread
You can do it with tag it self
In controller
$scope.minDate = new Date();
In view
min-date="minDate" // add in uib-input
Just tested and Works fine
Related
I'm trying to pass the selected date from a Bootstrap date picker to Javascript code. Plus by default, the date picker should select today's date.
Currently, when clicking the search button, the current date is shown in the alert. However, I'm having trouble actually binding it to the date picker. What am I missing/doing wrong?
Date picker code:
<form class="form form-horizontal" style="background-color:white">
<div class="form-group">
<div class="col-lg-2">
<div class="input-group addon">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="searchDate" readonly style="cursor: pointer;" data-bind="datePicker: SearchDate" class="form-control pad-bottom-when-small" type="text" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-autoclose="true"/>
</div>
</div>
<div class="col-lg-3">
<button class="btn btn-success" onclick="search()">Search</button>
</div>
</div>
</form>
My attempt to data bind:
<script>
ko.applyBindings({
SearchDate: ko.observable(moment().toDate()),
});
</script>
<script type="text/javascript">
self.SearchDate = ko.observable(moment().toDate());
function search() {
alert(self.SearchDate());
}
</script>
It seems that you require some reading up on the knockout-side, specifically on the custom binding handler section, it is -a- way of hooking up non-knockout code with your knockout viewmodel in a clean manner. This also creates a reusable piece of code should you need the calendar picker in another part of your application. I've created a very basic concept of what you will require, as an exercise I'll let you sort out the error-handling when entering false dates, or maybe try to come up with an idea where you could implement the addition of having an empty/null input box.
ko.bindingHandlers.datePicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
var options = { format: 'dd-mm-yyyy', weekStart: 1, autoclose: true };
$(element).datepicker(options);
$(element).datepicker().on('changeDate', function(e) { valueAccessor()(e.date); });
},
update: function(element, valueAccessor, allBindingsAccessor) {
var date = ko.unwrap(valueAccessor());
$(element).datepicker('setDate', date);
}
};
ko.applyBindings(() => {
var self = this;
self.foo = ko.observable(new Date());
self.bar = ko.computed(() => {
var date = self.foo();
return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<input type="text" data-bind="datePicker: foo" />
<div data-bind="text: bar"></div>
I'm trying to disable al lthe past dates from an angular boostrap datetimepicker. I found that in order to do that I should use date-disabled but honestly, I don't understand it and it doesn't work either.
<datetimepicker class="calendar-format"
data-ng-model="data.date"
date-disabled="isDisabledDate(date, mode)"></datetimepicker>
this.isDisabledDate = function(currentDate, mode) {
return mode === 'day' &&
(currentDate.getDay() === 0 || currentDate.getDay() === 6);
};
How can I make it so that it doesn't let me pick past dates?
This is what I am using https://www.npmjs.com/package/angular-ui-bootstrap-datetimepicker
My current code, not working: plnkr.co/edit/VGTFJaVN6Y62Frmt3ksB?p=preview
ANy other ideas how to make al lthe past dates get grayed out/unable to be picked>?
I tried everything. Any ideas what I'm doing wrong here?
Well you can use below code to disable past dates by setting min date scope object in your JS.
$scope.dateOptions = {
formatYear: 'yyyy',
startingDay: 1
};
$scope.opened = true;
$scope.minDate= new Date();//today and future dates will be enabled..
var maxDate = new Date();
maxDate.setFullYear (maxDate.getFullYear() + 2);//enable for 2 future years..
$scope.maxDate= maxDate;
Your HTML will look like this
<input type="text" class="form-control selection-box"
id="datepicker"
datepicker-popup="{{dateFormat}}"
ng-model="selectedDate" is-open="opened"
min-date="minDate" max-date="maxDate"
datepicker-options="dateOptions" readonly="readonly"
ng-change="changeDate()"
close-text="Close" ng-required="true" />
In the case of angular-ui-bootstrap-datetimepicker, you can do it by setting min date in date options in below way in your Js
$scope.dateOptions = {
showWeeks: false,
startingDay: 0
};
var minDate = new Date();
minDate.setDate(minDate.getDate());
$scope.dateOptions.minDate = minDate;
In your HTML
<datetimepicker class="calendar-format" date-options="dateOptions" data-ng-model="data.date" date-disabled="isDisabledDate(date, mode)"></datetimepicker>
just put
attribute in html
date-options="dateOptions"
update your html to
<datetimepicker class="calendar-format" data-ng-model="data.date" date-disabled="isDisabledDate(date, mode)" date-options="dateOptions"></datetimepicker>
and put below code in js
$scope.dateOptions.minDate = new Date();
here is plunker of it.
http://plnkr.co/edit/s6Gm8x8ExndUj6EBYbhi?p=preview
If you want to dynamically disable dates based on selection, you can use the min and max attributes and watchers.
JS
$scope.endDateBeforeRender = endDateBeforeRender
$scope.endDateOnSetTime = endDateOnSetTime
$scope.startDateBeforeRender = startDateBeforeRender
$scope.startDateOnSetTime = startDateOnSetTime
function startDateOnSetTime () {
$scope.$broadcast('start-date-changed');
}
function endDateOnSetTime () {
$scope.$broadcast('end-date-changed');
}
function startDateBeforeRender ($dates) {
if ($scope.dateRangeEnd) {
var activeDate = moment($scope.dateRangeEnd);
$dates.filter(function (date) {
return date.localDateValue() >= activeDate.valueOf()
}).forEach(function (date) {
date.selectable = false;
})
}
}
function endDateBeforeRender ($view, $dates) {
if ($scope.dateRangeStart) {
var activeDate = moment($scope.dateRangeStart).subtract(1, $view).add(1, 'minute');
$dates.filter(function (date) {
return date.localDateValue() <= activeDate.valueOf()
}).forEach(function (date) {
date.selectable = false;
})
}
}
HTML
<div class="dropdown form-group">
<label>Start Date</label>
<a class="dropdown-toggle" id="dropdownStart" role="button" data-toggle="dropdown" data-target="#"
href="#">
<div class="input-group date">
<input type="text" class="form-control" data-ng-model="dateRangeStart">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="dateRangeStart"
data-datetimepicker-config="{ dropdownSelector: '#dropdownStart', renderOn: 'end-date-changed' }"
data-on-set-time="startDateOnSetTime()"
data-before-render="startDateBeforeRender($dates)"></datetimepicker>
</ul>
</div>
<div class="dropdown form-group">
<label>End Date</label>
<a class="dropdown-toggle" id="dropdownEnd" role="button" data-toggle="dropdown" data-target="#"
href="#">
<div class="input-group date">
<input type="text" class="form-control" data-ng-model="dateRangeEnd">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="dateRangeEnd"
data-datetimepicker-config="{ dropdownSelector: '#dropdownEnd', renderOn: 'start-date-changed' }"
data-on-set-time="endDateOnSetTime()"
data-before-render="endDateBeforeRender($view, $dates, $leftDate, $upDate, $rightDate)"></datetimepicker>
</ul>
</div>
I have a web page that needs two datepickers, start date and end date. The problem is, whenever I click on the glyph to open the date selector, both date picker opens at the same time.
Here is my Template, Directive, Controller and how it's being used. Any help would be much appreciated.
Template:
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="dd/MM/yyyy" ng-model="start_date" is-open="popup.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
Directive:
'use strict';
/*global angular*/
angular.module("myApp")
.directive("datepicker", function(){
return{
templateUrl: 'templates/datePicker.html',
controller: 'newDateCtrl',
replace: true
};
});
Controller
/*global angular*/
angular.module("myApp").controller("newDateCtrl", function($scope) {
$scope.popup = {
opened: false
};
$scope.open = function() {
$scope.popup.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
};
})
index.html, as part of a form like this:
....
<div class="form-group">
<label class="control-label col-sm-2">
Start Date
</label>
<div class="col-sm-10">
<datepicker></datepicker>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">
End Date
</label>
<div class="col-sm-10">
<datepicker></datepicker>
</div>
</div>
....
Two things:
- when declaring your directive, use an isolate scope.
i.e.
.directive('...', function() {
return {
.... // your existing stuff
scope: {} // this gives each directive instance isolated scope
}
});
I think also 'datepicker' is the name of the bootstrap directive already, so if you're wrapping it you should consider giving it a different name.
I have a problem with getting data from datepicker inputbox into database.
I have a form
<form name="myForm">
<div>
<input type="text" name="todoNameField" ng-model="todoName" placeholder="wat do" required ng-minlength="1" class="form-control"
ng-keyup="($event.keyCode == 13 && todoName.length > 0) ? addItem() : return" style="width: 50%; margin-bottom: 10px"/>
<h4>Deadline?</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" 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>
<button ng-click="addItem()" ng-hide="myForm.todoNameField.$invalid" class="btn btn-primary" type="button">Save</button>
</div>
</form>
And a controller with a function that handles adding new items
$scope.addItem = function () {
// Create a unique ID
var timestamp = new Date().valueOf();
// Get the Firebase reference of the item
var itemRef = new Firebase(FIREBASE_URL + timestamp);
$firebase(itemRef).$set({
id: timestamp,
name : $scope.todoName,
dt : $scope.dt, // <<< date
completed: false
});
$scope.todoName = "";
$scope.dt = "";
}
If I remove dt : $scope.dt everything is stored nicely and there is no problem with using it later, however when I try to store the date it's not working. It's not even adding a dt: in a database.. not even empty.
Is there something I'm missing with adding a value from datepicker? I thought I can grab it like the input "todoName", but It doesn't seem to be working.
I am developing my first app using Angular and I can't see what's wrong.
I have used ui-bootstrap date with no issues in other places but then I tried using it inside a modal and whenever you pick a date inside the modal for the first time it works properly but then if you pick the wrong date and want to pick the correct one clicking the button to open the calendar a second time it doesn't work if it's inside the modal.
I have created a plunker sample where the error is reproduced.
Code fragments follows:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link data-require="bootstrap-theme#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" />
<script data-require="angular.js#1.3.0-beta.5" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
<script data-require="angular-ui-bootstrap#0.11.0" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Angular ui date!</h1>
<div ng-controller="DateController">
<div class="row">
<div class="col-md-6">
<h4>Date(This works)</h4>
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" disabled
ng-model="activityDate" is-open="opened" datepicker-options="dateOptions"
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>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-primary" ng-click="openModal()">Open Date Modal</button>
</div>
</div>
</div>
dateModal.html
<div>
<div class="modal-header">
<h3 class="modal-title">Date Modal Sample</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<h4>Modal Date(works only the first time! whyyyyyy?????)</h4>
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" disabled
ng-model="dateModal" is-open="opened"
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>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
app.js
'use strict';
(function () {
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('DateController', ['$scope', '$modal', '$log', function($scope, $modal, $log){
//Initializes date
$scope.today = function () {
$scope.activityDate = new Date();
};
//open calendar to select initial date
$scope.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
$log.info('open function was called');
};
$scope.today();
$scope.format = 'MM/dd/yyyy';
//open modal window
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'dateModal.html',
controller: 'DateModalController'
});
}
}]);
myApp.controller('DateModalController', ['$scope', '$modalInstance', function($scope, $modalInstance){
$scope.cancel = function () {
$modalInstance.dismiss('Cancel');
};
//Initializes date
$scope.today = function () {
$scope.dateModal = new Date();
};
//open calendar to select initial date
$scope.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
$log.info('open button from modal calendar field has been pressed!!!!');
};
$scope.today();
$scope.format = 'MM/dd/yyyy';
}]);
})();
Scopes inherit from their parent scopes.
The modal is created as a child of the scope that you passed in when initalising it (or on the $rootScope by default). When attempting to set a property directly on the scope, angular will automatically create it for you. However, if you try doing model.myProperty, if model doesn't exist on the child scope, it will travel up to the parent and correctly set it there (if it exists).
A good description on how scopes work can be found here: https://github.com/angular/angular.js/wiki/Understanding-Scopes
Here is a working sample without having to resort to using $parent.
http://plnkr.co/edit/WeJqirLDOoFuTqJEHEdg
<input type="text" class="form-control" datepicker-popup="{{format}}" disabled
ng-model="dateModal.date" is-open="dateModal.opened"
ng-required="true" close-text="Close"/>
Pretty sure it's related to the modal's scope overriding your scope and $scope.opened in the directive. I'm not sure the exact cause but you can work around it by using is-open="$parent.opened" in your dateModal template.