Question

我正在尝试从一个输入框中读取日期，并使用该日期来填充datepicker字段。输入格式为yy-mm-dd，我想以相同格式读取datepicker字段。

我正在使用的代码以datepicker填充正确的日期，但格式为mm / dd / yy，而我希望datepicker字段为yy-mm-dd格式

我的代码如下。我要去哪里错了？

$(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() {
  // 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 2

嗨，这很简单，您不需要以默认格式初始化日期选择器。参见下面的代码。我只是重新排列了您的代码。

$(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 3

删除第一个日期选择器实例：$("#id2").datepicker();。

似乎您尝试先实例化它，然后设置一个选项... 原来是这样的：

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

有关实例化选项后，请参见documentation。

但是可以一次实例化所有选项，如下所示。

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

Answer 4

<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 5

<DatePicker className="form-control" name="startDate"
                                            selected={this.state.startDate} 
                                            autoComplete="off"
                                            selectStart
                                            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>

日期选择器-更改格式

5 个答案: