Datetimepicker 不显示默认日期值

Question

我需要在所有字段中显示默认日期，但是当我添加插件选项时 minDate: new Date()，但是字段中的日期不显示，但值在字段内部。

示例：

代码：

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

~~尝试使用 defaultDate 属性。~~

编辑：我现在更了解问题了，事实证明您设置的一些属性使问题复杂化。

您似乎只是绕过了 readonly 属性，因此您可以删除它，这将进一步简化初始化。（并且 value="2017-01-01" 属性除了混淆输入的实际值外没有做任何事情）

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

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

更多详情请访问bootstrap-datetimepicker

Answer 3

应该添加到 @Peter 的回答中，如果 minDate 在点击其他日期后设置为 new Date() 并尝试再次 select 今天的日期，那将是不可能的，您可以使用以下方法解决此问题：

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>

Datetimepicker 不显示默认日期值

Datetimepicker does not display default date value

javascript

jquery

html

datetimepicker

eonasdan-datetimepicker