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
Related
I have 2 date pickers in angular HTML
here is it
<div *ngIf="receipt.chargeTypeId !== 4" class="row">
<div class="col-6">
<div class="form-group">
<label class="label-title">{{ l('RentalPeriodFrom') }}</label><br />
<utc-datepicker name="RentalPeriodFrom" [(ngModel)]="receipt.rentalPeriodFrom">
</utc-datepicker>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label class="label-title">{{ l('RentalPeriodTo') }}</label><br />
<utc-datepicker name="RentalPeriodTo" [(ngModel)]="receipt.rentalPeriodTo">
</utc-datepicker>
</div>
</div>
</div>
I need to set RentalPeriodTo to RentalPeriodFrom + 1 month
I do it like this
this.receipt.rentalPeriodFrom = this.tenancyData.tenancyStartDate;
const periodTo = this.receipt.rentalPeriodFrom;
this.receipt.rentalPeriodTo = periodTo.add(1, 'M');
But it changes my this.receipt.rentalPeriodFrom to date relevant to this.receipt.rentalPeriodTo
Where is the problem?
// this might be due to the receipt.rentalPeriodFrom is copied as reference to periodTo which change source when we modify the receiptto
this.receipt.rentalPeriodFrom = this.tenancyData.tenancyStartDate;
const periodTo = Object.assign({},this.receipt.rentalPeriodFrom);
this.receipt.rentalPeriodFrom;
this.receipt.rentalPeriodTo = periodTo.add(1, 'M');
I am using a diective in ng-repeat which when i click i pass date and time to the function showAppointmentForm but here the problem is when I click on first index of loop i get date and time displayed in modal box but when I click on second ,third and so on its values are coming as function parameters but not displayed.Is this something problem with using directives in for loop.Can anyone please suggest help.Thanks.
Using directive in template,
<div data-ng-repeat="doctor in doctors">
<appointment-timings data-ng-if="appointments" appointments="appointments" physician="doctor.npi" width="2"></appointment-timings>
</div>
My appointmnt directive,
$scope.showAppointmentForm = function(date,time) {
$scope.appointmentData = {};
$scope.appointmentData.physician = $scope.physician;
$scope.appointmentData.date = '';
$scope.appointmentData.time = '';
$scope.appointmentData.date = date.toString();
$scope.appointmentData.time = time;
$scope.submitted = false;
$timeout(function () {
$scope.$apply();
$('#appointments').modal('show');
},500);
}
My Directive html,(A modal box)
<div class="date-time">
<div class="col-md-6 col-xs-6">
<div class="input-group">
<span class="input-group-addon"><b>DATE</b></span>
<input type="text" class="form-control" ng-model="appointmentData.date" disabled>
</div><!-- /input-group -->
</div>
<div class="col-md-6 col-xs-6">
<div class="input-group">
<span class="input-group-addon"><b>TIME</b></span>
<input type="text" class="form-control" ng-model="appointmentData.time" disabled>
</div>
</div>
</div>
<div class="scheduled-hours" id="scheduled-scroll">
<ul>
<li data-ng-click="showAppointmentForm(date, time)" data-ng-repeat="time in times">{{time}}</li>
</ul>
</div>
I have two text boxes which take date time value and the date time is setting from Bootstrap DateTimePicker. Now i want to subtract two date time values using JavaScript and save it in database?
Here is my code of date time pickers:
<script type="text/javascript">
$(function () {
$("#<%=datetimeCreated.ClientID %>").datetimepicker({
calendarWeeks: true,
useCurrent: false,
format: 'YYYY-MM-DD HH:mm:ss',
});
$("#datetimeCreated").on('dp.change', function (e) {
var date = $("#datetimeCreated").val();
});
});
$(function () {
$("#<%=datetimeClosed.ClientID%>").datetimepicker({
calendarWeeks: true,
format: 'YYYY-MM-DD HH:mm:ss',
});
$("#datetimeClosed").on('dp.change', function (e) {
var date = $("#datetimeClosed").val();
});
});
You can calculate the diff using moment.js (which is already required for datetimepicker) like this:
var diff = moment.duration(date1.diff(date2)).asDays();
Read more about .duration() and .diff() in the docs.
Read the code and let me know if something is not clear.
$(function () {
$('#datetimepicker1, #datetimepicker2').datetimepicker();
$('button').click(function(e) {
e.preventDefault();
var date1 = $('#datetimepicker1').data('DateTimePicker').date();
var date2 = $('#datetimepicker2').data('DateTimePicker').date();
var diff = moment.duration(date1.diff(date2)).asDays();
// here is what are you looking for:
console.log(diff);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.44/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<button class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>
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>
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(....