我想默认设置当前日期和时间并显示在输入字段中答案

【问题标题】：i want to set current date and time defaultly and shown in input field我想默认设置当前日期和时间并显示在输入字段中
【发布时间】：2020-01-20 10:27:46
【问题描述】：

我只想在文本字段中显示当前日期和时间，甚至想选择日期..

这是我失败的代码：

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var optComponent = {
  format: 'mm-dd-yyyy',
  container: '#datePicker',
  orientation: 'auto top',
  todayHighlight: true,
  autoclose: true
};
// COMPONENT
$('#datePicker').datepicker(optComponent);
$('#datePicker').datepicker('setDate', today);

<div class="form-group">
  <div class="input-group date" id="datePicker">
    <input type="text" class="form-control" name="date" value="">
    <span class="input-group-addon">
                                                            <i class="glyphicon glyphicon-calendar"></i>
                                                        </span>
  </div>
</div>

【问题讨论】：

需要调用bootstrap-datepicker.js <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>在调用jquery.js后添加

标签： javascript jquery html css bootstrap-4

【解决方案1】：

@乔

试试下面的代码

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body onload="myFunction()">
Date: <input type="text" class="datepicker" id="demo"/>
<script>
function myFunction() {
$(document).ready(function(){
var todaydatetime = new Date();
  $(".datepicker" ).datepicker({
        dateFormat : 'dd-mm-yy',
        defaultDate: new Date()
    });
   $(".datepicker").attr('value', todaydatetime);
});
}
</script>
</body>
</html>

希望以上信息对你有用。

谢谢。

【讨论】：

【解决方案2】：

您的代码运行良好，但缺少 date picker js

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var optComponent = {
  format: 'mm-dd-yyyy',
  container: '#datePicker',
  orientation: 'auto top',
  todayHighlight: true,
  autoclose: true
};
// COMPONENT
$('#datePicker').datepicker(optComponent);
$('#datePicker').datepicker('setDate', today);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<div class="form-group">
  <div class="input-group date" id="datePicker">
    <input type="text" class="form-control" name="date" value="">
    <span class="input-group-addon">
                                                            <i class="glyphicon glyphicon-calendar"></i>
                                                        </span>
  </div>
</div>

【讨论】：