With JavaScript or with Ajax
I need to enter the start date with the start time, and the end date with end time. And create four checkboxes for each day of the selected date range, in-line with the date mentioned in front.
BUT the last checkbox of the last raw should not be clickable/selectable IF it is not a complete day with 24 hours in full. Which means if the difference between two entered times are lesser than 1 minute.
Please help. It’s complicated for me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
<strong>Start</strong>
<br>Date: <input id="fromDate" type='date' /> Time:
<input type="time" id="start-time" placeholder="HH:MM">
<br><br><br>
<strong>End</strong>
<br>Date: <input id="toDate" type='date' /> Time:
<input type="time" id="end-time" placeholder="HH:MM">
<button id="btn">Submit</button><hr />
<p id="result"></p>
<script>
$("#btn").on('click', function(e) {
var fromDate = $('#fromDate').val(),
toDate = $('#toDate').val(),
from, to, druation;
from = moment(fromDate, 'YYYY-MM-DD'); // format in which you have the date
to = moment(toDate, 'YYYY-MM-DD'); // format in which you have the date
/* using diff */
duration = to.diff(from, 'days')
/* show the result */
$('#result').text(duration + ' days');
});
</script>
<br>
<input type="text" id="total-hours" placeholder="Total Hours">
<script>
document.querySelector("#end-time").addEventListener("change", myFunction);
function myFunction() {
function split(time)
{
var t = time.split(":");
return parseInt((t[0] * 60), 10) + parseInt(t[1], 10); //convert to minutes and add minutes
}
//value start
var start = split($("input#start-time").val()); //format HH:MM
//value end
var end = split($("input#end-time").val()); //format HH:MM
totalHours = NaN;
if (start < end)
{
totalHours = Math.floor((end-start)/60);
}
$("#total-hours").val(totalHours);
}
</script>