We Keep Coding

WP contact form 7: get current date value to populate an input field

Using contact form 7 on my website, would like to retrieve the form submission date as an input value to use in "Jetpack CRM" for a custom field. I want to avoid that the user has to select the date with a date picker.
Until now i only managed to get the current date value with [hidden today_date _date] that i can use in email templates, but this is not the thing i need.
What i tried so far (after reading How do I change the value of text field in wordpress contact form 7 using javascript):
In contact form 7, i added the field <label> [text submission_date id:submissiondate ""] </label>, hoping that the javascript would fill out the empty quotes with the dateTime value.
With the plugin "WP Headers and Footers" i added the script
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;
document.getElementById("submissiondate").value = dateTime;
I tried the script in the header, in the body and in the footer.
The result is always: an empty form field and a js error:
Uncaught TypeError: document.getElementById(...) is null
Can anybody help me with this?
EDIT:
Searching for help in this question i got the advice to add [hidden default:today_date _date id:submissiondate ] to the form and enter the js in the footer, like this:
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;
// this will set value for input with id submissiondate
jQuery('input#submissiondate').val(dateTime);
// check if value exists
var new_value = jQuery('#submissiondate').val();
// display in console
console.log('current date time = ' + new_value);
Now the time value finds its way into the confirmation email, but still not into the jetpack crm custom field.
Maybe the problem is that this is a hidden field? I tried alternatively to add [text default:today_date _date id:submissiondate ] to the form to create another field in the hope that this can be used for a custom field in jetpack crm but this does not work either – the custom field shows no value.
Does anybody know how to get this working?

Checking out the stackoverflow page you mentioned, I noticed this:
So the javascript code does not have to be placed on the contact form editor. Rather, it should be place on the page where the contact form short code is located: below is an example of the short code
https://stackoverflow.com/a/50333080/11017029
Maybe you didn't put your JavaScript code on the page where the contact form short code is located.

SOLUTION FOUND – a big shoutout to Santosh # https://www.codeable.io/!
The line [text default:today_date _date id:submissiondate ] in the form was wrong – the correct line is [text submissiondate id:submissiondate].
Summary: With the javascript in the page footer
setInterval(add_date, 1000);
function add_date() {
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;
// this will set value for input with id submissiondate
jQuery('input#submissiondate').val(dateTime);
// check if value exists
var new_value = jQuery('#submissiondate').val();
// display in console
console.log('current date time = ' + new_value);
}
and the correct field [text submissiondate id:submissiondate] in the form template (hidden on the front end with CSS), i can use the field value in jetpack crm to populate a custom field and i can use it in a confirmation email as well. :-)
For those who prefer 2-digit-dates, the script can be edited like this:
setInterval(add_date, 1000);
function add_date() {
var today = new Date();
currentMonth = today.getMonth()+1;
currentMonth = ("0" + currentMonth).slice(-2);
currentDay = today.getDate();
currentDay = ("0" + currentDay).slice(-2);
currentHour = today.getHours();
currentHour = ("0" + currentHour).slice(-2);
currentMinute = today.getMinutes();
currentMinute = ("0" + currentMinute).slice(-2);
currentSecond = today.getSeconds();
currentSecond = ("0" + currentSecond).slice(-2);
var date = today.getFullYear()+'-'+(currentMonth)+'-'+(currentDay);
var time = (currentHour) + ":" + (currentMinute) + ":" + (currentSecond);
var dateTime = date+' '+time;
// this will set value for input with id buchung-versanddatum
jQuery('input#buchung-versanddatum').val(dateTime);
// check if value exists
var new_value = jQuery('#buchung-versanddatum').val();
// display in console
console.log('current date time = ' + new_value);
}

angularjs timestamp to datetime format string in input field

I am saving datetime in timestamp string using the following:
date_default_timezone_set('Europe/London');
$bdatetime = "31-03-2016 21:52";
$date = new DateTime($bdatetime);
$bdatetimeTS = $date->getTimestamp();
which is saving fine. And I can fetch that timestamp and convert it back to its original format using following in angular js:
<td>{{item.bdatetime * 1000 | date:'dd-MM-yy'}}</td>
which is displaying fine all the list of records.
Now I need to edit individual records, in edit form, I have the following field:
<input type="text" ng-model="bdatetime" value="{{bdatetime * 1000 | date:'dd-MM-yy'}}" name="bdatetime" id="datetimepicker" required/>
in JS and binding it using the following:
$scope.bdatetime = data[0].bdatetime;
which is showing timestamp in input field rather then showing time date in format in the specific format.
I know how to convert timestamp to datetime format for non-bindable.
How can I do this for bindable input field?
This is from string to time stamp but I kind of need a reverse solution from timestamp to input fields.

var timestamp = data[0].bdatetime;
var date = new Date(timestamp * 1000);
var datevalues = ('0' + date.getDate()).slice(-2) + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + date.getFullYear() + ' ' + date.getHours() + ':' + date.getMinutes();
$scope.bdatetime = datevalues;

ng-model and value can't be used together. You should use https://github.com/angular-ui/ui-date or write custom directive that handles ngModel controller.

Change date format who is stored in text field

I have a common date field having a displayDD-MM-YYYY but the real value stored in database is YYYY-MM-DD. The problem is this value is also transmitted to a remote server inside a simple text field (having readonly properties) and I would like interact on this field for change his display in DD-MM-YYYY.
I don't want touch something in database structure for change the way on how the date is stored. I precise I don't have access to html of this remote server but I'm allowed to modify some field by putting code in JS file.
I looked here and in some forum but I don't find a solution and due to my poor javascript knowledge I'm stuck. Thank.

Use inbuilt javascript functions to build the format you want. PArse the string in to a date object and use the following functions to create your desired format
getDate() -> to get date
getMonth() -> to get month
getFullYear() -> to get year
Example
//var birth_date = document.getElementById('birth_date');
//use birth_date instead of hard coded date
//var day = new Date(Date.parse(birth_date));
var day = new Date(Date.parse("2013-09-02"));
alert(day.getDate() + "-" + day.getMonth() + "-" + day.getFullYear());
//set value
document.getElementById('birth_date').value = day.getDate() + "-" + day.getMonth() + "-" + day.getFullYear();
JSFIDDLE

Say you have a string var s = '1989-05-06';. You can get the year, month and day separately like so:
var my_date = s.split('-');
var year = my_date[0];
var month = my_date[1];
var day = my_date[2];
Then, you can display the string below (or organize the day, month and year in any format you would like):
var display_str = '' + day + '-' + month + '-' + year;

You can catch the form submit event and change the value before it is sent:
Let's say you have a form #myForm:
var form = document.getElementById('myForm');
To catch submission:
try {
form.addEventListener("submit", changeValue, false);
} catch(e) {
form.attachEvent("onsubmit", changeValue); //Internet Explorer 8-
}
Now you can change the desired value inplace.
function changeValue(){
var field = document.getElementById('idOfField');
field.value = field.value.split('-').reverse().join('-');
}

well, we can do that using simple javascript function.
we just need to pass server date(YYYY-MM-DD) and it wll return expected date (DD-MM-YYYY) format.
function convertDate(serverDate) {
var dateCollection = serverDate.match(/\d+/g),
year = dateCollection[0],
month = dateCollection[1],
day = dateCollection[2];
return day + '-' + month + '-' + year;
}
Example:-
convertDate('2013-09-02'); // (YYYY-MM-DD) format
output:-
'02-09-2013' //(DD-MM-YYYY) format
Hope this will help you...

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

Disallow dates with JavaScript using Drop Down boxes for MM, DD and YYYY

I'm working on a mobile website and have drop down boxes for the Month, Date and Year. I'm needing something disallow them to continue to the next step if they chose a past date. I've seen calendar controls that do this but I'm not wanting to use a calendar control. I've spent the better part of the day looking for something but haven't been able to find anything. Does anyone have something like this or know of something that maybe I'm missing?
function date_check()
{
var trans_date = document.form1.selectmonth.options[document.form1.selectmonth.selectedIndex].value + "-" + document.form1.selectday.options[document.form1.selectday.selectedIndex].value + "-" + document.form1.selectyear[document.form1.selectyear.selectedIndex].value;
var d = new Date();
var today = (d.getMonth()+1) + "-" + d.getDate() + "-" + d.getFullYear();
if(new Date(trans_date) < new Date(today)){
alert("The shipping date cannot be in the past, please enter a valid shipping date.");
return false;
}
}
This is what I came up with but it's not working. Am I missing something else? I'll leave it selected as January 1 2011 and it doesnt throw the alert.

Simply get the selected values from the elements in question, concatenate the values with "-" or "/" and use the Date constructor to create a date object - compare that with the current date - if it is less than the current date, then fail.
// Inside your form's validation handler ...
var year, month, day, provided_date, now = new Date();
// Remove the hours, minutes and seconds from the now timestamp
now = new Date(now.getYear(), now.getMonth(), now.getDate());
// Get your year select - document.getElementById
// or any other method you have available
year = your_year_select.options[your_year_select.selectedIndex].value;
// and so on for month and day
// Remember, month is 0 indexed in JavaScript (January is month 0)
// so make sure your dropdown values take account of this.
// Otherwise, use month - 1 here.
provided_date = new Date(year, month, day);
// if all you need to do is validate the date
return provided_date >= now;

It sounds like you just need a validation function that creates a new date from the selected inputs and compares it to the current date. Something like:
function isFutureDate(year, month, day) {
return (Date.parse("" + year + "-" + month + "-" + day)) - new Date() > 0;
}
Except that you'll probably need to account for the timezone shift.