JavaScript - Input a date then autopopulate next field with difference - javascript

Hi this is making me nuts. I am not a developer. Trying to get this to work.
User puts in a date (hire date) into form using Date object (calendar)
Next field should take that date and subtract todays date to get the length of employment.
But I get undefined in the field AND my original hire date disappears.
Here is what I have, help please, much appreciation!
//grab date of hire
try{document.getElementById("dData_DOH").onchange = custom_calculateDate;}catch(e){}
//not sure if necessary - field that the difference should go to
try{document.getElementById("dData_LengthEmp").onblur = insertDate;}catch(e){}
//Function to grab input hire date
//Create variable for now
//Create variable for difference
function custom_calculateDate(){
var hireDate = document.getElementById("dData_DOH").value = "";
var timeNow= new Date();
var diff = Math.abs(timeNow - hireDate);
document.getElementById("dData_DOH").setAttribute('value', custom_calculateDate());
}
//Function to get the difference into the LengthEmp field
function insertDate() {
document.getElementById("dData_LengthEmp").setAttribute("", custom_calculateDate());
}
I know this is completely wrong, as I said I am not a developer or programmer, I cannot figure out how to get this information into this field and get my original field to still show.
Thank you for reading this!

Use value instead of setAttribute
document.getElementById("dData_DOH").value = custom_calculateDate();

Wow wow wow.
I'll try to rewrite your code by giving you explainations about why:
// Firstly, the onchange event doesn't work on IE for text inputs, prefer onblur
document.getElementById('dData_DOH').onblur = function(e) {
// Now let's get some variables
var hireDate = this.value, // "this" refers to the element that triggered the event
now = new Date(),
// You were on the right track for the difference, almost!
diff = Math.abs(new Date(now.getTime() - hireDate.getTime()))
// Finally, just don't change the original field, but the one you wanted to modify
document.getElementById('dData_LengthEmp').value = diff.toTimeString() // Get the time as a readable format
}
I haven't tested the solution, but it should get you on the track.
Btw, don't use try/catch.

Related

Avoid choosing previous dates before today, without including today from datapicker on JS and React

I am intending to use a datapicker that does not allow the user to choose previous days before today, but I do want that today itself is available. I did this:
<input
name = "availabilityFrom"
onChange = {(e) => handleDateIn (e.target.value, e.target.name)}
type = "date"
/>
I am working with React so this above is part of a component, that has a state. Then with the value taken, I stored it on a variable to use its valueOf (), and created today´s variable also. Please notice that this.state.filterBy.availabilityFrom holds the value of the target, the selected date on the datapicker.
let today = new Date().valueOf();
let availabilityFromToDate = new Date(this.state.filterBy.availabilityFrom.split("-").join(",")).valueOf();
Then I used a conditional statement to get the desired behavior of the alert:
if (availabilityFromToDate <today && availabilityFromToDate)
{
sweetAlert ("Warning!",
"The entry date must be after the current date";
"warning");
}
It works well, I got so happy when it did. But if I choose today's date, I got the alert message anyway, even if I am not using <= for today.
Maybe I am not understanding the proper use of valueOf (). Been having nightmares about this, haha.
Thanks in advance!: D

Adding time to jQuery datepicker() function

I have a input field which I want to fill with date and time in format yy-mm-dd hh-mm-ss, because I'm sending this information to my databases column with DATETIME (or similar) data type. I made this work with two inputs - one textfield I filled with datepicker() and other was <select> list with predefined values for time. Today I was coding another functionality in php and I didn`t like my situation with date and time, so I made javascript code like this:
<script type="text/javascript">
$(".datepicker").click(function(){
var a = "yy-mm-dd ";
var b = prompt("Ievadi laiku formātā hh-mm-ss", "00-00-00");
var c = a.concat(b);
$(".datepicker").datepicker({dateFormat: c});
});
</script>
So when I click on the input field I get a prompt where I type time and press enter. This is when I'd like to choose a date from the calendar but as datepicker actually works at the same time when prompt shows up (on click), then argument c doesn't exist at this time and calendar doesn't show up because dateFormat is invalid. If I click once again on the input field, I get another prompt and after the second prompt calendar shows up, but datepicker uses the format I was trying to set the first time not now. So if I entered "00-00-00" for the first time and "00-10-00" for the second, than after choosing the date I get "mydate 00-00-00" and not the actual time I entered this time. I've seen similar posts here but it didn't help me. There was a post of getting current time and appending to the date but I guess this is different. Should I use some other method to enter the time and then add it to date as I was trying to do it or is there a way to give my variable c a value before datepicker works? I`ll appreciate your suggestions.
<script type="text/javascript">
$(".datepicker").click(function(){
var a = "yy-mm-dd ";
var b = prompt("Ievadi laiku formātā hh-mm-ss", "00-00-00");
var c = a.concat(b);
if (c.length > 0){
$(".datepicker").datepicker({dateFormat: c});
}});
</script>
If statement solved this one. But it doesnt work every time. Ill check this tomorrow.
EDITED: this works - https://jsfiddle.net/gne64yd5/20/

Settnig duration values in jtsage datebox in mode durationflipbox

I'm having difficulty setting a time (duration) value in a datebox. A simple demonstration of the problem is if I do something like:
function initDuration() {
this.d['header Text'] = "Set";
this.d['headerText'] = "Set Duration";
var element = 'input#'+this.element[0].id;
var currentDt = $(element).datebox('getTheDate');
// ***************
var dt = $(element).datebox('parseDate', '%H:%M', this.element[0].value); // Where this.element[0].value = "01:00:00"
// ***************
$(element).datebox('setTheDate', this.element[0].value);
$(element).trigger('datebox', { 'method': 'doset' });
}
dt just contains the current date/time; i.e. jtsage didn't like it. The element is defined (in jade) as:
input.Duration(type="text" name="duration" form="form#{i}"
id="duration#{i}" value="#{map[i].duration}" data-role="datebox"
data-options=
'{"mode":"durationflipbox", "overrideDurationOrder":["h","i"],'
+' "overrideTimeFormat": "%l:%M", "minuteStep":15, "beforeOpenCallback": "initDuration"}')
Also I'm not sure how to change the flipbox title. The 2nd line in initDuration() sets the text for the button but the title still says 'Set Time'.
Because of the first problem the last 2 lines in initDuration() don't do what I want. i.e. they just use the current time, whatever that happens to be.
My apologies that this is going to be an incomplete answer, but it was going to be too long for a comment.
For the title - give "overrideHeaderText" a shot instead. It is entirely possible that I screwed this up at some point, it's not a feature I use in any of my own projects.
Next...
var dt = $(element).datebox('parseDate', '%H:%M', this.element[0].value); // Where this.element[0].value = "01:00:00"
I think I am reading you correctly that "dt" isn't containing what you are expecting. It's because 01:00:00 != %H:%M - to read this "format", you'd need to either use "%H:%M:%S" or "%H:%M:00" (the later ignoring the seconds field).
That said, I think what you are trying to do is set a duration, which, is a little different. There are a few ways to do it - and I'm noticing that there isn't a lot of support to do it functionally. The simplest method, is the set the value of the input, and let datebox handle the math - just be aware that the format you drop into the input must be exactly the same as the output format - it will read it when the control opens (or is initialized if the control is being shown inline - if you are doing it inline, and set the value "later", you can use the 'refresh' method to update it).
For what it's worth, if you really, really, really want to use the setTheDate method, duration modes work by comparing "theDate" (the publicly available date, i.e. setTheDate, getTheDate) with an internal initDate - which is not exposed to the API, but can be found here:
$(element).data('jtsage-datebox').initDate
So, in pseudo-code, for a duration of an hour
myNewDate = $(element).data( 'jtsage-datebox' ).initDate;
myNewDate.setHour( myNewDate.getHour() + 1 );
$(element).datebox( 'setTheDate', myNewDate );

JavaScript split input's attribute into array and output

Codepen Link
JSFiddle Link
The goal:
Create dynamically refreshing output with split year-month-day from the input field.
Description:
Do not pay attention to any code at CodePen above the comment at line 40;
I got an input. Whenever the user picks a date with the initialized datepicker, the input gains data-date attribute with YYYY-mm-dd format. Ok, perfect.
I want to create an output to a div based on this data-date attribute.
So I wrote the following code:
function summaryOutput() {
var output = $( '#output' );
var end = $( '#end' );
end.on('change', function() {
var endString = end.attr('data-date');
var endSplit = endString.split('-');
var year = endSplit[0];
var month = endSplit[1];
var day = endSplit[2];
output.text(year);
});
}
It is pretty straightforward.
This function is not invoked in the codepen
Invoke it and try to select a date and see an error:
Uncaught TypeError: Cannot read property 'split' of undefined
And what is more, data-date attribute cease to apply.
What is more confusing, it works in the console. I mean, if you select a date in the datepicker and then step by step initialize all the variables and then will, for example, see what is in the month variable, you'll get the result.
But it ceases to work in the real document.
So am, where am I wrong?
You need to add a data-date attribute in your input tag.
Change the input tag to look like this:
<input type="text" id="end" data-date="">

Compare Current Date and Time to input of type DateTime

I have googled a bit and could not find an answer. So here is my situation.
I have an input of type dateTime. I want to compare the value picked (mobile app for blackberry) to the current date and time. if the selected date is in the future (bigger than date now) I have to show a simple error message. This is all done when the user tries to save the data.
I have tried code like this, but was unsucessfull.
var dateOfIncident = $('#AccidentDetailsDate').val();
var dateNow = Date.now();
if(dateNow > dateOfIncident)
{
// do my stuffs :)
}
This does not work... It passes that validation. I am very new to javascript myself. Any help would be greatly appreciated. I googled and could not find a solution that does not use anything fancy. I need to do it in javascript.
Thanks in advance.
Try this:
var dateOfIncident = new Date($('#AccidentDetailsDate').val()); // or Date.parse(...)
var dateNow = new Date(); // or Date.now()
if(dateNow > dateOfIncident)
{
// do your stuffs...
}
However, if this works may depend on what format your date-string is! You may want to consider this post as well.

Categories