如何设置 jQuery 日期选择器值？ （"setDate" 不工作）

Question

我在设置 jQuery 日期选择器日期值时遇到问题。我正在从 sql 数据库中检索日期，然后在格式化后尝试将其设置为日期选择器。 我的 jsp 代码看起来像

<div class="col-md-6 col-sm-6 col-xs-12 form-group">
                        <label>Date de Debut</label><span style="color:red;"></span>
                         <form:input
                            path="roles[0].startDate"
                            class="form-control" 
                            type="date"
                            pattern="dd-mm-yyyy"
                            name="dateDebut" 
                            id="dateDeDebut" 
                            required="true" />
                    </div>

我的 Jquery 代码看起来像

var start = row.roles[0].startDate;
    var date_start = new Date(start);
    var startDate = new Intl.DateTimeFormat('en-GB').format(date_start);//gives me this format "dd/mm/yyyy"

    $('#dateDeDebut').datepicker();
    $('#dateDeDebut').datepicker("setDate", startDate);

Answer 1

我认为问题出在 type="date" 上，因为您也在使用日期选择器，所以只要您需要在 dateDeDebut 上应用日期选择器，只需更改输入的 type。

下面是工作演示代码：

$(function() {
//let start be 12-02-2020 
  var start = "12-02-2020";
  var date_start = new Date(start);
  var startDate = new Intl.DateTimeFormat('en-GB').format(date_start); //gives me this format "dd/mm/yyyy"
//changing date to text
  $('input[type=date]').each(function() {
    this.type = "text";
  });
  $('#dateDeDebut').datepicker();
  $('#dateDeDebut').datepicker('setDate', startDate);
 //printing value on console
  console.log($('#dateDeDebut').val());

});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="col-md-6 col-sm-6 col-xs-12 form-group">
  <label>Date de Debut</label><span style="color:red;"></span>
  <input path="roles[0].startDate" class="form-control" type="date" pattern="dd-mm-yyyy" name="dateDebut" id="dateDeDebut" required="true" />
</div>