Populate fields with dates JS/JQ - javascript

So I have this line:
<input type="date" id="Date1" name='date' data-role='datebox'
data-options='{"dateFormat": "mm/dd/YYYY"}' />
Works as it should, I'm using this.
When I click on that <input> a datepicker will come up and and the user will be able to choose a date with the mm/dd/yyyy format.
However, I want to populate that field, before, let's say onload, window ready, I don't even care, with the date of today.
I'm trying this:
<script type="text/javascript">
today = new Date();
var dateString = today.format("dd/mm/yyyy");
document.getElementById("Date1").innerHTML = dateString;
</script>
And I basically know where the problem is, I'm trying to add a string into a type="date" field; I've also tried, instead of using .innerHTML, .value but still no luck, Not sure how to do it.
Also, keep in mind that I have 3 more fields that have to be populated.
1: - the one that I've already pasted >> current date 2: - current
date +19 weeks 3: - current date +72 weeks 4: - current date +1 week
I don't mind using JQ if needed.

This works:
document.getElementById('Date1').valueAsDate = new Date();
Refer the API here

Your datepicker seems to be able to do what you want: RFTM darn it. It also seems your are not using a regular date input (inspect your date widget you'll see that it is actually a text input). My guess is that your datepicker transforms the date input in a text input when it's initialized.

I actually fixed it with patience and readng a lot.
Here's the code.
This to populate the fields when you open the document:
<script type="text/javascript">
today = new Date();
var dateString = today.format("dd/mm/yyyy");
document.getElementById("Date1").value = dateString;
var dateString18 = new Date(+new Date + 10886400000);
dateString18 = dateString18.format("dd/mm/yyyy");
document.getElementById("Date2").value = dateString18;
var dateString90 = new Date(+new Date + 54432000000);
dateString90 = dateString90.format("dd/mm/yyyy");
document.getElementById("Date3").value = dateString90;
var dateString1 = new Date(+new Date + 604800000);
dateString1 = dateString1.format("dd/mm/yyyy");
document.getElementById("Date4").value = dateString1;
</script>
And this is to calculate the other fields after I change the first one:
function dateChange(fecha) {
var anyo = fecha.substring(0, 4);
var mes = fecha.substring(5, 7);
var dia = fecha.substring(8, 10);
var fechaFormato = dia + "/" + mes + "/" + anyo;
document.getElementById("Date1").value = fechaFormato;
var strDate = fechaFormato;
var dateParts = strDate.split("/");
var dateBuena = new Date(dateParts[2], (dateParts[1] - 1), dateParts[0]);
var dateString18 = new Date(+dateBuena + 10886400000);
dateString18 = dateString18.format("dd/mm/yyyy");
document.getElementById("Date2").value = dateString18;
var dateString90 = new Date(+dateBuena + 54432000000);
dateString90 = dateString90.format("dd/mm/yyyy");
document.getElementById("Date3").value = dateString90;
var dateString1 = new Date(+dateBuena + 604800000);
dateString1 = dateString1.format("dd/mm/yyyy");
document.getElementById("Date4").value = dateString1;
}

Related

I want to store the value of a datePicker in WixCOde

Based on this Supplied Code,
$w.onReady(function () {
//TODO: write your page related code here...
const startFromDays = 4;
const endAtMonths = 9;
const today = new Date();
let startDate = new Date(today);
let endDate = new Date(today);
startDate.setDate(startDate.getDate() + startFromDays);
endDate.setMonth(endDate.getMonth() + endAtMonths);
$w.onReady(function () {
$w("#datePicker1").minDate = startDate;
$w("#datePicker2").maxDate = endDate;
});
});
I need help to find the difference between the endDate and the startDate and output it as Text. Knowing the fact that some start dates can be of the Eg: 26th of Feb and end Date can fall on 3rd March.
This Code is been run on Wixcode, where the dates are used as a Date-picker user input. Thank you.
Start by getting the difference between the two dates using something like what is described in this post.
Then, use that number to populate a text field that you've added to your page.
So, assuming you have a datediff() function declared:
const diff = datediff(startDate, endDate);
$w("#text1").text = diff.toString();

Jquery date difference

I have this code for calculating date difference (without weekends) between two input fields, and printing the difference in days in a third text box. The date format is yy-mm-dd (because of mysql).
<script type="text/javascript">
$("#vazi_od, #vazi_do").change(function() {
var d1 = $("#vazi_od").val();
var d2 = $("#vazi_do").val();
var minutes = 1000*60;
var hours = minutes*60;
var day = hours*24;
var vazi_od1 = getDateFromFormat(d1, "yy-mm-dd");
var vazi_do1 = getDateFromFormat(d2, "yy-mm-dd");
var newvazi_od=new Date();
newvazi_od.setFullYear(vazi_od1.getYear(),vazi_od1.getMonth(),vazi_od1.getDay());
var newvazi_do=new Date();
newvazi_do.setFullYear(vazi_do1.getYear(),vazi_do1.getMonth(),vazi_do1.getDay());
var days = calcBusinessDays(newvazi_od,newvazi_do);
if(days>0)
{ $("#razlika").val(days);}
else
{ $("#razlika").val(0);}
});
</script>
But, when i pick the start and the end date, nothing happens in the field that should show the difference in days... Any help?
You are using setFullYear to pass all the date params...
setFullYear is just for setting the year part of the date..
Use
var newvazi_od=new Date(vazi_od1.getYear(),vazi_od1.getMonth(),vazi_od1.getDay());
var var newvazi_do=new Date(vazi_do1.getYear(),vazi_do1.getMonth(),vazi_do1.getDay());
Also to use getDateFromFormat and calcBusinessDays you need to include the date library from the javascript toolbox

How to set the ios 5 HTML5 input of type="date" to the current date & time?

I tried the obvious and does not work...
var dtel = document.getElementById("element-id");
dtel.value = new Date();
It needs a string but what is the syntax?
After many trials and errors I found that the following works:
var dtel = document.getElementById("element-id");
var dt = new Date();
dtel.value = dt.toISOString();

I want to pass back a variable from a promt box to the date string

I want to pass back a variable from a promt box to the date string. So if a person adds 5 days the date will bump up 5 days. I am new to javascript and this is my first test script any resources you could list in your answer I will read up on.
<html>
<head>
<script type="text/javascript">
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var dateString = "Today's Date " + month + "/" + day + "/" + year;
function loadDate(){
document.getElementById('dateSpan').innerHTML = dateString;
}
</script>
</head>
<body onload='loadDate()'>
<form name=myform>
<span id='dateSpan'></span><input type=button value="add days" onclick="var name=prompt('How many days do you want to add?','5 or 6')"/>
</form>
</body>
Something like the following should help. Note that it doesn't do any validation or checking (is the date string correct in the element? did the user enter a number?) so you'll need to add all that and deal with errors.
function updateDate(el) {
// get the text of the element
var text = el.innerHTML;
// Convert to a date object
var b = text.split('-');
var date = new Date(b[0], b[1] - 1, b[2]);
// Ask for days to add
var toAdd = prompt('How many days to add?');
// Adjust date
date.setDate(date.getDate() + Number(toAdd));
// Write date to page
el.innerHTML = date.getFullYear() + '-' +
addZ(date.getMonth() + 1) + '-' +
addZ(date.getDate());
// Helper just for this function
function addZ(n) {
return (n < 10? '0' : '') + n;
}
}
And some related HTML:
<span id="dateSpan" onclick="updateDate(this)">2012-05-22</span>
Note also that innerHTML gets all the HTML content too, but for something like this it shoudl be fine. If you need just the text, then use either textContent or innerText based on a feature test for which is supported.
Edit
Added a snipped of HTML to make it work. Note that the date is an ISO8601 short form: year-month-day.
I'd go with using the date.js lib.
This makes dates a lot easier to work with and it's well documented too.
http://www.datejs.com/
Then once you have the number of days to add you can easily bump the date up.
//Assuming Xdays is a var with your number of days.
var today = Date.today();
var past = Date.today().add(-Xdays).days();
var future = Date.today().add(Xdays).days();
//format to a string
Date.today().toString("d-MMM-yyyy"); // 19-Nov-2007

Bookmark with date in the URL

I use Google Analytics, and the first thing I want to check every day is the current day's statistics. But there's no way to bookmark the current day.
The URL for any given day is: https://www.google.com/analytics/reporting/dashboard?id=XXXXXXX&pdr=20110921-20110921
You can see a date range at the end of the URL. 20110921 meaning 9-21, 2011.
How can I write a little javascript bookmarklet for Firefox to change the URL to the current date depending on what day I click on it?
Try this - it uses a Date object to get the date:
var date = new Date();
var str = "";
str += date.getFullYear();
str += pad2(date.getMonth() + 1);
str += pad2(date.getDate());
function pad2(n) {
var str = String(n);
if(str.length < 2)
str = "0" + str;
return str;
}
location.href = "https://www.google.com/analytics/reporting/dashboard?id=XXXXXXX&pdr="+str+"-"+str;
Bookmarklet:
javascript:(function(){function d(a){a=String(a);a.length<2&&(a="0"+a);return a}var c=new Date,b="";b+=c.getFullYear();b+=d(c.getMonth()+1);b+=d(c.getDate());location.href="https://www.google.com/analytics/reporting/dashboard?id=XXXXXXX&pdr="+b+"-"+b})();
JavaScript has date methods that can individually give the parts of a date, but .toISOString() might perhaps work for your application most concisely. Very little string manipulation would have to be performed on the result to get the UTC date in the correct format. For example:
javascript:
d = new Date().toISOString().slice(0, 10).replace(/-/g, '');
location = "https://www.google.com/analytics/reporting/dashboard?id=XXXXXXX&pdr="
+ d + "-" + d;
To build on the answer by #PleaseStand - Firefox even has a non-standard Date.toDateLocale() function. So the whole thing can be simplified even further:
javascript:void(location.href = "https://www.google.com/analytics/reporting/dashboard?id=XXXXXXX&pdr=" +
new Date().toLocaleFormat("%Y%m%d-%Y%m%d"))
Customize this code below with your Google Analytics ID, timezone offset, and other desired parameters.
Use a site like this to convert JavaScript to a bookmarklet.
Rejoice.
var gaID = YOUR_ID;
var hourOffset = 8;
var rowCount = 50;
var utcDate = new Date(new Date().toUTCString());
utcDate.setHours(utcDate.getHours() - hourOffset);
var localDate = new Date(utcDate);
var todayDate = localDate.toISOString().split("T")[0].replace(/-/g, "");
location.href = "https://analytics.google.com/analytics/web/#/report/advertising-adwords-keywords/" + gaID +"/_u.date00=" + todayDate + "&_u.date01=" + todayDate + "&explorer-table.plotKeys=%5B%5D&explorer-table.rowCount=" + rowCount;
I know this is a really old thread, but it is still relevant.
I found that if you set up your report using todays date, then edit the URL and use a future date, it will default to the current date's statistics.
For example, I use this:
https://analytics.google.com/analytics/web/#/dashboard/xxxxxxxxxxxxxxxx/xxxxxxxxxxxxxxxx/_u.date00=20221130&_u.date01=20221130/
The date codes are both the same date 2 years in the future. This causes analytics to use show the current dates stats.

Categories