How to use kendoTimePicker and kendodatePicker to find difference between two dates? - javascript

I am quite new to WebApp/HTML/JS and would like to make a basic tool where a user can enter two dates and times, and the tool will tell them the difference (so for example difference= 220 hours 40 minutes).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date and Time Pickers</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap-v4.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<style>
body {font-family: helvetica;}
</style>
</head>
<body>
<div>
<script>
// still need to figure out how to do this
// $(document).ready(function() { //maybe don't need this
function calculateTime() {
//create date format
var valuestart = $("select[name='timePicker1']"1).val();
var valuestop = $("select[name='timePicker1']"1).val();
//create date format
var timeStart = new Date($("select[name='datePicker1']"1).val() + valuestart);
var timeEnd = new Date($("select[name='datePicker2']"1).val() + valuestart);
var difference = timeEnd - timeStart;
var diff_result = new Date(difference);
var hourDiff = diff_result.getHours();
$("p").html("<b>Hour Difference:</b> " + hourDiff )
}
$("select").change(calculateTime);
calculateTime();
});
</script>
</div>
<div>
<p>Einweisungsdatum</p>
<!---datepicker first date--->
<input id="datePicker1">
<script>
$(document).ready(function(){
$('#datePicker1').kendoDatePicker({
start: 'decade',
depth: 'year'
});
});
</script>
<input id="timePicker1">
<!---timepicker first date--->
<script>
$(document).ready(function(){
$('#timePicker1').kendoTimePicker();
});
</script>
</div>
<div>
<p>Reinigungsdatum</p>
<!---datepicker first date--->
<input id="datePicker2">
<script>
$(document).ready(function(){
$('#datePicker2').kendoDatePicker({
start: 'decade',
depth: 'year'
});
});
</script>
<input id="timePicker2">
<!---timepicker first date--->
<script>
$(document).ready(function(){
$('#timePicker2').kendoTimePicker();
});
</script>
</div>
<p>start</p>
<div>
<p>end</p>
</div>
</body>
</html>
The UI looks good, but somehow the calculation won't work. I thought that datePicker and timePicker would give me date objects, which I could use for a simple calculation. Is this not the case ?
Thanks for the help!

Related

try to parse value in javascript

i want to parse this value, but i got error
i want to get URL like this :
http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/2019-01-08/dan/17
but i tried and got like this :
http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/[object%20HTMLLabelElement]/dan/17
i tried with this code :
// var label = $(this).attr("data");
// var label = document.getElementById("data").value = ""+data;
this is my blade view :
<html>
<head><title></title></head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/gijgo#1.9.11/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.11/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<body>
<ul></ul>
<label id="data" name="data" style="display: none;"></label>
<input type="text" id="datepicker" name="datepicker" value="Date"/> <br>
<script>
$('#datepicker').datepicker({
format : 'yyyy-mm-dd'
});
</script>
<button>test</button>
<script src="js/test.js" type="text/javascript"></script>
</body>
</html>
this is my js :
$("button").click( function() {
// var label = $(this).attr("data");
// var label = document.getElementById("data").value = ""+data;
var test = data;
var label = JSON.stringify(test);
//i want get url like this
//http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/2019-01-08/dan/17
$.getJSON( "http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/"+label+"/dan/17", function(obj) {
$.each(obj, function(key, value) {
$("ul").append(value.hariPraktek);
});
});
});
someone can help me? :(
very thanks if someone want to help me :)
What you actually want is the datepicker value using var label = $('#datepicker').datepicker('getDate');

Need to store html date input in JS var

I need help with JS and html. I need to store <input type = "date" id = "date"> in JS var. If you try to store the date in simple var and try to print it instead of your chosen date you get printed "undefined" :
$("#printDate").click(function(){
var dateVar = ($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
});
If you try to store the date in the dateVar using new Date() you get printed "Invalid date":
$("#printDate").click(function(){
var dateVar = new Date($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
});
Thank you for any kind of help!
upd: full page code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
</head>
<body>
<div id="results"></div>
<input type="date" id = "dateInput">
<button id = "printDate">PrintDate</button>
<script>
$("#printDate").click(function(){
var dateVar = new Date($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
});
</script>
</body>
</html>
$("#printDate").click(function(){
var dateVar = new Date($("#dateInput").val());
$("#results").append("<p>" + dateVar + "</p>")
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
</head>
<body>
<div id="results"></div>
<input type="date" id = "dateInput">
<button id = "printDate">PrintDate</button>
</body>
</html>
The only problem with your code is you are targetting wrong id i.e $("#date") instead of $("#dateInput")
<div id="results"></div>
<input type="date" id="dateInput">
<button id="printDate">PrintDate</button>
<script>
$("#printDate").click(function(){
var dateVar = new Date($("#dateInput").val());
$("#results").append("<p>" + dateVar + "</p>")
});
</script>
You have a typing error.

How to create dynamic datetimepicker value?

My HTML code like this:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
console.log(value)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.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.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datetimepicker' />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
Demo like this : https://jsfiddle.net/oscar11/8jpmkcr5/83/
If I click submit button, I successfully get the datetime value 300 minutes from now
But if before submitting, I wait 10 minutes, the result does not match my expectations
For example now at 6 o'clock. Before submit I wait 10 minutes. After submit, the time value I get is 11.10. So I want to like it
How can I do that?
How do I make the automatic datetime value increase?
Update :
Whether the time value in textfield can be automatically increased based on current time?
Not sure why would you need it, but you can use something like:
$("#btnSubmit").click(function() {
var targetDate = new Date(new Date().getTime() + (300 * 60 * 1000));
$('#datetimepicker').data("DateTimePicker").date(targetDate);
value = document.getElementById('datetimepicker').value;
console.log(targetDate, value);
});
On click, it will change the datetimepicker to the current date + 300 minutes.
I've updated the example: https://jsfiddle.net/8jpmkcr5/86/
EDIT:
Based on your latest comment, i believe you want the use to be able to pick the date (day/month/year) but the time (hour/minutes) keep changing as time passes to current time + 3 hours. If thats the case you can use something like:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(180, 'm'),
});
});
setInterval(function(){
var pickedDate = $('#datetimepicker').data('DateTimePicker').date();
var currentDate = moment();
pickedDate = pickedDate.set({
'hour' : currentDate.get('hour') + 3,
'minute' : currentDate.get('minute'),
'second' : currentDate.get('second')
});
$('#datetimepicker').data("DateTimePicker").date(pickedDate);
},1000);
You can test here: https://jsfiddle.net/8jpmkcr5/98/
You can update it every click and/or every minute
function updateTime(){
$('#datetimepicker').data("DateTimePicker").date(moment().startOf('minute').add(180, 'm'));
};
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(180, 'm'),
});
});
$("#btnSubmit").click(function() {
updateTime();
value = document.getElementById('datetimepicker').value;
console.log(value)
});
setInterval(function(){
updateTime();
},60000);
check
https://jsfiddle.net/8jpmkcr5/88/
Anyway the idea of the picker is to let user choose, what's the point using it and forcing some date?
You can try a different approach and add the 300 minutes on submit like this:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
var d1 = new Date (),
d2 = new Date ( value );
d2.setMinutes ( d1.getMinutes() + 300 );
console.log(moment(d2).format("YYYY-MM-DD HH:mm:ss"));
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datetimepicker' />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
var date = convertUTCDateToLocalDate(new Date(startdate));
date = moment(date, 'DD/MM/YYYY HH:mm').format("DD/MM/YYYY HH:mm");
date = date.toLocaleString();
$('#datetimepicker7').data("DateTimePicker").date(date);
//Covert date to universal date
function convertUTCDateToLocalDate(date) {
var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
var offset = date.getTimezoneOffset() / 60;
var hours = date.getHours();
newDate.setHours(hours - offset);
return newDate;
}

Auto Refresh Input Time object without reloading page

I have an input field that I would like to refresh every 2 seconds or so. However,I can't seem to get the 'setInterval' right because it is not updating my ID. Should I not be using the
ID to declare the refresh? Any help will be most appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" content="HTML,CSS,XML,JavaScript">
<script src="Scripts/Global.js" type="text/javascript"></script>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Styles/Design.css">
</head>
<body>
Time: <input type="time" id="theTime">
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("theTime").innerHTML = t;
}
</script>
<script type="text/javascript">
$(document).ready( function() {
var now = new Date();
//now2 prevents the milliseconds from showing up in the input
var now2 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours()-8, now.getMinutes(), now.getSeconds());
$('#theTime')[0].valueAsDate = now2;
});
</script>
</body>
</html>
You're setting the innerHTML of myTimer, where you should really be setting the valueAsDate, like in your $(document).ready function.
Here's how myTimer should look:
function myTimer() {
var now = new Date();
var now2 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours()-8, now.getMinutes(), now.getSeconds());
$('#theTime')[0].valueAsDate = now2;
}
and then you can call myTimer() from within your $(document).ready:
$(document).ready( function() {
myTimer();
});
you are trying to set the innerHTML of an input field. use $('#theTime').val() instead!

How to populate updated time in other text box based on time entered in one text box using java script or JQuery

Need your help here again.
I don't have any code snippet for this.
Below is my problem description:
There are two text boxes .
In one text box user will enter any time in 24 hour format say 23:23 or 10:12..
Now I need to populate time in the second text box based on this entered time.
Second text box should display value after adding the 6 hours in 24 hours format to the entered time.i.e. should display 05:23 or 16:12 and so on.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
$('#new_one').on('change',function (e) {
var first_time = $(this).val();
var arr = first_time.split(':');
var hrs = arr[0];
var new_hrs = parseInt(hrs)+6;
if(new_hrs>24)
new_hrs = new_hrs-24;
if(new_hrs < 10)
new_hrs = '0'+new_hrs;
var second_time = new_hrs+':'+arr[1];
$('#new_two').val(second_time);
});
});
</script>
</head>
<body>
Text1<input type="text" id="new_one"><br/>
Text2<input type="text" id="new_two">
</body>
</html>
Here is the working fiddle : Working Fiddle
$('#one').on('change',function (e) {
var first_time = $(this).val();
var arr = first_time.split(':');
var hrs = arr[0];
var new_hrs = parseInt(hrs)+6;
if(new_hrs>24)
new_hrs = new_hrs-24;
if(new_hrs < 10)
new_hrs = '0'+new_hrs;
var second_time = new_hrs+':'+arr[1];
$('#two').val(second_time);
});
It is pretty basic just split the input string of first box on ':' using .split(':') and increment hours accordingly and put the computed value to second box
$(document).ready(function()
{
$("#firstTime").keypress(function(){
var firsttime = $(this).val();
var gettime = $.trim(firsttime).split(":");
var updatetime = parseInt(gettime [0])+6;
if(updatetime > 24)
{
updatetime = updatetime-24;
}
if(updatetime < 10)
{
updatetime = "0"+updatetime;
}
$("#secondtime").val(updatetime+":"+gettime [1]);
});
});
Where your HTML will be:
<input type="text" id="firsttime"><!-- first time -->
<input type="text" id="secondtime"><!-- second time -->
You can also leverage DateJS to simplify the calculation as listed below. Here's an example in JS Fiddle. Note, there's no validation checks and number of hours to add is hard-coded at 6.
<!DOCTYPE html>
<html>
<head>
<title>Time Sample</title>
</head>
<body>
Start Time: <input id="startTime" type="text" /><br />
End Time: <input id="endTime" type="text" />
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/date.js"></script>
<script>
$(function () {
$("#startTime").change(function () {
var endTime = Date.parse(this.value).add(6).hours();
$("#endTime").val(endTime.toString("H:mm"));
});
});
</script>
</body>
</html>

Categories

Resources