I've been trying out this AngularJS package (https://www.npmjs.com/package/angularjs-datepicker) and was struggling to use the date-set property. In my example I have 2 calendars, 1 that should display yesterdays date and 1 that should display todays date. Could someone please help me set these dates?
Datepicker:
<div class="datepicker-container">
<div class="date-from">
From:
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{}}" class="date-picker">
<div class="input-group">
<input class="form-control" placeholder="Choose a date"/>
<span class="input-group-addon" style="cursor: pointer">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</datepicker>
</div>
<div class="date-too">
To:
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{}}" class="date-picker">
<div class="input-group">
<input class="form-control" placeholder="Choose a date"/>
<span class="input-group-addon" style="cursor: pointer">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</datepicker>
</div>
</div>
Setting the date:
$scope.dateFrom = new Date();
$scope.dateTo = new Date();
var date = new Date();
$scope.today = date; //to show today's date
date.setDate(date.getDate() - 1); //to get yesterday's date, Ref:http://stackoverflow.com/questions/5511323/javascript-yesterday
$scope.yesterday = date;
Using date-set:
From the documentation linked above, https://www.npmjs.com/package/angularjs-datepicker . I see you have to pass date object as string to attribute date-set , hence convert the date object to string.
//js
var date = new Date();
$scope.today = date.toString(); //to show today's date
date.setDate(date.getDate() - 1); //to get yesterday's date, Ref:http://stackoverflow.com/questions/5511323/javascript-yesterday
$scope.yesterday = date.toString();
//html
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{today}}" class="date-picker">
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{yesterday}}" class="date-picker">
see this plnkr http://plnkr.co/edit/mDHliPweKoUNOAmVv5oo?p=preview
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<pre>Raw date is: <em>{{dt}}</em></pre>
I solved it in a simpler way, just activated the ng-if attribute in the div before the datepicker
pagamentoService.getCronograma(moment().year()).then(function (resp){
var cronogramas = resp.data;
console.log('99',resp.data);
cronogramas.forEach(function (obj){
vm.datasBloqueadas.push(moment(obj.data_limite).format('YYYY-M-D'));
});
}).catch(function (err){
console.log(err);
});
<div class="col-md-4 mt-1">
<label>data vencimento</label>
<div ng-if="Beneficios.datasBloqueadas.length > 0" class="input-control full-size text">
<datepicker date-format="yyyy-MM-dd" date-disabled-dates="{{Beneficios.datasBloqueadas}}" >
<input id="dataVencimento" class="required" type="date" date-converter ng-model="Beneficios.view.data_filter"
data-role="hint" data-hint-background="bg-orang-e"
data-hint-color="fg-white" data-hint-position="bottom" data-hint-mode="2">
<button class="button" onclick="$('#dataVencimento').focus();">
<span class="mif-calendar"></span>
</button>
</datepicker>
</div>
Related
I have two fields of data entry, date of entry and date of out, which receive data using a datepicker. Is it possible to calculate the number of days, take into account the values of the date of entry and date of out, and save it in the field number of nights? How can I do this?
HTML
<div class="form-group">
<label class="col-md-4 control-label">Date Entry</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
<input name="DateEntry" id="DateEntry" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">DateOut</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
<input name="DateOut" id="DateOut" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">NºNights</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list-ol"></i></span>
<input name="Nights" class="form-control" type="text">
</div>
</div>
</div>
var start = $('#DateEntry').val();
var end = $('#DateOut').val();
// end - start returns difference in milliseconds
var diff = new Date(end - start);
// get nights
var days = diff/1000/60/60/24;
//set nights
$('#Nights').val(days)
This is client side code. You have to call this from document.load or may be onchange event of both entry and out dates.
Here's a similar approach with the hook to handle the text changing.
<html>
<head>
<title>Date Diff in Nights</title>
</head>
<body>
<div id="container">
<span class="input-group-addon"><i class="glyphicon glyphicon-time">entry</i></span>
<input name="DateEntry" id="DateEntry" class="form-control" type="text" >
<span class="input-group-addon"><i class="glyphicon glyphicon-time">out</i></span>
<input name="DateOut" id="DateOut" class="form-control" type="text" >
<span class="input-group-addon"><i class="fa fa-list-ol">nights</i></span>
<input name="Nights" id="Nights" class="form-control" type="text">
</div>
<script type="text/javascript">
var input = document.getElementById('DateEntry');
input.addEventListener('input', calcNights);
var input2 = document.getElementById('DateOut');
input2.addEventListener('input', calcNights);
function calcNights() {
try {
var nightsout = document.getElementById('Nights');
var element = document.getElementById('DateEntry');
var entryDate = new Date(element.value);
var out = document.getElementById('DateOut');
var outDate = new Date(out.value);
// Set to noon to avoid any DST errors
outDate.setHours(12, 0, 0);
entryDate.setHours(12, 0, 0);
var difference = outDate - entryDate;
var nights = Math.round(difference / 8.64e7);
if (isNaN(nights) || nights < 0) {
nightsout.value = '';
return;
}
nightsout.value = nights;
}
catch (ex) {
//ignore
}
}
</script>
</body>
</html>
Here is working code with your update of date format being DD/MM/YYYY:
jQuery
I highly suggest using Momentjs. It is user friendly and very powerful when working with dates & times! That is what my solution will use. Otherwise you will have to do a bunch of parsing in order to match your date format. Just make sure that your format doesn't change or else you will have to edit this!
$(document).ready(function() {
$('#TestOne').datetimepicker({
format: 'DD/MM/YYYY HH:mm:ss',
});
$('#TestTwo').datetimepicker({
format: 'DD/MM/YYYY HH:mm:ss',
});
$("#DateOut").blur(function() {
var str1 = $("#DateEntry").val();
var str2 = $("#DateOut").val();
var dateEntry = moment(str1, "DD/MM/YYYY");
var dateOut = moment(str2, "DD/MM/YYYY");
var range = dateOut.diff(dateEntry, 'days');
$("#NightsBetween").val(range);
});
});
UPDATED FIDDLE
Here is a working JSFiddle
Hope this helps
I have the following code:
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right input-sm" id="datepickerTo" [ngModel]="dateTo | date:'yyyy-MM-dd'" (ngModelChange)="dateTo = $event" name="nameTo">
</div>
I have component class and declared dateTo parameter.
public dateTo: Date;
constructor() {
this.dateTo = new Date();
this.dateTo.setDate(this.dateTo.getDate() + 30);
}
When I load page it shows date properly, but when I change date on picker choose different date, value in component class does not change. Any idea how to fix this problem?
I have update form. And this update form has bootstrap datetime picker and it has html code like as below:
<div class="input-group date" id="startdateandtime" value="Thu Jul 25 1997 00:00:00">
<input required="" type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I want to set any date and time of this picker when edit form is opened.
But my jquery functions doesn't work. And value is not set to this datetime picker. I use jquery like as below:
$('#startdateandtime').datetimepicker({
date: new Date(1434544882775)
});
$("#startdateandtime").datetimepicker("update", new Date(1434544882775));
$("#startdateandtime").datepicker("setValue", "02-17-2012");
$('#startdateandtime').datepicker({
onSelect: function () {
$('#startdateandtime').text(new Date(1434544882775));
}
});
All of the above jquery functions doesn't work. So that I can't set any
datetime to the picker which is in the edit form.
I use bootstrap datetime picker. Bootstrap DateTimePicker css and js source files. And their version is 4.7.14.
How can I set any datetime to the datetime picker when edit form is opened ?
If you are using this bootstrap component: https://github.com/Eonasdan/bootstrap-datetimepicker
you can reference date function this ways:
set value in the picker to current datetime:
$("#startdateandtime").data("DateTimePicker").date(new Date());
set value to timestamp (24/11/2017 11:41:41 ==> timestamp 1511520101020):
$("#startdateandtime").data("DateTimePicker").date(new Date(1511520101020));
set value to date string:
$("#startdateandtime").data("DateTimePicker").date("30/11/2017 11:30");
See http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#date
Here is a working snippet:
$('#datetimepicker1').datetimepicker(
{
format: "DD/MM/YYYY HH:mm:ss",
toolbarPlacement: 'top',
showClear: true,
showClose: true,
sideBySide: true
}
);
$(document).ready(function() {
$("#datetimepicker1").data("DateTimePicker").date("30/11/2017 11:30");
})
function setTs() {
$("#datetimepicker1").data("DateTimePicker").date(new Date(1511520101020));
}
function setNow() {
$("#datetimepicker1").data("DateTimePicker").date(new Date());
}
function setDateStr() {
$("#datetimepicker1").data("DateTimePicker").date("30/11/2017 11:30");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js?ver=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/5a991bff/src/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.css">
<div class="row">
<div class="col-md-4">
<div class="panel-body">
<form id="srcForm" data-toggle="validator">
<div class="row">
<div class="form-group col-xs-12">
<label>Date</label>
<div id="datetimepicker1" class="input-group">
<input type="text" class="form-control" name="from">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</form>
<div class="search-footer">
<button type="button" class="btn btn-primary btn-search" onclick="setTs()">Set Date To TS</button>
<button type="button" class="btn btn-primary btn-search" onclick="setNow()">Set Date To Now</button>
<button type="button" class="btn btn-primary btn-search" onclick="setDateStr()">Set Date To Date String</button>
</div>
</div>
</div>
</div>
I am sharing how I made it work with setDate OPTION:
var dateEx = "08/14/2022 01:57:00 AM";
$('#datetimepicker1').data('DateTimePicker').setDate(dateEx);
Hope it helps someone too!
When i'm trying to locate 'datepicker' in protractor, i found every time a new date the instance/object of 'datepicker' created with same class='.datepicker' with incremented value of z-index, but i want to handle the single object or at least old object/instance should get destroyed to locate new object.
Following code/snippets will depicts the above explanation.
<!-- HTML CODE -->
<div class="form-group">
<label>Start Date</label>
<div class="input-group date form_datetime"
data-date- format="yyyy-mm-dd hh:ii"
data-link-field="dtp_input1">
<input class="form-control" size="16" ng-class="submitted:myScheduleForm.submitted}" ng-model="pollConfigInfo.startTime" readonly="" type="text" required=""/>
<span class="input-group-addon">
<i class="fa fa-times" style="cursor: pointer"></i>
</span>
<span class="input-group-addon">
<i class="fa fa-calendar" style="cursor: pointer"></i>
</span>
</div>
<input id="dtp_input1" value="" type="hidden"/>
</div>
JAVASCRIPT CODE:
<script>
$('.form_datetime').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
</script>
Protractor Snippet to select datepicker
selectStartTimeAndDate:
{
value : function()
{
var picker = element(by.css('.fa-calendar'));
picker.click();
browser.driver.sleep(2000);
var day = element(by.cssContainingText('div.datetimepicker-days > table.table-condensed > tbody > tr > td.day','1'));
day.click();
var hour = element(by.cssContainingText('span.hour_am','12'));
hour.click();
var min = element(by.cssContainingText('span.minute','12:00'));
min.click();
}
},
I'm not able to locate the 'picker' class due to this:
I got answer by making some changes in the protractor snippet like this:
var picker = element(by.css('.fa-calendar'));
picker.click();
browser.driver.sleep(2000);
var day = element.all(by.cssContainingText('div.datetimepicker-days > table.table-condensed > tbody > tr > td.day','1')).last();
day.click();
var hour = element.all(by.cssContainingText('span.hour_am','12')).last();
hour.click();
var min = element.all(by.cssContainingText('span.minute','12:00')).last();
min.click();
I have situation where I would like user to select start date and restrict the end date to either selected start date of the day next to selected start date.
How can I do this on boostrap datepickers for start and end date
Download bootstrap-datepicker.js from here
HTML Code
<div class="col-md-6 ">
<div class="form-group">
<label>Start Date</label>
<div class='input-group date'>
<input type='text' id='datecheckin1' class="form-control" placeholder="DD/MM/YYYY" data-date-format="dd/M/yyyy" readonly />
<span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="form-group">
<label>End Date</label>
<div class='input-group date'>
<input type='text' id='datecheckout1' class="form-control" placeholder="DD/MM/YYYY" data-date-format="dd/M/yyyy" readonly />
<span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
Java Script code
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin2 = $('#datecheckin1').datepicker({
onRender: function (date) {
//Here we restrict the date date of start datepicker
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
var newDate = new Date(ev.date);
newDate.setDate(newDate.getDate() + 1);
//Here we set the date of end datepicker
checkout2.setValue(newDate);
checkin2.hide();
$('#datecheckout1')[0].focus();
}).data('datepicker');
var checkout2 = $('#datecheckout1').datepicker({
onRender: function (date) {
//Here we restrict the date of enddatepicker
return date.valueOf() <= checkin2.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function () {
checkout2.hide();
}).data('datepicker');
Hope this will help you.
$('#dtpicker').datepicker({
endDate: '-1d'
}).on(....