Datetimepicker不显示默认日期值

时间：2017-08-22 16:37:35

标签： javascript jquery html datetimepicker eonasdan-datetimepicker

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

示例：

Example

代码：

＆＃13;
＆＃13; 
$(function(){
  $('.date').each(function() {
      $(this).datetimepicker({
          minDate: new Date(),
          format: 'YYYY-MM-DD',
          ignoreReadonly: true,
          useCurrent: false
      });
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

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

答案 2 :(得分：1)

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

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>

相关问题
最新问题