Search code examples
jquerytwitter-bootstrapdatepickercalendar

Bootstrap datepicker remove input value if click outside the calendar


I use bootstrap datepicker and initialize it with a value. Now, while the calendar is open if I click outside the calendar, then the calendar fade out and the input field becomes empty.

I created the case here

sample

My JS:

$('div.date').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy',
    startDate: '+1d' 
});

And my Html:

<div class="input-group date" >
    <input type="text" class="form-control" value="${today}" name="expectedDlivery">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
</div>

Solution

  • The date you have entered is outside of the scope based on startDate: +1. Accordingly, when it is closed the datepicker code considers it an invalid entry and removes it. Enter a value that is after today and it works.

    For example, I set the date to tomorrow as follows, and it remains there when the datepicker is closed.

    <input type="text" class="form-control" value="13-02-2016" name="expectedDlivery">