Datetimepicker不显示默认日期值

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

实施例：

代码：

$(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> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-xs-6"> 
 
\t \t \t \t <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>   
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

来源

2017-08-22 Learning and sharing

这是什么意思useCurrent：false？ –

你试过改变这个：'''ignoreReadonly：true，'''为false –

useCurrent设置开始日期当你打开窗口的日期为 –

~~尝试使用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> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-xs-6"> 
 
\t \t \t \t <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>   
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

来源

2017-08-22 16:43:56 Peter

删除minDate选项所有日期都可用 –

@Learningandsharing您是否希望默认值是输入（2017-01-01）或当前日期的值？ – Peter

当前日期的值，并且当天之前的所有日期都被禁用 –

$(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> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-xs-6"> 
 
\t \t \t \t <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>   
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

有关更多详情，请bootstrap-datetimepicker

来源

2017-08-22 16:45:40

删除minDate选项所有日期都可用 –

@Learningandsharing答案已更新！ –

它应该被添加到@ 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> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-xs-6"> 
 
\t \t \t \t <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>   
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

来源

2017-08-30 15:29:31

Datetimepicker不显示默认日期值

回答

相关问题