nextDay, nextWeek, nextMonth Javascript changing date shown in textfield - javascript

Im pretty sure there is an answer somewhere, found many of them, but somehow couldnt implement it in my code. I'm aware of mistakes in my code, however Im not sure how javascript works in that case, therefore there is my question. I'd like to know the reason why my function does not work correctly (why months are added?) and how to make it work. Thanks for any kind of answer.
<input type='text' id='calendar_form' />
<input type='button' onclick="nextDay()" value='NextDAY' />
<script>
function nextDay() {
var example = document.getElementById('calendar_form').value;
var date = new Date();
var parts = example.split('.');
date.setFullYear(parts[2], parts[0], parts[1]);
date.setTime(date.getTime() + 86400000);
var dateDay = date.getDate();
var dateMonth = date.getMonth();
var dateYear = date.getFullYear();
document.getElementById("calendar_form").value = dateDay + "." + dateMonth + "." + dateYear;
}
</script>
What Im trying to achive is a set of functions which allow me to change date (dd.MM.yyyy) shown in textfield (as next/prev day, next/prev week, next/prev month). If you can point me in any good direction to look for an answer, Id be grateful.

You swapped month/year because the order is year-month-date. I'd recommend new Date rather than setFullYear as well. You could do: http://jsfiddle.net/nQtQP/.
var date = new Date(parts[2], parts[1], parts[0]);

Related

Minimum start date of datepicker

Sorry to do this guys, I have zero experience with Java or wix code, you would expect something as basic as what I am after would have a default in built setting for.
I have a date picker on a form, I want the minimum to be now()+3 - but have no idea where to start.
I did read a post that offered the below code:
$w.onReady(function () {
let today = new Date();
let startDate = new Date(today);
startDate.setDate(startDate.getDate() + 3);
let endDate = new Date(today);
endDate.setMonth(endDate.getMonth() + 1); // End Date +1 month from today //
// Set min & max dates //
$w("#datePicker1").minDate = startDate;
$w("#datePicker1").maxDate = endDate;
});
});
However I appear to get this error message:
public/pages/qepnx.js/qepnx.js: Unexpected token (15:0)
Any help would be greatly appreciated.
Thanks!
Okay after much pain I've figured it out, it turns out JS is a lot less forgiving than languages like VBA, { or ( incorrectly placed parenthesis will throw the whole code out which I learnt the hard way.
Code as below:
$w.onReady( function() {
var badDate1 = new Date();
badDate1.setDate(badDate1.getDate());
var badDate2 = new Date();
badDate2.setDate(badDate2.getDate() + 1);
var badDate3 = new Date();
badDate3.setDate(badDate3.getDate() + 2);
$w("#datePicker1").disabledDates = [badDate1, badDate2, badDate3];
})
I'm sure someone who actually knows JS will be appalled by this, but it's simple code and does the job
Thanks

Variable from form to Javascript

I try to get variable from a form to add dates to current date. I get the number, but the outcome date is way off. If I hardcore the number it works fine and when I try to display the variable it gets right.
Why does it not display the right date?
$("input[name='newDate']").on('ifClicked',function addDays(date,days) {
var today = new Date();
var numberOfDaysToAdd = this.value;
today.setDate(today.getDate() + (numberOfDaysToAdd));
alert(today +'value: ' + numberOfDaysToAdd);
});
I try to get variable from a form to add dates to current date. I get the number, but the outcome date is way off
Use parseInt();. I think you are trying to add a string value to the date and it is messing up. Parsing it to integer might help.
parseInt("12",10) if your input value is 12.
So use the below code.
var today = new Date();
var numberOfDaysToAdd = parseInt(this.value,10); //parse to Integer
today.setDate(today.getDate() + (numberOfDaysToAdd));
alert(today + 'value: ' + numberOfDaysToAdd);

JavaScript - toDateString()

Image link is a code that increments the current date by 12 months.
Although I am getting the new date increased by 12 months but when I convert the new date to string by using toDateString() I don't get the output.
Please help me smart JavaScript people :)
Use this function. At least this is the way i give format to my dates in my apps. By the way this is the way stack comunity is telling you to put your code in your question.
function getFormattedDate(date) {
var aux = new Date(parseInt(date.substr(6)));
var year = aux.getFullYear();
var month = (1 + aux.getMonth()).toString();
var day = aux.getDate().toString();
return day + '-' + month + '-' + year;
}
Hope this helps!

pre-populating date input field with Javascript

I am trying to prepopulate a date into an html "date" input field, but it ignores the values I try to pass:
<html>
...
<input id='date' type='date'>
...
</html>
<script>
...
var myDate = new Date();
$("#date").val(myDate);
...
I have also tried passing the date object as a string
var myDate = new Date().toDateString();
$("#date").val(myDate);
When I open the form, the date field is blank. If I eliminate the type="date" tag, the value shows up as a string, but then I don't have access to the datepicker. How do I pre-populate a date input and still have use of the datepicker? I'm stumped.
Thanks.
It must be set in ISO-format.
(function () {
var date = new Date().toISOString().substring(0, 10),
field = document.querySelector('#date');
field.value = date;
console.log(field.value);
})()
http://jsfiddle.net/GZ46K/
Why Not to Use toISOString()
The <input type='date'> field takes a value in ISO8601 format (reference), but you should not use the Date.prototype.toISOString() function for its value because, before outputting an ISO8601 string, it converts/represents the date/time to UTC standard time (read: changes the time zone) (reference). Unless you happen to be working in or want that time standard, you will introduce a bug where your date will sometimes, but not always, change.
Populate HTML5 Date Input from Date Object w/o Time Zone Change
The only reliable way to get a proper input value for <input type='date'> without messing with the time zone that I've seen is to manually use the date component getters. We pad each component according to the HTML date format specification (reference):
let d = new Date();
let datestring = d.getFullYear().toString().padStart(4, '0') + '-' + (d.getMonth()+1).toString().padStart(2, '0') + '-' + d.getDate().toString().padStart(2, '0');
document.getElementById('date').value = datestring;
/* Or if you want to use jQuery...
$('#date').val(datestring);
*/
<input id='date' type='date'>
Populate HTML5 Date & Time Fields from Date Object w/o Time Zone Change
This is beyond the scope of the original question, but for anyone wanting to populate both date & time HTML5 input fields from a Date object, here is what I came up with:
// Returns a 2-member array with date & time strings that can be provided to an
// HTML5 input form field of type date & time respectively. Format will be
// ['2020-12-15', '01:27:36'].
function getHTML5DateTimeStringsFromDate(d) {
// Date string
let ds = d.getFullYear().toString().padStart(4, '0') + '-' + (d.getMonth()+1).toString().padStart(2, '0') + '-' + d.getDate().toString().padStart(2, '0');
// Time string
let ts = d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0') + ':' + d.getSeconds().toString().padStart(2, '0');
// Return them in array
return [ds, ts];
}
// Date object
let d = new Date();
// Get HTML5-ready value strings
let dstrings = getHTML5DateTimeStringsFromDate(d);
// Populate date & time field values
document.getElementById('date').value = dstrings[0]
document.getElementById('time').value = dstrings[1]
/* Or if you want to use jQuery...
$('#date').val(dstrings[0]);
$('#time').val(dstrings[1]);
*/
<input type='date' id='date'>
<input type='time' id='time' step="1">
Thank you j08691. That link was the answer.
To others struggling like me, when they say input is "yyyy-mm-dd" the MEAN it!
You MUST have 4 digits for the year.
You MUST have a dash and no spaces.
You MUST have 2 digits for day and month.
In my example myDate.getMonth for January would only return "1" (actually it returns "0" because for some reason javascript counts months from 0-11). To get this right I had to do the following:
var myDate, day, month, year, date;
myDate = new Date();
day = myDate.getDate();
if (day <10)
day = "0" + day;
month = myDate.getMonth() + 1;
if (month < 10)
month = "0" + month;
year = myDate.getYear();
date = year + "-" + month + "-" + day;
$("#date").val(date);
I hope this helps others not waste hours like I did testing this before October or before the 10th of the month! LOL
Here is an answer based on Robin Drexlers but in local time.
//Get the local date in ISO format
var date = new Date();
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
var datestr = date.toISOString().substring(0, 10);
//Set the field value
var field = document.querySelector('#date');
field.value = datestr;
If it's a datetime field you're modifying (as opposed to just the date) don't forget to add the time T00:00, or change the substring to 16 characters for example:
//Get the local date and time in ISO format
var date = new Date();
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
var datestr = date.toISOString().substring(0, 16);
//Set the field value
var field = document.querySelector('#datetime');
field.value = datestr;
This below code populates the local date . The accepted answer populates UTC date.
var date = new Date();
field = document.querySelector('#date-id');
var day = date.getDate();
if(day<10){ day="0"+day;}
var month = date.getMonth()+1;
if(month<10){ month="0"+month;}
field.value = date.getFullYear()+"-"+month+"-"+day;
I don't have the reputation points to comment on another answer, so I'll just add a new answer. And since I'm adding an answer, I'll give more details than I would've in a comment.
There's an easier way to zero pad than all of the juggling that everyone is doing here.
var date = new Date();
var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day = ('0' + date.getDate()).slice(-2);
var year = date.getFullYear();
var htmlDate = year + '-' + month + '-' + day;
console.log("Date: " + htmlDate);
Today, the output would be
Date: 2020-01-07
The code is building a dynamic string by prepending a quoted zero, then taking the last 2 characters with slice(-2). This way, if the zero makes it 01, the last 2 are 01. If the zero makes it 011, then the last two are 11.
As for the month starting at zero silliness, you can also add 1 dynamically before prepending the zero and everything still works. You just have to do the math operation before turning it into a string.
As a side note, I've noticed that when you update a date field, you have to hide the field before setting the value and show it after setting. I don't do this often enough, so I have to re-struggle each time I need to deal with it. Hopefully this will help someone from the future.
waves to future people

Adobe Pro, PDF form with javascript

I have created a form in Adobe Pro and i have added some JavaScript to it. But i have two problems.
1) Is there a "Document Finished Loading"-action? I have a date field on the form and i would like that it automatically adds todays date into that field when the user opens the document to fill in the form fields.
2) The date method that i am using doesn't work properly, i have this code:
var dt = new Date();
var day = dt.getDate();
var month = dt.getMonth();
var year = dt.getFullYear();
var dagensdatum = year + "-" + month + "-" + day;
var datum = this.getField("Datum");
datum.value = dagensdatum;
datum = this.getField("Datum2");
datum.value = dagensdatum;
datum = this.getField("Datum3");
datum.value = dagensdatum;
But when i run this, it prints out 11th of April and not todays date. Any ideas?
for your 2nd question I don't know why the date is not correct, but at least, you should do this :
var month = dt.getMonth();
month++;
because the getMonth() returns an int between 0 and 11. As for the day, I don't know what could cause the problem.
Edit : Have you checked your own date on your computer? Because if it is wrong it will be displayed uncorrectly in your browser. I guess you should have a date of 11th May in your computer, don't you?

Categories

Resources