1

I have the following in a form:

Start Date and Time: <input type="text" name="startDate" id="startDate" placeholder="July 21, 1983 13:15:00"><br />
End Date and Time: <input type="text" name="endDate" id="endDate" placeholder="July 21, 1983 14:15:00">

in my JavaScript I have:

var startDate = new Date(document.getElementById("startDate").value);
var endDate = new Date(document.getElementById("endDate").value;);

but this is not working.

How do I get the information from my form into the variable in the format July 21, 1983 13:15:00 ?

Improve this question
2
  • 1
    do you want the value someone types in to be formatted into the JavaScript Date object format? Commented Jan 25, 2014 at 19:12
  • Ilan Biala - Yes correct Commented Jan 25, 2014 at 19:28

4 Answers 4

Reset to default
2

The placeholder is an attribute and can not be taken by the value property of the element. You need to use the getAttribute method:

    var startDate = document.getElementById("startDate").getAttribute("placeholder");

This will give you the date time value. I have created a demo in jsFiddle using your example code.

If you want to take the value when the form is submitted using JavaScript, i suggest you to use jQuery. A possible solution could look like this:

<form action="javascript:alert('test');">
    <input type="text" name="startDate" id="startDate" placeholder="July 21, 1983 13:15:00">
    <br/>
    <input type="submit" value="show value" />
 </form>

And the form submit handler that parses the entered value, check if it is a correct date and shows the year:

var startDate = document.getElementById("startDate").getAttribute("placeholder");
// alert(startDate);

// handle form request
$( "form" ).submit(function(event) {
    // get the entered value
    var value = $("#startDate").val();
    // show entered value or inform user to enter something
    var message = "Please enter something.";
    if (value) {
        // is it a date?
        var date = Date.parse(value);
        if (!isNaN(date)) {
            // yes ...
            message = "You entered the year " + (new Date(date)).getFullYear();
        }
        else {
            // no :(
            message = "Please enter a correct date like 2014-01-01";
        }
    }
    alert(message);
    // do not submit the form for the test
    event.preventDefault();
});

I have updated the jsFiddle demo, so that the entered value is shown when the user submits the form.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I don't think he wants the placeholder, I think he wants the real value the user types in...he probably needs an event listener.
1

maybe this page help you

http://blog.stevenlevithan.com/archives/date-time-format

also you can search this word "JavaScript date format" To get more result

Improve this answer

Comments

0

For inputs, the value does not pull from placeholder. It pulls from the value attribute.

<input type="text" name="startDate" id="startDate" value="July 21, 1983 13:15:00">
Improve this answer

Comments

0

If you want to get the values after they have typed them, then using the .on() method in jQuery or using its JavaScript counterpart is the way to go. I'll be using jQuery so don't forget to include that in your scripts that you are loading if you decide to use the code.

Just in case you want to play around with any of the code, this is my codepen pen.

The magic:

$('input[type="date"]').on('blur', function() {
    var startingDate = $('#startingDate').val();
    var endingDate = $('#endingDate').val();
    if (startingDate !== '') {
        startingDate = new Date(startingDate.replace(/-/g, '/'));
        $('#startingDateText').text(startingDate);
    }
    if (endingDate !== '') {
        endingDate = new Date(endingDate.replace(/-/g, '/'));
        $('#endingDateText').text(endingDate);
    }
});

I've set up a listener using jQuery's .on('blur', function()) for an input with type="date", which you may want to change if you have more than those two. You can always attach the listener to a button too if you want. One of the tricky parts of getting the date formatted properly as a JavaScript Date object and making it easy to work with is switching the - in the date from the input to / because otherwise there are some quirks.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.