Search code examples
jquerytwitter-bootstrapbootstrap-datetimepickereonasdan-datetimepicker

bootstrap datetimepicker prevent minDate from printing


I am using bootstrap datetimepicker and this is my script

$('.start_datetime, .end_datetime').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss',
    inline:false,
    ignoreReadonly: true,
    allowInputToggle: true,
    sideBySide:true,
    minDate: new Date()
});

In the above script i am initialising minDate to today's date but the problem is when i check the result today's date is already coming as printed value of text box but i don't want it to be printed i want it just to restrict it from selecting date previous than today's date.


Solution

  • The picker shows today's date because by default the useCurrent option is true, as stated in the documentation.

    Setting useCurrent to false will solve your issue, as shown in the following code:

    $('.start_datetime, .end_datetime').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss',
        inline: false,
        ignoreReadonly: true,
        allowInputToggle: true,
        sideBySide:true,
        minDate: new Date(),
        useCurrent: false
    });
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/>
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    
    <div class="form-group">
      <div class="input-group date start_datetime">
        <input type="text" class="form-control" />
        <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
      </div>
    </div>