Datetimepicker does not display default date value - Twitter bootstrap

Learningandsharing
August 22, 2017
175 views
3 votes
3 Answers

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:

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>

Answers

~~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>

$(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

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Datetimepicker does not display default date value – Twitter bootstrap

Answers