Learning and sharing Learning and sharing - 26 days ago 6
Javascript Question

Datetimepicker does not display default date value

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>




Answer Source

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>