Twitter Bootstrap Datepicker won't update input value

Question

I have this code, but now i am stuck:

<input type="text" id="datepicker" value="/">

<script type="text/javascript">
    $('#datepicker').datepicker()
        .on('changeDate', function(ev){
            // Some code..
        });
</script>

I want the value of input field to update every time the new date is selected. I want the value to be the date, that was selected.

Answer 1

$(document).ready(function(){

    var dp = $("#datepicker");

    dp.datepicker({
        format : 'mm-dd-yyyy',
    });

     dp.on('changeDate', function(ev){
       dp.val(ev.target.value);
    });

});

Answer 2

I had to do some crazy stuff for mine to work. Something about version perhaps? i don't know.

        var dt = $(".datepick");

        dt.datepicker({
            format: 'dd/mm/yyyy'
        });

        dt.on('changeDate', function (ev) {
            var mDate = new moment(ev.date);

            $("input", dt).attr('value',mDate.format('DD/MM/YYYY'));
        });

Yes, i am using moment js, it's because i am doing some date calculations on the page.

But it worked.

I needed the input to have the value so i could use jquery selectors to filter empty fields with :not([value='']) selector.

I hope it helps some body ^_^

Answer 3

Html:

<div class="input-group input-daterange">
    <input type="text" class="form-control" value="2019-03-05">
    <div class="input-group-addon">to</div>
    <input type="text" class="form-control" value="2019-03-14">
</div>

JS:

$(".input-daterange input").each(function(){
        $(this).datepicker('setValue');
});

Answer 4

<script type="text/javascript">
$(function() {
    $( "#datepicker" ).datepicker().on('changeDate', function(ev){
        // Some code..
    });;
});

The date picker should be attache to the #datepicker element when the page is ready by putting it in

$(function() {
  //code
}

or

$(document).ready($function{
 //some code
});

or make sure that

$("#datepicker").datepicker().on('changeDate', function(ev){}); 

is executed in a function before the #datepicker element is clicked on