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

bootstrap datepicker highlight dates
bootstrap datepicker clear button
bootstrap datepicker default date
bootstrap-datepicker start date end date example
bootstrap-datepicker set date
bootstrap datepicker close event
bootstrap-datepicker options
bootstrap datetimepicker set date

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!

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>

prevent datepicker from changing date when nothing is selected , from clearing existing value from input if no date is selected? <div id="​datepicker" class="input-group date"> <label for="dob">Date of  How do you prevent bootstrap-datepicker from clearing existing value from input if no date is selected? Do calculations with bootstrap datepicker.

Set Force parse value to false: forceParse: false

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

Options - bootstrap-datepicker, In an edit form the date input field is set to a value from the database. When the uxsolutions / bootstrap-datepicker prevent datepicker from changing date when nothing is selected #1291 @boriscosic that last snippet still clears the field if no date is selected, however the next/prev buttons work again  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.

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

Events, Whether or not to close the datepicker immediately when a date is selected. a “​Clear” button at the bottom of the datepicker to clear the input value. If Example​: disable weekends: '0,6' or [0,6] . year : the current year; month : 1; day : 1  When the datepicker is opened and closed (by clicking outside the datepicker area) without selecting a date, the value in the date input field gets changed to nothing. The desired behavior would be that it stays on the value it was set to beforehand. Is it possible to prevent the datpicker from updating the field when no date is selected?

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.

Finding a Date Picker Input Solution for Bootstrap, Whether or not to close the datepicker immediately when a date is selected. If the year is less than 10 years in advance, the picker will use the current century, otherwise, it will use If true, displays a “Clear” button at the bottom of the datepicker to clear the input value. Example: disable weekends: '06' or '0,6' or [​0,6] . The string that will appear between dates when generating the input’s value. When parsing the input’s value for a multidate picker, this will also be used to split the incoming string to separate multiple formatted dates; as such, it is highly recommended that you not use a string that could be a substring of a formatted date (eg, using

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.

[PDF] bootstrap-datepicker Documentation, All events have extra data attached to the event object that is passed to any Fired when the date is cleared, normally when the “clear” button (enabled with the  toDisplay aim to set the output format of dates, for both UI and input. toValue aim to set the input format, which the plugin will use in order to parse date wrote in the input. If you want to store a different format than the one displayed, you should add another hidden input and store the date in the wished format when toDisplay is running.

bootstrap-datetime-picker, prevent bootstrap-datepicker from clearing existing value from input if no date is when the "dob" input gets and loses focus without making a date selection it​  Datepicker format not working #1622. If you are using bootstrap-datepicker version 1.4, which the plugin will use in order to parse date wrote in the input.

You can see the latest data on browser support for date inputs on Can I Use. the UTC format. datetime-local represents date and time with no time zone script I checked uses the same format both for display and saving. managing existing date values if (_val) { _this.datepicker('setDate', $.datepicker. Note - If You are coding in php then you can set the value of the input datefield using php, but datetimepicker sets it back to current date when you apply datetimepicker() function to it. So in order to prevent it, use the given JS code. JAVASCRIPT $('#datetimepicker5').datetimepicker({ useCurrent: false, //this is important as the functions

You can disable datepicker's data-api in the same way as you would disable Adding the date class to an input-group bootstrap component will allow the is less than 10 years in advance, the picker will use the current If true, the selected value does not get propagated to other, currently empty, pickers. In version 4.17.37, 'change' event is not triggered on the input when a date is selected. It's true that on version 3.x 'change' was triggered when date was selected. If you have listeners for 'change', just add 'dp.change' also: $

Comments
  • Thanks @steve-h. Didn't have the date echoed out in the same format face palm
  • 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",
  • 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.
  • You Are Awesome Dear, It Worked Like Charm :)