How do you prevent bootstrap-datepicker from clearing existing value from input if no date is selected?

Question

I have have a div with a user's date of birth pre-populated with php:

<div id="datepicker" class="input-group date">
    <label for="dob">Date of Birth</label> <input type="text" class="form-control" id="dob" name="dob" value="<?php $date = new DateTime($this->swimmers->dob); echo $date->format('d/m/Y');?>"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

The javascript:

<script>     
    $('.container .input-group.date').datepicker({
    startDate: "01/01/1900",
    endDate: "01/01/2100",
    format: "dd/mm/yyyy",
    autoclose: true,
    todayHighlight: true
    });
</script>

Bootstrap is setup and working correctly however, when the "dob" input gets and loses focus without making a date selection it clears the value that was pre-populated.

This however doesn't happen if a date has been selected via the datepicker and then the input gets and loses focus.

How can the pre-populated value be kept in the field if someone clicks in it?

Edit: The first time you make a date selection, it clears the pre-populated value but doesn't insert the selected date until you make a date selection a second time.

Update: Working code updated!

Epos

Answer 1

Can't tell for sure without more of an example but the problem is probably that the $this->swimmers->dob string you are giving to the input is not recognised as a date format by bootstrap-datepicker. You can define the date format it uses by adding the data-date-format attribute to your input.

For example if you were using a MySQL formatted date or PHP's DateTime object with $date->format('Y-m-d') you could use:

<div id="datepicker" class="input-group date">
    <input type="text" class="form-control" id="dob" name="dob" value="<?php echo $this->swimmers->dob;?>" data-date-format="yy-mm-dd"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

Juster

Thanks @steve-h. Didn't have the date echoed out in the same format face palm – Epos

Hello Im struggling with the same issue but in jsp can u please have a look #69939709 – Wesleyanism

Answer 2

Set Force parse value to false: forceParse: false

    $(".applyDatepicker").datepicker({
            forceParse: false
    });

Catabolism

it did not work for me var start = moment(); var end = moment().add(2, "days"); $("input[name=shifting_date]").daterangepicker({ forceParse: false, startDate: start, endDate: end, "applyClass" : "btn-sm btn-success", – Cousingerman

Thank you, @Datta. Worked for me as well. However, why does this work? I load the page with a valid date; click into field, click away, and without the above flag, the value is set to blank. – Hateful

You Are Awesome Dear, It Worked Like Charm :) – Yourself

Great answer Datta! I had this problem, and also a problem where tabbing out of the DatePicker would set it back to the placeholder of "mm/dd/yyyy". I spent the better part of a day on this issue. You rock!! – Snowslide

Answer 3

I am not sure about its working in php but for mvc I got the same problem that Bootstrap would erase the value if the control gets and loses focus without making a date selection.

I found that Bootstrap erases the value as it doesn't recognize the value set by

$('#dtControl').val(nextMonth);

I am working with bootstrap v3.1.1 and the following code worked for me

$('#dtControl').datepicker('setDate', nextMonth);

to populate the datepicker control. This way Bootstrap recognizes the date and doesn't erase it if control gets and loses focus

Tradition

Answer 4

I had a similar problem when a user clicked on the same date twice. The field would "toggle" between the date clicked on and a blank field. I basically didn't want it to be empty at any stage, so here's how I got around that, partly thanks to Waqas's answer:

var datepickerContainer = $('#datepicker');

datepickerContainer.datepicker({
    startDate: "01/01/1900",
    endDate: "01/01/2100",
    format: "dd/mm/yyyy",
    autoclose: true,
    todayHighlight: true
}).on('show', function() {
    datepickerContainer.datepicker.currentDate = $('input#dob').val(); //update this instance with the current value
}).on('changeDate', function(event) {
    var newDate = $('input#dob').val();
    if (newDate == '' || newDate == null) { //check if the new value is empty - if it is, then just set it back to the last known date for this instance
        datepickerContainer.datepicker('setDate', datepickerContainer.datepicker.currentDate);
    }
});

That keeps it relatively self-contained, by storing the last date value in that instance of the datepicker and results in no clearing of the input.

I know you solved this problem, but I figured this snippet might come in handy for someone else in a similar situation.

Tandratandy

Answer 5

When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered. Futhermore, a non empty string will evaluate to true. Based on these facts, simply do a check in the event handler. See sample code below.

            .find( 'input[name=startDate]' )
                .datepicker( {format: 'dd-mm-yyyy'} )
                .on( 'changeDate', function() {
                    if( this.value ) { 
                        << do something >>
                    }
                });

NOTE: For efficiency and readability in code sample above, the DOM property value is checked, instead of wrapping this in a jQuery object and calling val() on it ( $( this ).val() ). This is a minor improvement, but it's a good practice to be as compact/simple as possible.

Arable

Answer 6

Another solution is to define the options at the global level:

$('.datepicker').datepicker();
$.fn.datepicker.defaults.format = 'dd/mm/yyyy';
$.fn.datepicker.defaults.startDate = "0";
$.fn.datepicker.defaults.language = "es";
$.fn.datepicker.defaults.autoclose = true;
$.fn.datepicker.defaults.todayHighlight = true;
$.fn.datepicker.defaults.todayBtn = true;
$.fn.datepicker.defaults.weekStart = 1;

Now, when use update method, datepicker don't lost options.

Stylet

Answer 7

$('#dob').datepicker('update', '2011-03-05');

You can use like this. Although for me it was working by simply passing value to element by using .val() function.

Reference URL. https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html

Grindery