Need to store html date input in JS var










1















I need help with JS and html. I need to store <input type = "date" id = "date"> in JS var. If you try to store the date in simple var and try to print it instead of your chosen date you get printed "undefined" :



$("#printDate").click(function()
var dateVar = ($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
);


If you try to store the date in the dateVar using new Date() you get printed "Invalid date": enter image description here



$("#printDate").click(function()
var dateVar = new Date($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
);


Thank you for any kind of help!



upd: full page code:



 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
</head>
<body>

<div id="results"></div>

<input type="date" id = "dateInput">
<button id = "printDate">PrintDate</button>

<script>
$("#printDate").click(function()
var dateVar = new Date($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
);
</script>
</body>
</html>









share|improve this question



















  • 2





    Can you please paste full snippet of what's not working for you? jsfiddle.net/92w0yjtk it looks perfectly fine

    – Sgoldy
    Nov 14 '18 at 14:05















1















I need help with JS and html. I need to store <input type = "date" id = "date"> in JS var. If you try to store the date in simple var and try to print it instead of your chosen date you get printed "undefined" :



$("#printDate").click(function()
var dateVar = ($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
);


If you try to store the date in the dateVar using new Date() you get printed "Invalid date": enter image description here



$("#printDate").click(function()
var dateVar = new Date($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
);


Thank you for any kind of help!



upd: full page code:



 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
</head>
<body>

<div id="results"></div>

<input type="date" id = "dateInput">
<button id = "printDate">PrintDate</button>

<script>
$("#printDate").click(function()
var dateVar = new Date($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
);
</script>
</body>
</html>









share|improve this question



















  • 2





    Can you please paste full snippet of what's not working for you? jsfiddle.net/92w0yjtk it looks perfectly fine

    – Sgoldy
    Nov 14 '18 at 14:05













1












1








1








I need help with JS and html. I need to store <input type = "date" id = "date"> in JS var. If you try to store the date in simple var and try to print it instead of your chosen date you get printed "undefined" :



$("#printDate").click(function()
var dateVar = ($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
);


If you try to store the date in the dateVar using new Date() you get printed "Invalid date": enter image description here



$("#printDate").click(function()
var dateVar = new Date($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
);


Thank you for any kind of help!



upd: full page code:



 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
</head>
<body>

<div id="results"></div>

<input type="date" id = "dateInput">
<button id = "printDate">PrintDate</button>

<script>
$("#printDate").click(function()
var dateVar = new Date($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
);
</script>
</body>
</html>









share|improve this question
















I need help with JS and html. I need to store <input type = "date" id = "date"> in JS var. If you try to store the date in simple var and try to print it instead of your chosen date you get printed "undefined" :



$("#printDate").click(function()
var dateVar = ($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
);


If you try to store the date in the dateVar using new Date() you get printed "Invalid date": enter image description here



$("#printDate").click(function()
var dateVar = new Date($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
);


Thank you for any kind of help!



upd: full page code:



 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
</head>
<body>

<div id="results"></div>

<input type="date" id = "dateInput">
<button id = "printDate">PrintDate</button>

<script>
$("#printDate").click(function()
var dateVar = new Date($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
);
</script>
</body>
</html>






javascript html






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 14 '18 at 14:20







Keetch

















asked Nov 14 '18 at 13:59









KeetchKeetch

255




255







  • 2





    Can you please paste full snippet of what's not working for you? jsfiddle.net/92w0yjtk it looks perfectly fine

    – Sgoldy
    Nov 14 '18 at 14:05












  • 2





    Can you please paste full snippet of what's not working for you? jsfiddle.net/92w0yjtk it looks perfectly fine

    – Sgoldy
    Nov 14 '18 at 14:05







2




2





Can you please paste full snippet of what's not working for you? jsfiddle.net/92w0yjtk it looks perfectly fine

– Sgoldy
Nov 14 '18 at 14:05





Can you please paste full snippet of what's not working for you? jsfiddle.net/92w0yjtk it looks perfectly fine

– Sgoldy
Nov 14 '18 at 14:05












2 Answers
2






active

oldest

votes


















3

















$("#printDate").click(function()
var dateVar = new Date($("#dateInput").val());
$("#results").append("<p>" + dateVar + "</p>")
);

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
</head>
<body>

<div id="results"></div>

<input type="date" id = "dateInput">
<button id = "printDate">PrintDate</button>

</body>
</html>





The only problem with your code is you are targetting wrong id i.e $("#date") instead of $("#dateInput")






share|improve this answer























  • Such a shame :D

    – Keetch
    Nov 14 '18 at 14:28











  • @Keetch don't worry this happens. :P

    – Zainul Abideen
    Nov 14 '18 at 14:29


















0















<div id="results"></div>

<input type="date" id="dateInput">
<button id="printDate">PrintDate</button>

<script>
$("#printDate").click(function()
var dateVar = new Date($("#dateInput").val());
$("#results").append("<p>" + dateVar + "</p>")
);
</script>



You have a typing error.






share|improve this answer






















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53301970%2fneed-to-store-html-date-input-in-js-var%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    3

















    $("#printDate").click(function()
    var dateVar = new Date($("#dateInput").val());
    $("#results").append("<p>" + dateVar + "</p>")
    );

     <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
    </head>
    <body>

    <div id="results"></div>

    <input type="date" id = "dateInput">
    <button id = "printDate">PrintDate</button>

    </body>
    </html>





    The only problem with your code is you are targetting wrong id i.e $("#date") instead of $("#dateInput")






    share|improve this answer























    • Such a shame :D

      – Keetch
      Nov 14 '18 at 14:28











    • @Keetch don't worry this happens. :P

      – Zainul Abideen
      Nov 14 '18 at 14:29















    3

















    $("#printDate").click(function()
    var dateVar = new Date($("#dateInput").val());
    $("#results").append("<p>" + dateVar + "</p>")
    );

     <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
    </head>
    <body>

    <div id="results"></div>

    <input type="date" id = "dateInput">
    <button id = "printDate">PrintDate</button>

    </body>
    </html>





    The only problem with your code is you are targetting wrong id i.e $("#date") instead of $("#dateInput")






    share|improve this answer























    • Such a shame :D

      – Keetch
      Nov 14 '18 at 14:28











    • @Keetch don't worry this happens. :P

      – Zainul Abideen
      Nov 14 '18 at 14:29













    3












    3








    3










    $("#printDate").click(function()
    var dateVar = new Date($("#dateInput").val());
    $("#results").append("<p>" + dateVar + "</p>")
    );

     <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
    </head>
    <body>

    <div id="results"></div>

    <input type="date" id = "dateInput">
    <button id = "printDate">PrintDate</button>

    </body>
    </html>





    The only problem with your code is you are targetting wrong id i.e $("#date") instead of $("#dateInput")






    share|improve this answer
















    $("#printDate").click(function()
    var dateVar = new Date($("#dateInput").val());
    $("#results").append("<p>" + dateVar + "</p>")
    );

     <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
    </head>
    <body>

    <div id="results"></div>

    <input type="date" id = "dateInput">
    <button id = "printDate">PrintDate</button>

    </body>
    </html>





    The only problem with your code is you are targetting wrong id i.e $("#date") instead of $("#dateInput")






    $("#printDate").click(function()
    var dateVar = new Date($("#dateInput").val());
    $("#results").append("<p>" + dateVar + "</p>")
    );

     <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
    </head>
    <body>

    <div id="results"></div>

    <input type="date" id = "dateInput">
    <button id = "printDate">PrintDate</button>

    </body>
    </html>





    $("#printDate").click(function()
    var dateVar = new Date($("#dateInput").val());
    $("#results").append("<p>" + dateVar + "</p>")
    );

     <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
    </head>
    <body>

    <div id="results"></div>

    <input type="date" id = "dateInput">
    <button id = "printDate">PrintDate</button>

    </body>
    </html>






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Nov 14 '18 at 14:23









    Zainul AbideenZainul Abideen

    1,166315




    1,166315












    • Such a shame :D

      – Keetch
      Nov 14 '18 at 14:28











    • @Keetch don't worry this happens. :P

      – Zainul Abideen
      Nov 14 '18 at 14:29

















    • Such a shame :D

      – Keetch
      Nov 14 '18 at 14:28











    • @Keetch don't worry this happens. :P

      – Zainul Abideen
      Nov 14 '18 at 14:29
















    Such a shame :D

    – Keetch
    Nov 14 '18 at 14:28





    Such a shame :D

    – Keetch
    Nov 14 '18 at 14:28













    @Keetch don't worry this happens. :P

    – Zainul Abideen
    Nov 14 '18 at 14:29





    @Keetch don't worry this happens. :P

    – Zainul Abideen
    Nov 14 '18 at 14:29













    0















    <div id="results"></div>

    <input type="date" id="dateInput">
    <button id="printDate">PrintDate</button>

    <script>
    $("#printDate").click(function()
    var dateVar = new Date($("#dateInput").val());
    $("#results").append("<p>" + dateVar + "</p>")
    );
    </script>



    You have a typing error.






    share|improve this answer



























      0















      <div id="results"></div>

      <input type="date" id="dateInput">
      <button id="printDate">PrintDate</button>

      <script>
      $("#printDate").click(function()
      var dateVar = new Date($("#dateInput").val());
      $("#results").append("<p>" + dateVar + "</p>")
      );
      </script>



      You have a typing error.






      share|improve this answer

























        0












        0








        0








        <div id="results"></div>

        <input type="date" id="dateInput">
        <button id="printDate">PrintDate</button>

        <script>
        $("#printDate").click(function()
        var dateVar = new Date($("#dateInput").val());
        $("#results").append("<p>" + dateVar + "</p>")
        );
        </script>



        You have a typing error.






        share|improve this answer














        <div id="results"></div>

        <input type="date" id="dateInput">
        <button id="printDate">PrintDate</button>

        <script>
        $("#printDate").click(function()
        var dateVar = new Date($("#dateInput").val());
        $("#results").append("<p>" + dateVar + "</p>")
        );
        </script>



        You have a typing error.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 14 '18 at 14:26









        LucasLucas

        1




        1



























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53301970%2fneed-to-store-html-date-input-in-js-var%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            這個網誌中的熱門文章

            Barbados

            How to read a connectionString WITH PROVIDER in .NET Core?

            Node.js Script on GitHub Pages or Amazon S3