JavaScript date issue should display error for invalid date

Question

I am writing an html file to take date input. I am using date picker to select the date, instead of selecting date from the date picker, if the user is manually typing the date in text field for ex: 09/31/16 I need to give information to the user that date is invalid date. But my code given below is taking as october 1st 2016 when I created the date object. if I am converting date to ISOString it is displaying as 30th sept. But my desired output is to display the message to the browser as an "Invalid date". Please help me as I have to resolve this because I am going to use dates at many places during my development. Thank You.

<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script>
            $(function () {
                $("#datepicker").datepicker();
            });
            function verifyDate() {
                var d = new Date($("#datepicker").val());
                console.log(d);
                var d = new Date($("#datepicker").val()).toISOString();
                console.log(d);
            }
        </script>
    </head>
    <body>
        <p>Date: <input type="text" id="datepicker" onblur="verifyDate()"></p>
    </body>
</html>

If U want, U can disable user input on datepicker fields on datepicker settings — Siva.G ツ, Jan 08 '16 at 09:05
use moment.js, they have a built-in function which checks if it's a valid date or not. — Jorrex, Jan 08 '16 at 09:05
http://stackoverflow.com/questions/153759/jquery-datepicker-with-text-input-that-doesnt-allow-user-input — Siva.G ツ, Jan 08 '16 at 09:07

score 0 · Answer 1 · answered Jan 08 '16 at 09:10

if you want to get the date on user selection, your code should be like:

<html lang="en">
<head>
 <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script>
      $(function() {

      $("#datepicker").datepicker({
             onSelect: function(){ 
               var dateValue = $(this).datepicker('getDate'); 
             console.log(dateValue);
        }
       });  

     });       
    </script>    
    </head>
    <body>    
 <p>Date: <input type="text" id="datepicker" ></p>  

</body>

score 0 · Answer 2 · answered Nov 16 '22 at 18:34

0

Following way of validating dates can help in this:

let dateObj = document.getElementById("datepicker");
if (dateObj.validity.badInput) {
   // show error message
}

answered Nov 16 '22 at 18:34

Madhur Trivedi

33
1
1
8

JavaScript date issue should display error for invalid date

2 Answers2