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

Active3 hr before
Viewed126 times

8 Answers


Connect and share knowledge within a single location that is structured and easy to search.,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.,How can the pre-populated value be kept in the field if someone clicks in it?, Fast intercontinental Remote Desktop Sessions

Set Force parse value to false: forceParse: false

       forceParse: false
load more v

I had the same issue - when nothing is selected (click outside the datepicker) the target value would change.,@boriscosic that last snippet still clears the field if no date is selected, however the next/prev buttons work again,This workaround could easily be integrated in the datepicker, do you maybe want to send a PR for that @boriscosic?,So IMHO there is no need to make any changes to the source code of datepicker. The only change necessary is in the datepicker option documentation, which needs to mention this side effect.

   format: "D M d, yyyy",
   autoclose: true,
   todayHighlight: true
}).on('show', function(e) {
   if ($(this).val().length > 0) {
      $(this).datepicker('update', new Date($(this).val()));
load more v

Array of date strings or a single date string formatted in the given date format,If true, selecting the currently active date in the datepicker will unset the respective date. This option is always true when the multidate option is being used.,Enable multidate picking. Each date in month view acts as a toggle button, keeping track of which dates the user has selected in order. If a number is given, the picker will limit how many dates can be selected to that number, dropping the oldest dates from the list when the number is exceeded. true equates to no limit. The input’s value (if present) is set to a string generated by joining the dates, formatted, with multidateSeparator.,If false, the datepicker will be prevented from showing when the input field associated with it receives focus.

<div class="form-group form-group-filled" id="event_period">
   <input type="text" class="actual_range">
   <input type="text" class="actual_range">

      inputs: $('.actual_range').toArray()

$(document).ready(function() {
      format: "dd/mm/yyyy",
      autoclose: true

   //Alternativ way
      format: "dd/mm/yyyy"
   }).on('change', function() {

load more v

Bootstrap date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code.,When using translations, specify formatSubmit and data-value to ensure the date parses correctly regardless of locale.,Pre-fill values using custom formats or translations,Change the title attributes to several elements within the picker:

<div class="md-form">
   <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
   <label for="date-picker-example">Try me...</label>
load more v

Whether or not to close the datetimepicker immediately when a date is selected.,Sets a new lower date limit on the datetimepicker.,Remove the datetimepicker. Removes attached events, internal attached objects, and added HTML elements.,Sets a new upper date limit on the datetimepicker.

git clone git: //
load more v

response server response (if display called after ajax submit), since 1.4.0,For inputs with source (select, checklist) parameters are different: ,response Object ajax response ,params Object additional params newValue Mixed submitted value response Object ajax response

Include it on your page. Examples below are for bootstrap:

<link href="//" rel="stylesheet">
<script src=""></script>
<script src="//"></script>
load more v

placeholder (string; optional): Text that will be displayed in the input box of the date picker when no date is selected. Default value is ‘Start Date’.,The placeholder defines the grey default text defined in the calendar input boxes when no date is selected.,You can utilize any permutation of the string tokens shown in the table above to change how selected dates are displayed in the dcc.DatePickerSingle component.,Similar to the display_format, you can set month_format to any permutation of the string tokens shown in the table above to change how calendar titles are displayed in the dcc.DatePickerSingle component.

from datetime
import date
import dash
from dash.dependencies
import Input, Output
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash(__name__)
app.layout = html.Div([
      id = 'my-date-picker-single',
      min_date_allowed = date(1995, 8, 5),
      max_date_allowed = date(2017, 9, 19),
      initial_visible_month = date(2017, 8, 5),
      date = date(2017, 8, 25)
   html.Div(id = 'output-container-date-picker-single')

   Output('output-container-date-picker-single', 'children'),
   Input('my-date-picker-single', 'date'))
def update_output(date_value):
   string_prefix = 'You have selected: '
if date_value is not None:
   date_object = date.fromisoformat(date_value)
date_string = date_object.strftime('%B %d, %Y')
return string_prefix + date_string

if __name__ == '__main__':
   app.run_server(debug = True)
load more v

Other "input-prevent" queries related to "How do you prevent bootstrap-datepicker from clearing existing value from input if no date is selected?"