在datepicker中加载默认的当前日期

时间:2018-04-16 14:51:10

标签: javascript html

如何使用引导程序的datepicker类在默认情况下加载初始日期字段中的当前日期-30天和最终日期字段中的当前日期?

示例:

enter image description here

1 个答案:

答案 0 :(得分:1)

请尝试以下代码段。

当前日期:

'update', new Date()

前30天

"setDate", "-1m"

-1m =从当前日期起减去1个月。

$(function() {
  $("#datepicker").datepicker({
    autoclose: true,
    todayHighlight: true
  }).datepicker('update', new Date());


  $('#datepicker2').datepicker({

  }).datepicker("setDate", "-1m");
});
label {
  margin-left: 20px;
}

#datepicker {
  width: 180px;
  margin: 0 20px 20px 20px;
}

#datepicker>span:hover {
  cursor: pointer;
}

label {
  margin-left: 20px;
}

#datepicker2 {
  width: 180px;
  margin: 0 20px 20px 20px;
}

#datepicker2>span:hover {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />


<label>Date initial: </label>
<div id="datepicker2" class="input-group date" data-date-format="mm-dd-yyyy">
  <input class="form-control" type="text" readonly />
  <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>

<label>Date final: </label>
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
  <input class="form-control" type="text" readonly />
  <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>