如何显示 jquery 日期选择器日期加载到 div

Question

<input id="datepicker1">   

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

输入中的日期选择器，如何显示 jquery 日期选择器日期加载到 div 中，如下所示：

Answer 1

勾选这个JSFiddle

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

var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'nov', 'Dec'];

$(function() {
   $("#datepicker1").datepicker({
     dateFormat: "yy-mm-dd",
     onSelect: function(dateText) {
       var dateObj = $(this).datepicker('getDate');

       $('#month').html(months[dateObj.getMonth()]);
       $('#day-name').html(days[dateObj.getDay()]);

       var dayNo = dateObj.getDate();

       if (dayNo.length == 1)
         $('#day-number').html('0' + dayNo);
       else
         $('#day-number').html(dayNo);
     }
   }).datepicker("setDate", "0");

   //div click event
   $('#date').on("click", function() {
     $('#datepicker1').datepicker('show');
   });
 });

Answer 2

这是我的 jQuery 移动登记入住和退房示例以及真实性测试：

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>

编辑： 我刚刚发现我的日期与从日期选择器传递的日期进行比较时出错，这是我解决它的方法：

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

如何显示 jquery 日期选择器日期加载到 div

how to show jquery datepicker date onload into a div

javascript

jquery

jquery-ui-datepicker