Develop Reference

Can't update daterangepicker value

I have a date range picker on my page and it works all right except that once I pick the range the value doesn't update.
I'd say that this might be because once the date range is picked up it automatically does the search for the records, so I tried to update the value based on the
request.args.get("start_date") and request.args.get("last_date")
using js
document.getElementById('').value = '';
but it doesn't work.
Does anybody have any idea why I am not able to update the value?
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
autoUpdateInput: true
}, function(start, end) {
window.location.search = 'start_date=' + start.format("DD/MM/YYYY") + "&last_date=" + end.format("DD/MM/YYYY");
document.getElementById('daterange').value = start.format("DD/MM/YYYY") + " - " + end.format("DD/MM/YYYY");
});
});
</script>
<div class="col-md-12 center-block" style="padding-bottom: 2rem">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="daterange" name="daterange" value=""/>
</div>
</div>

How to set maxdate and mindate in uib-datepicker

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

Bootstrap Datepicker Disable dates not working

I am trying to put a range of .datepicker() selection and Bootstrap Datepicker
I would like to disable some days, however not working,
Lets say, Today is Wednesday (04/05/2016) and I would like to restrict the days before first Friday (06/05/2016). For this, I get day of week info from users. Such as; user selected Saturday. So the calendar should start with the first Saturday even today is Wednesday, user will not be able to select previous days.
Here is my .datepicker() view:
<div class="col-sm-2 col-xs-4">
<div class="form-group">
<div id="date-from" class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div class="form-group">
<div id="date-to" class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control">
</div>
</div>
</div>
And here is the js code:
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#date-from').datepicker({
//format: 'dd/mm/yy',
datesDisabled: ['05/06/2016', '05/21/2016'], // not working
startDate: '+0d',
weekStart: 1,
beforeShowDay: function(date) {
return date.valueOf() >= now.valueOf();
},
autoclose: true
}).on('changeDate', function(ev) {
if (ev.date) {
if (ev.date.valueOf() > checkout.datepicker("getDate").valueOf() || !checkout.datepicker("getDate").valueOf()) {
var newDate = new Date(ev.date);
newDate.setDate(newDate.getDate());
checkout.datepicker("update", newDate);
}
} else {
checkout.datepicker("update", "");
}
$('#date-to')[0].focus();
});
var checkout = $('#date-to').datepicker({
format: 'dd/mm/yy',
weekStart: 1,
//endDate: '+2d',
beforeShowDay: function(date) {
if (!checkin.datepicker("getDate").valueOf()) {
return date.valueOf() >= new Date().valueOf();
} else {
return date.valueOf() > checkin.datepicker("getDate").valueOf();
}
},
autoclose: true
}).on('changeDate', function(ev) {});

(Angular + Bootstrap) How to stop two datepickers from being opened by the same button

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.

Datepicker getData Angular + Firebase

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.