How to Get Date Value from One Date Input Field and Put It to Other Date Field Using JavaScript

How to get date value from one date input field and put it to other date field using javascript?

First Here's my code, and my explanation will follow:

HTML:

<form>
   <input type='date' id='field1'>
   <input type='submit' value='Submit' onclick="setDate()">    
</form>
   <input type='date' id='field2'>

Javascript:

function setDate(){
var x = document.getElementById('field1').value; //"Pulling" the value entered 
document.getElementById('field2').value= x; // Replacing the value at field2 with the defined value x

Explanation:

So what's happening here is, we first placed an onclick function in the submit field, meaning it will only run when the user clicks submit. It will call the function "setDate()". setDate() has 2 lines of code, the first will search the document for an id "field1" and gets it's value and saves it as variable x. The second takes that saved value and places it at a place with id "field2"

Hope this helps, and don't forget to "check" the right answer!

how to set date to input field using another date input field?

You can do this with jQuery and change(). In change, You can get the value of fromDate and with Date object create new value for the toDate input.

$(function() {
    $('#fromDate').change(function() {
        var fromDateValue = $(this).val();
        var toDateValue = new Date();

        // some operations

        $('#toDate').val(yourToDate);
    });
})

You can add 6 days with this:

var today = new Date();
var todayplus6days= new Date(today);
todayplus6days.setDate(today.getDate()+6);

UPDATE:

jsFiddle: http://jsfiddle.net/8dx0sLey/1/

$(function() {
    $('#fromDate').change(function() {
        var fromDateValue = $(this).val();
        var toDateValue = new Date(fromDateValue);

        toDateValue.setDate(toDateValue.getDate()+6);

        var sDate = toDateValue.getFullYear() + '-' + (toDateValue.getMonth()+1) + '-' + toDateValue.getDate();

        $('#toDate').val(sDate);
    });
})

JavaScript: Get the value of a date input field using Jquery

When var end = $('#datetimepicker2').val(); gets executed, the <input id="datepicker2"> element has no value.

It remains empty because you have not defined an event handler to update it when the value has changed. The following should be a working example of what you are trying accomplish.

<table>
    <tr>
        <td><strong>Date Time Picker:</strong></td>
        <td>
            <input id="datetimepicker2" class="datetimepicker" value=""/>
        <td>
        <td><button id="sub">Submit</button></td>
    </tr>
</table>

<script>
    // If the datepicker2 input is empty, this will be empty, even after you change it.
    var end = $('#datetimepicker2').val();
    $('#datetimepicker2').datetimepicker();

    // This will update the "end" variable as it changes.
    $(document).on('change', '#datetimepicker2', function() {
        end = $(this).val();
    });

    $(document).on('click', '#sub', function () {
        alert(end);
    });
</script>

ps: I changed the $(x).on(event,function) to $(document).on(event,element,function) because I've had better results with this as the DOM is manipulated over time.

How to extract values from HTML <input type="date"> using jQuery

Firstly you need to create a Date object from input element value. And then you will be able to get day, month and year from this object.

$('#submit').on('click', function(){
  var date = new Date($('#date-input').val());
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var year = date.getFullYear();
  alert([day, month, year].join('/'));
});

Working example: https://jsfiddle.net/8poLtqvp/

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

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);
    }

Set HTML5 Date field Min value based on another HTML5 Date Value

Change fdate to tdate

document.getElementById("fDate").setAttribute("min", minToDate);

to

document.getElementById("tDate").setAttribute("min", minToDate);

var today = new Date();var dd = today.getDate();var mm = today.getMonth() + 1; //January is 0!var yyyy = today.getFullYear();
if (dd < 10) {  dd = '0' + dd}
if (mm < 10) {  mm = '0' + mm}
today = yyyy + '-' + mm + '-' + dd;document.getElementById("fDate").setAttribute("min", today);
function myFunction() {  var minToDate = document.getElementById("fDate").value;  document.getElementById("tDate").setAttribute("min", minToDate);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><input type="date" id="fDate" onBlur="myFunction()"><input type="date" id="tDate">