Is there something wrong with the way I am extracting the current date and time in html?

Question

I have the following script:

$('input[name=flexRadioDefault]:radio').click(function () {
            let datecreated = new Date();
            let servicetime = new Date();

            if($('#flexRadioDefault2').is(':checked')) {
                datecreated = datecreated.getFullYear()+'-'+(datecreated.getMonth()+1)+'-'+datecreated.getDate()
                servicetime = servicetime.getHours() + ':' + servicetime.getMinutes();


                console.log(datecreated);
                console.log(servicetime);
                console.log("checked");
                
                $('#servicedate').val(datecreated);
                $('#servicedate').prop('disabled',true);
                $('#servicetime').val(servicetime);
                $('#servicetime').prop('disabled',true);
                console.log($('#servicedate').val());


            }

            else {

                $('#servicedate').val('');
                $('#servicetime').val('');
               
                $('#servicetime').prop('disabled',false);
                $('#servicedate').prop('disabled',false);
            }
        })

HTML:

<h5>Service Period:</h5>
 <div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked>
   <label class="form-check-label" for="flexRadioDefault1">
                                                  Scheduled
   </label>
 </div>
 <div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
   <label class="form-check-label" for="flexRadioDefault2">
                                                  Immediate
    </label>
    <br>
  </div>
  <div class="servicedate col-md-6">
   <div class="form-group">
    <label for="start">Service date:<span class="text-danger">*</span></label>
     <input type="date" id="servicedate" name="servicedate" placeholder = "mm/dd/yyyy" required>    
   </div>
  <div class = "form-group">
   <label for="start">Service time:<span class="text-danger">*</span></label>
    <input type="time" id="servicetime" name="servicetime" required>
  </div>
</div>

Here is how the thing look like:

So if user select Scheduled, the date and time must be manually selected. If Immediate , the script will extract the current date and time and put it in the input box of servicetime and servicedate.

But the problem is the code is not stable. I am unsure why but sometime when I clicked Immediate, only the current time is shown in servicetime. The date does not show. Sometime both the current time and date is no where to be found in the input box. While it does not show in the input box, the console is still printing the current time and date. Can anyone explain to me what am I doing wrong and point out how can I fixed this? Thank you !

Your date format looks a lot like ISO 8601. Take a look at [this answer](https://stackoverflow.com/a/29774197/4949005). It could clean things up. — smoksnes, Nov 01 '21 at 05:36
Your `` has a `valueAsDate` property, you can set it to the JS Date object you have directly, letting the browser do the parsing on its own (you'd need to access the original Element though, so `$('#servicedate')[0].valueAsDate = aDateObject` — Kaiido, Nov 01 '21 at 06:17

Zain Ejaz · Accepted Answer · 2021-11-01T08:59:00.980

1

Your formated date is not acceptable for the html element <input type="date"> You have to change the format of date and after doing this, pass the formated value to the input value,

Add this script in your function for change the format of date

            var date = new Date(datecreated),
            mnth = ("0" + (date.getMonth() + 1)).slice(-2),
            day = ("0" + date.getDate()).slice(-2);
            var newDate = [date.getFullYear(), mnth, day].join("-");

edited Nov 01 '21 at 08:59

answered Nov 01 '21 at 05:52

Zain Ejaz

289
1
9

Why? What did you do? What is different from OP's code? [Code-only answers are considered low quality on SO](https://meta.stackoverflow.com/questions/300837/what-comment-should-i-add-to-code-only-answers). – Don't Panic Nov 01 '21 at 08:42
I just gave the ans of your ques. nothing more else – Zain Ejaz Nov 01 '21 at 08:48
Is it wrong ??? – Zain Ejaz Nov 01 '21 at 08:49
Copy-pasted from [the question I linked to](https://meta.stackoverflow.com/questions/300837/what-comment-should-i-add-to-code-only-answers): "*While this code may answer the question, it would be better to include some context, explaining how it works and when to use it. Code-only answers are not useful in the long run.*". Why do you think your code helps? What was the problem with OP's code? Edit your answer and add an explanation, make it useful for everyone to learn from. – Don't Panic Nov 01 '21 at 08:51
1

Now look at the ans – Zain Ejaz Nov 01 '21 at 08:59
Thank you very much for the solution and explanation! – L.Calvin Nov 03 '21 at 04:02

Is there something wrong with the way I am extracting the current date and time in html?

1 Answers1