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

Posted 2023-05-07

【中文标题】如何在日期选择器中显示当前日期

【英文标题】：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"  />

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

【问题讨论】：

你的意思是但日期选择器输入字段不接受值？？

@ZakariaAcharki 假设我已经计算了今天的日期并将其存储在一个变量中，现在我想将该值填充到日期选择器的输入字段中

@manishthakur 你看过***.com/questions/4915990/…

为什么不能简单地使用.val()？

我使用日历选择日期，我看到它显示在输入字段中。有什么问题？

【参考方案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"  />

设置点击价值：

$(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"  />

【讨论】：

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

【参考方案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，等等。

可能与@***.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"  />