Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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!

like image 745
nikmav Avatar asked Apr 26 '14 12:04

nikmav


People also ask

How do I restrict a date picker?

You can restrict the users from selecting a date within the particular range by specifying MinDate and MaxDate properties. The default value of MinDate property is 1/1/1920 and MaxDate property is 12/31/2120 . Dates that appears outside the minimum and maximum date range will be disabled (blackout).

How do I set date picker value as null?

It is by default set to new Date() . You just need to set property valueDefault={null} and the DatePicker will be blank.

What is Autoclose in Datepicker?

autoclose. Whether or not to close the datepicker immediately when a date is selected.


1 Answers

Set Force parse value to false: forceParse: false

    $(".applyDatepicker").datepicker({
            forceParse: false
    });
like image 142
Datta Avatar answered Oct 13 '22 01:10

Datta