Question

<input id="datepicker1">   

 $(function() {
    $("#datepicker1").datepicker({
        dateFormat: "yy-mm-dd"
    }).datepicker("setDate", "0");
 });

输入中的

datepicker，如何将jquery datepicker date onload显示为div，如下所示：

Answer 1

这是我的jQuery Mobile签到和签出样本，带有合理性测试：

JavaScript的：

var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

var today = new Date(Date.now()),
  cases = {
    "checkInDate": today,
    "checkOutDate": today
  },
  whichDate;

function enableDate(date) {
  var minDate;
  switch (whichDate) {
    case "checkInDate":
      minDate = today;
      break;
    case "checkOutDate":
      minDate = cases["checkInDate"];
      break;
  }
  return [date >= minDate, "", ""];
}

function plausibleCheckOut() {
  var checkInDate = cases["checkInDate"];
  var checkOutDate = cases["checkOutDate"];
  if (checkOutDate < checkInDate) {
    cases["checkOutDate"] = checkInDate;
    showDate("checkOutDate");
  }
}

HTML（在单独的对话框页面中只有一个日期选择器）：

  <div id="guestroom-page" data-role="page">
    <div data-role="header" data-position="fixed">
      <h1>Guestroom</h1>
    </div>
    <div role="main" class="ui-content">
        <div id="checkInDate">
          <h1>Arrival</h1>
          <span></span>
          <div></div>
        </div>
        <br>
        <br>
        <div id="checkOutDate">
          <h1>Departure</h1>
          <span></span>
          <div></div>
        </div>
    </div>
  </div>
  <div id="datepicker-page" data-role="page" data-dialog="true" data-close-btn="none">
    <div data-role="header" data-position="fixed">
      <h1 id="whichDate"></h1>
    </div>
    <div role="main" class="ui-content">
      <div id="datepicker"></div>
    </div>
  </div>

修改我刚刚发现我的日期与datepicker传递日期的比较中出现错误，以下是我如何解决它：

Date.prototype.toMidnight = function (){ this.setHours(0,0,0,0); return this; }; var today = new Date(Date.now()).toMidnight();

Here is the updated working example

Answer 2

选中此JSFiddle

基本上它会隐藏输入并使用div click事件来显示日期选择器。选择日期时，它会使用日期选择器onSelect事件来使用值填充div。

nullable = false

如何将jquery datepicker date onload显示为div

2 个答案: