Datepicker - изменить формат

Question

Я пытаюсь прочитать дату из одного поля ввода и использовать ее для заполнения поля DatePicker.Формат ввода: ггг-мм-дд, и я хочу прочитать поле DatePicker в том же формате.

Я использую код, который вводит правильную дату в DatePicker, но в формате мм / дд / гг.тогда как я хочу, чтобы поле datepicker было в формате гг-мм-дд

Мой код приведен ниже.Куда я иду не так?

$(document).ready(function() {
  $("#id2").datepicker();
  $("#id2").datepicker({
    dateFormat: 'yy-mm-dd'
  });
});

$("#btn").click(function() {
  var x = $("#id1").val();
  alert(x);
  var z = $.datepicker.parseDate('yy-mm-dd', x);
  alert(z);

  $("#id2").datepicker("setDate", z);
  var y = $("#id2").datepicker({
    dateFormat: 'yy-mm-dd'
  }).val();
  alert(y);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<div>
  <input id="id1" type="text" />
  <input id="btn" type="submit" />
  <input id="id2" type="text" readonly/>
</div>

Answer 1

Привет, это очень просто, вам не нужно инициализировать средство выбора даты в формате по умолчанию.см. ниже кодЯ просто переставил твой код.

$(document).ready(function() {
  $("#id2").datepicker({
    dateFormat: 'yy-mm-dd'
  });
});

$("#btn").click(function() {
  var x = $("#id1").val();
  $("#id2").datepicker("setDate", x);
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<div>
  <input id="id1" type="text" />
  <input id="btn" type="submit" />
  <input id="id2" type="text" readonly/>
</div>

Answer 2

Вы инициализируете средство выбора даты дважды, удаляете первое и оставляете второе с параметром формата даты.

$(document).ready(function() {
  // cahce element reference for later use
  let $id2 = $("#id2"),
    $id1 = $("#id1");

  $id2.datepicker({
    dateFormat: 'yy-mm-dd' // set dateformat here
  });

  $("#btn").click(function() {
    // get input value
    var x = $id1.val();
    // parse the date string to get date object using datepicker utility function
    var z = $.datepicker.parseDate('yy-mm-dd', x);
    // update the date by using setDate method
    $id2.datepicker("setDate", z);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>


<div>
  <input id="id1" value="2019-03-13" type="text" />
  <input id="btn" type="submit" />
  <input id="id2" type="text" readonly/>
</div>

<script>
</script>

Answer 3

<DatePicker className="form-control" name="startDate" selected={this.state.startDate} autoComplete="off" // selected={this.state.startDate} selectsStart startDate={this.state.startDate} endDate={this.state.endDate} onChange={this.handleChangeStart} dateFormat="dd-MM-YYYY" onChange={(e) => { $(".requiredfield").hide() $(document).ready(function () { var endDate = new Date(); }) this.setState({ isSelect: true, startDate: moment(e).format("YYYY-MM-DD") == "Invalid date" ? null : moment(e).format("YYYY-MM-DD") }) }} required /> <i className="fa fa-calendar"></i>

Answer 4

Удалите первое создание экземпляра DatePicker: $("#id2").datepicker();.

Кажется, что вы пытались сначала создать его экземпляр, а затем установить параметр ... Это было бы так:

$("#id2").datepicker();
$("#id2").datepicker("option", {
  dateFormat: 'yy-mm-dd'
});

См. документацию об изменении параметра после его создания.

Но можно создать экземпляр с параметрами сразу, как показано ниже.

$(document).ready(function() {
  $("#id2").datepicker({
    dateFormat: 'yy-mm-dd'
  });
});

$("#btn").click(function() {
  var x = $("#id1").val();
  alert(x);
  var z = $.datepicker.parseDate('yy-mm-dd', x);
  alert(z);

  $("#id2").datepicker("setDate", z);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<div>
  <input id="id1" type="text" />
  <input id="btn" type="submit" />
  <input id="id2" type="text" readonly/>
</div>