如何在日期选择器中显示当前日期答案

【问题标题】：How to Show current Date into datepicker如何在日期选择器中显示当前日期
【发布时间】：2019-08-22 09:26:47
【问题描述】：

我有一个datepicker，我想在页面加载时显示当前日期，但是当我使用简单的输入字段执行此操作时，它正在工作，但datepicker 输入字段不接受值

$('#deliveryDate').datepicker({
  format: 'dd/mm/yyyy',
});


var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var month = new Array();
month[0] = "01";
month[1] = "02";
month[2] = "03";
month[3] = "04";
month[4] = "05";
month[5] = "06";
month[6] = "07";
month[7] = "08";
month[8] = "09";
month[9] = "10";
month[10] = "11";
month[11] = "12"; //January is 0!
var mm = month[today.getMonth()];
var yyyy = today.getFullYear();

today = dd + '/' + mm + '/' + yyyy;

console.log(today)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<label for="deliveryDate" id="commonHeader"> Delivery Date:</label>
<input type="text" id="deliveryDate" name="deliveryDate" width="176" />

现在我在变量 today 中获取今天的日期，现在我想在页面加载时将该值存储在 datepicker 输入字段中。

【问题讨论】：

你的意思是但日期选择器输入字段不接受值？？
@ZakariaAcharki 假设我已经计算了今天的日期并将其存储在一个变量中，现在我想将该值填充到日期选择器的输入字段中
@manishthakur 你看过stackoverflow.com/questions/4915990/…
为什么不能简单地使用.val()？
我使用日历选择日期，我看到它显示在输入字段中。有什么问题？

标签： javascript jquery

【解决方案1】：

你可以使用.val()：

在页面加载时设置值：

$(function() {

  $('#deliveryDate').datepicker({
    dateFormat: 'dd/mm/yyyy'
  });

  var today = new Date();
  var dd = String(today.getDate()).padStart(2, '0');
  var month = new Array();

  month[0] = "01";
  month[1] = "02";
  month[2] = "03";
  month[3] = "04";
  month[4] = "05";
  month[5] = "06";
  month[6] = "07";
  month[7] = "08";
  month[8] = "09";
  month[9] = "10";
  month[10] = "11";
  month[11] = "12"; //January is 0!
  var mm = month[today.getMonth()];
  var yyyy = today.getFullYear();

  today = dd + '/' + mm + '/' + yyyy;

  $('#deliveryDate').val(today);
  console.log(today);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />

<button id="btn">Set DATE</button>
<br>
<br>
<label for="deliveryDate" id="commonHeader"> Delivery Date:</label>
<input type="text" id="deliveryDate" name="deliveryDate" width="176" />

设置点击价值：

$(function() {

$('#deliveryDate').datepicker({
  dateFormat: 'dd/mm/yyyy'
});

$('#btn').on('click', function() {
  var today = new Date();
  var dd = String(today.getDate()).padStart(2, '0');
  var month = new Array();

  month[0] = "01";
  month[1] = "02";
  month[2] = "03";
  month[3] = "04";
  month[4] = "05";
  month[5] = "06";
  month[6] = "07";
  month[7] = "08";
  month[8] = "09";
  month[9] = "10";
  month[10] = "11";
  month[11] = "12"; //January is 0!
  var mm = month[today.getMonth()];
  var yyyy = today.getFullYear();

  today = dd + '/' + mm + '/' + yyyy;

  $('#deliveryDate').val(today);
  console.log(today);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />

<button id="btn">Set DATE</button>
<br>
<br>
<label for="deliveryDate" id="commonHeader"> Delivery Date:</label>
<input type="text" id="deliveryDate" name="deliveryDate" width="176" />

【讨论】：

我也在尝试同样的方法，不知道为什么它不起作用，但现在它起作用了

【解决方案2】：

您需要在设置日期选择器时使用defaultDate 属性。


$('#deliveryDate').datepicker({
  format: 'dd/mm/yyyy',
  defaultDate: '01/01/1970'
});

你也可以在那里使用一个日期对象，或者 0 代表今天。

今天：

$('#deliveryDate').datepicker({
  format: 'dd/mm/yyyy',
  defaultDate: 0
});

* Api Reference Link:  http://api.jqueryui.com/datepicker/#option-defaultDate

【讨论】：

但是我怎样才能给它一个动态的日期呢？
动态日期是什么意思？
今天可以使用 0，下周可以使用 +7，等等。
可能与@stackoverflow.com/questions/9921944/…重复

【解决方案3】：

$(document).ready(function() {
    var todayDate = (function(){ 
      var d = new Date();
      var day = d.getDate();
      day =  day > 9 ? day : '0' + day ;
      var month = (d.getMonth() + 1);
      month = month > 9 ? month : '0' + month;
      var _value =  day + '/' + month  + '/' + d.getFullYear(); 
      return _value; 
    })();
    $('#deliveryDate').datepicker({
      format: 'dd/mm/yyyy',
      value: todayDate
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<label for="deliveryDate" id="commonHeader"> Delivery Date:</label>
<input type="text" id="deliveryDate" name="deliveryDate" width="176" />

【讨论】：