如何显示jQuery datepicker日期加载到div

Question

<input id="datepicker1">   

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

datepicker in input, how to show jquery datepicker date onload into a div like this:

Answer 1

Here is my jQuery Mobile check-in and check-out sample with plausibility test:

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 (just only one datepicker in a separate dialog-page):

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

EDIT: I just discovered an error in my date comparison with the date passed from the datepicker, here is how i solved it:

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

Check this JSFiddle

Basically it hides the input and use the div click event to show the date picker. When a date is selected it uses the date picker onSelect event to populate the div with values.

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');
   });
 });