How to edit Bootstrap 4 date input value

Question

I currently have this code:

      <div class="form-group row">
        <label for="example-date-input" class="col-2 col-form-label">Start Date</label>
        <div class="col-4">
          <input class="form-control" type="date" value="" id="start_date">
        </div>
        <label for="example-date-input" class="col-2 col-form-label">End Date</label>
        <div class="col-4">
          <input class="form-control" type="date" value="" id="end_date">
        </div>
      </div>

and This javascript:

        var now = new Date();
        
        var month = now.getMonth() + 1;
        var year = now.getFullYear();
        var day = now.getDate();
        
        var start_date = month + "/1/" + year;
        var end_date = month + "/" + day + "/" + year;
        
        $("#start_date").val(start_date);

But for some reason the value of #start_date on page load does not change. It remains the place holder "mm/dd/yyyy"

Can anyone help explain why this will not work?

FYI: I am using Bootstrap 4.5.3 and Jquery 3.5.1.

You can see a JSFIDDLE of my attempt, with an excerpt of some of my code here: https://jsfiddle.net/69tn0q4f/1/

Wrap your JS code in a `$(document).ready(function(){...your code here ...})` to ensure your DOM is fully loaded and the elements you try to manipulate are actually available! — Lapskaus, Oct 30 '20 at 13:39
@Lapskaus The method I'm using is shorthand for document ready. https://learn.jquery.com/using-jquery-core/document-ready/ — Adam John, Oct 30 '20 at 13:43
maybe you should include that in the code you are providing us here then ? — Lapskaus, Oct 30 '20 at 13:55

Rumesh Eranga Hapuarachchi · Accepted Answer · 2020-10-30T13:44:27.317

0

Updated: quoting the answer from https://stackoverflow.com/a/12347050/1844843

Date control in HTML 5 accepts in the format of Year - month - day as we use in SQL If the month is 9, it needs to be set as 09 not 9 simply. So it applies for day field also.

So the following alteration will work.

var now = new Date();

var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);

var today = now.getFullYear()+"-"+(month)+"-"+(day) ;

$('#start_date').val(today);

edited Oct 30 '20 at 13:44

answered Oct 30 '20 at 13:28

Rumesh Eranga Hapuarachchi

2,458
2
25
40

I just now tried this and it did not work. It's still not updating. – Adam John Oct 30 '20 at 13:29
Do you get any console outputs? – Rumesh Eranga Hapuarachchi Oct 30 '20 at 13:33
I'm doing this project on a computer that the access policy has console for chrome/firefox disabled unfortunately. – Adam John Oct 30 '20 at 13:36
I created a JS Fiddle that has some excerpts from my code so you can see how the code is working: https://jsfiddle.net/69tn0q4f/1/ – Adam John Oct 30 '20 at 13:38
updated your fiddle https://jsfiddle.net/hbu9530x/4/ – Rumesh Eranga Hapuarachchi Oct 30 '20 at 13:48
did you check the last fiddle I made? It is basically an update to your fiddle – Rumesh Eranga Hapuarachchi Oct 30 '20 at 13:50
Yes I checked it. It's odd how it works on that iteration. Is there anyway to make it work with the exact code and style that my original jsfiddle has? I have used the javascript from your jsfiddle and it still doesn't work. – Adam John Oct 30 '20 at 13:52
In your fiddle, jquery was not set up properly it seemed. – Rumesh Eranga Hapuarachchi Oct 30 '20 at 13:52

Alejandro E. Rendon · Answer 2 · 2020-10-30T13:38:24.900

0

You can try changing the text using

$('#start_date').value(start_date)

It's necessary change the date format to yyyy-MM-dd

edited Oct 30 '20 at 13:38

answered Oct 30 '20 at 13:29

Alejandro E. Rendon

309
5
7

No luck with this one either. – Adam John Oct 30 '20 at 13:30
@AdamJohn use this format "yyyy-MM-dd". $("#start_date").value('2020-10-01'); – Alejandro E. Rendon Oct 30 '20 at 13:36
I tried this as well, I also created a jsfiddle so you can see how it's working. This method did not work either. https://jsfiddle.net/69tn0q4f/1/ – Adam John Oct 30 '20 at 13:39
@AdamJohn please try `var start_date = year + "-" + month + "-01"; var end_date = year + "-" + month + "-" + day;` – Alejandro E. Rendon Oct 30 '20 at 13:41
It works @AdamJohn . You need to change the format dates to `"yyyy-MM-dd"` instead of `MM-dd-yyyy` or `MM/dd/yyyy` or `MM-d-yyyy`. Remember format the day and month using 2 digits – Alejandro E. Rendon Oct 30 '20 at 13:46
@AdamJohn it works for me: ```var month = ("0" + (now.getMonth() + 1)).slice(-2); var year = now.getFullYear(); var day = ("0" + now.getDate()).slice(-2); var start_date = year + "-" + month + "-01"; var end_date = year + "-" + month + "-" + day; $('#start_date').val(start_date); $('#end_date').val(end_date);``` – Alejandro E. Rendon Oct 30 '20 at 13:51
I just updated my fiddle with your JS. https://jsfiddle.net/69tn0q4f/12/ - It doesn't seem to work this way? – Adam John Oct 30 '20 at 13:53
@AdamJohn your package jQuery is not working. Use a CDN `` – Alejandro E. Rendon Oct 30 '20 at 13:55

score 0 · Answer 3 · answered Oct 30 '20 at 13:47

Try this:

$(document).ready(function () {
    var now = new Date();

    var month = now.getMonth() + 1;
    var year = now.getFullYear();
    var day = now.getDate();

    $("#end_date").val(year + '-' + month + '-' + day);
    $("#start_date").val(year + '-' + month + '-' + '01');
})

$("#end_date").val(year + '-' + month + '-' + day); in this line, the value of day has to be 2 digit number.

score 0 · Answer 4 · answered Oct 30 '20 at 14:45

I hope I understood your question correctly.

var now = new Date();
   
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var year = now.getFullYear();
var day = ("0" + now.getDate()).slice(-2);
   
var start_date = (year) + "-" + (month) + "-" + "01";  
var end_date = (year) + "-" + (month) + "-" + (day);
   
$('#start_date').val(start_date);       
$('#end_date').val(end_date);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
        <label for="example-date-input" class="col-2 col-form-label">Start Date</label>
        <div class="col-4">
          <input class="form-control" type="date" id="start_date">
        </div>
        <label for="example-date-input" class="col-2 col-form-label">End Date</label>
        <div class="col-4">
          <input type="date" id="end_date">
        </div>
</div>

How to edit Bootstrap 4 date input value

4 Answers4