CODEWITHSUNDEEP
javascript
user2110655
user2110655

Reputation:

HTML form and Javascript issue

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 ?

Upvotes: 1

Views: 96

Answers (4)

Ilan Biala
Ilan Biala

Reputation: 3417

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.

Upvotes: 0

keenthinker
keenthinker

Reputation: 7820

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.

Upvotes: 2

dthree
dthree

Reputation: 20730

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">

Upvotes: 0

Death Programmer
Death Programmer

Reputation: 896

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

Upvotes: 1

Related Questions