Question

我正在使用eonasdan datetimepicker。我通过使用选项选择默认日期。我使用chrome，firefox 47.0和microsoft edje 25.1打开了页面。

Firefox案例：日期显示在文本字段中。但是，如果我去地址栏并点击“输入”，即文本字段中显示的日期消失。
Chrome和edje案例：页面打开时，日期不会显示在文本域中。

我为这个问题fiddle创建了一个小提琴，小提琴中发生的事情与google chrome和Internet Explorer案例中发生的情况相同。

我尝试使用datetimepicker的'viewDate：true'选项修复了问题。但它造成了另一个问题 - 当我点击日历图标时，日历不显示。

我不知道为什么会这样。非常感谢任何帮助。

小提琴中的相同代码如下：

Unknown module(s) in QT: webkitwigets

Answer 1

HTML中的datetimepicker输入不需要value属性。如果删除它，您的代码将如以下示例所示：

var cID = "#";
cID = cID.concat('d0');
var t = '2016-09-03';
var options = {
  format: 'L',
  defaultDate: moment(t)
};                      
$(cID).datetimepicker(options);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />


<div class="container"> 
  <form id="j_idt11" name="j_idt11" method="post" action="/myPage.xhtml" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="j_idt11" value="j_idt11" />          
    <div class="row">
      <div class="col-md-4 col-md-offset-4">          
        <div class="panel panel-primary">
          <div class="panel-heading text-center">
            My Panel                
          </div>                  
          <div class="panel-body">
            <div class="form-group text-right">
              <label class="text-right">My Date</label>
              <div class="form-group">
                <div class='input-group date' id='d0'>
                  <input type="text" name="j_idt11:j_idt15:0:j_idt21" class="form-control text-right" onkeydown="return false" />
                  <span class="input-group-addon">
                    <span class="glyphicon glyphicon-time"></span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

如果要使用数据属性，可以使用data-date-*设置选项或data-date-options设置选项对象。在您的情况下，您可以使用data-date-default-date代替value。

您可以找到有关data-*初始化here和here的更多信息。

Answer 2

CDN：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>

<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script> 

<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"></script>

HTML：

<div class="row">
    <div class="col-md-12">
         <h6>datetimepicker1</h6>

        <div class="form-group">
            <div class="input-group date" id="datetimepicker1">
                <input type="text" class="form-control" />  <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
            </div>
        </div>
         <h6>datetimepicker2</h6>
        <input type="text" class="form-control" id="datetimepicker2" />
    </div>
</div>

JavaScript：

$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();

使用此代码..

这对你有用..

日期未显示eonasdan datetimepicker

2 个答案: