skip to Main Content

I need to display the default date in all the fields, but when I added the plugins option minDate: new Date(), but the dates in the fields are not displayed, but the value is internally there in the field.

Example:

Example

Code:

$(function(){
  $('.date').each(function() {
      $(this).datetimepicker({
          minDate: new Date(),
          format: 'YYYY-MM-DD',
          ignoreReadonly: true,
          useCurrent: false
      });
  });
});
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example</title>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-xs-6">
				<div class="form-group">
          <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month">
        </div>
        <div class="form-group">
          <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month">
        </div>
        <div class="form-group">
          <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month">
        </div>
        <div class="form-group">
          <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month">
        </div>           
			</div>
		</div>
	</div>
</body>
</html>

3

Answers


  1. Try using the defaultDate property instead.

    EDIT:
    I understand the problem more now, and it turns out some of the properties you were setting were complicating the problem.

    It also seems like you’re just bypassing the readonly attribute so you could remove that and that would simplify the initialization even further. (And the value="2017-01-01" attributes aren’t doing anything except confusing what the inputs actual values are)

    $(function(){
      $('.date').each(function() {
          $(this).datetimepicker({
              minDate: new Date(),
              format: 'YYYY-MM-DD',
              ignoreReadonly: true
          });
      });
    });
    <link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
    <script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Example</title>
    </head>
    <body>
    	<div class="container">
    		<div class="row">
    			<div class="col-xs-6">
    				<div class="form-group">
              <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month">
            </div>
            <div class="form-group">
              <input type="text" name="date" class="form-control date" readonly  value="2017-01-01" placeholder="Your month">
            </div>
            <div class="form-group">
              <input type="text" name="date" class="form-control date" readonly  value="2017-01-01" placeholder="Your month">
            </div>
            <div class="form-group">
              <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month">
            </div>           
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    Login or Signup to reply.
  2. $(function(){
      $('.date').each(function() {
          $(this).datetimepicker({
              format: 'YYYY-MM-DD',
              ignoreReadonly: true,
              useCurrent: false,
              defaultDate: new Date(),
              minDate: new Date()
              });
          });
      });
    <link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
    <script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Example</title>
    </head>
    <body>
    	<div class="container">
    		<div class="row">
    			<div class="col-xs-6">
    				<div class="form-group">
              <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month">
            </div>
            <div class="form-group">
              <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month">
            </div>
            <div class="form-group">
              <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month">
            </div>
            <div class="form-group">
              <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month">
            </div>           
    			</div>
    		</div>
    	</div>
    </body>
    </html>

    For more detail visit bootstrap-datetimepicker

    Login or Signup to reply.
  3. It should be added to @Peter’s answer that if minDate is set as new Date() after clicking other date and try to select again today’s date it won’t be possible, you can solve this using:

    minDate: moment().startOf('day')
    

    Momentjs document of startOf

    $(function(){
      $('.date').each(function() {
          $(this).datetimepicker({
              minDate: moment().startOf('day'),
              format: 'YYYY-MM-DD',
              ignoreReadonly: true
          });
      });
    });
    <link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
    <script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Example</title>
    </head>
    <body>
    	<div class="container">
    		<div class="row">
    			<div class="col-xs-6">
    				<div class="form-group">
              <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month">
            </div>
            <div class="form-group">
              <input type="text" name="date" class="form-control date" readonly  value="2017-01-01" placeholder="Your month">
            </div>
            <div class="form-group">
              <input type="text" name="date" class="form-control date" readonly  value="2017-01-01" placeholder="Your month">
            </div>
            <div class="form-group">
              <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month">
            </div>           
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search