jQuery Mobile - 在html表中的Datepicker值

Question

我有以下datepicker的代碼，它默認採用今天的日期，但用戶可以自由地更改它。

<script> 
     $(function() { 
     //var datepicker = 
     $("#datepicker1").datepicker({ 
     dateFormat: "yy-mm-dd" 
     }).datepicker("setDate", "0"); 
     }); 
    </script> 

我的問題是是否可以讀取日期選擇器內的值（缺省值或用戶是否選擇了改變它），並以類似於下面HTML表顯示它：

「表」 ......

'日' 日期： '$ DATEPICKER1' '/日'

... '/表'

Answer 1

你的意思是這樣的：

function showDate(value) { 
 
    var columnHeader = $("#myTable").find('th span'); 
 
    $(columnHeader[0]).html(value); 
 
    $("#myTable").append("<tr><td>" + value + "</td></tr>"); 
 
} 
 

 
$(document).on("pagecreate", "#page1", function() { 
 
    $("#datepicker").datepicker({ 
 
    onSelect: function(dateText) { 
 
     showDate(dateText); 
 
    } 
 
    }); 
 
    $('#datepicker').datepicker("option", "dateFormat", "DD, d MM, yy"); 
 
    var today = new Date(Date.now()); 
 
    $("#datepicker").datepicker("setDate", today); 
 
    var dateFormat = $("#datepicker").datepicker("option", "dateFormat"); 
 
    var date = $("#datepicker").datepicker("getDate"); 
 
    var dateText = $.datepicker.formatDate(dateFormat, date); 
 
    showDate(dateText); 
 
}); 
 

 
/* 
 
* jQuery Mobile: jQuery UI Datepicker Monkey Patch 
 
* http://salman-w.blogspot.com/2014/03/jquery-ui-datepicker-for-jquery-mobile.html 
 
*/ 
 
(function() { 
 
    // use a jQuery Mobile icon on trigger button 
 
    $.datepicker._triggerClass += " ui-btn ui-btn-right ui-icon-carat-d ui-btn-icon-notext ui-corner-all"; 
 
    // replace jQuery UI CSS classes with jQuery Mobile CSS classes in the generated HTML 
 
    $.datepicker._generateHTML_old = $.datepicker._generateHTML; 
 
    $.datepicker._generateHTML = function(inst) { 
 
    return $("<div></div>").html(this._generateHTML_old(inst)) 
 
     .find(".ui-datepicker-header").removeClass("ui-widget-header ui-helper-clearfix").addClass("ui-bar-inherit").end() 
 
     .find(".ui-datepicker-prev").addClass("ui-btn ui-btn-left ui-icon-carat-l ui-btn-icon-notext").end() 
 
     .find(".ui-datepicker-next").addClass("ui-btn ui-btn-right ui-icon-carat-r ui-btn-icon-notext").end() 
 
     .find(".ui-icon.ui-icon-circle-triangle-e, .ui-icon.ui-icon-circle-triangle-w").replaceWith(function() { 
 
     return this.childNodes; 
 
     }).end() 
 
     .find("span.ui-state-default").removeClass("ui-state-default").addClass("ui-btn").end() 
 
     .find("a.ui-state-default.ui-state-active").removeClass("ui-state-default ui-state-highlight ui-priority-secondary ui-state-active").addClass("ui-btn ui-btn-active").end() 
 
     .find("a.ui-state-default").removeClass("ui-state-default ui-state-highlight ui-priority-secondary").addClass("ui-btn").end() 
 
     .find(".ui-datepicker-buttonpane").removeClass("ui-widget-content").end() 
 
     .find(".ui-datepicker-current").removeClass("ui-state-default ui-priority-secondary").addClass("ui-btn ui-btn-inline ui-mini").end() 
 
     .find(".ui-datepicker-close").removeClass("ui-state-default ui-priority-primary").addClass("ui-btn ui-btn-inline ui-mini").end() 
 
     .html(); 
 
    }; 
 
    // replace jQuery UI CSS classes with jQuery Mobile CSS classes on the datepicker div, unbind mouseover and mouseout events on the datepicker div 
 
    $.datepicker._newInst_old = $.datepicker._newInst; 
 
    $.datepicker._newInst = function(target, inline) { 
 
    var inst = this._newInst_old(target, inline); 
 
    if (inst.dpDiv.hasClass("ui-widget")) { 
 
     inst.dpDiv.removeClass("ui-widget ui-widget-content ui-helper-clearfix").addClass(inline ? "ui-content" : "ui-content ui-overlay-shadow ui-body-a").unbind("mouseover mouseout"); 
 
    } 
 
    return inst; 
 
    }; 
 
})();

/* 
 
* jQuery Mobile: jQuery UI Datepicker Monkey Patch 
 
* http://salman-w.blogspot.com/2014/03/jquery-ui-datepicker-for-jquery-mobile.html 
 
*/ 
 

 
.ui-datepicker { 
 
    display: none; 
 
} 
 

 

 
/* set height and left/right margin to accomodate prev/next icons */ 
 

 
.ui-datepicker-header { 
 
    position: relative; 
 
    padding: 0.3125em 2.0625em; 
 
    line-height: 1.75em; 
 
    text-align: center; 
 
} 
 

 
.ui-datepicker-header .ui-btn { 
 
    margin: -1px 0 0 0; 
 
} 
 

 

 
/* fixed width layout for calendar; cells are fixed width */ 
 

 
.ui-datepicker-calendar { 
 
    border-collapse: collapse; 
 
    line-height: 2; 
 
} 
 

 
.ui-datepicker-calendar .ui-btn { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 2em; 
 
    line-height: inherit; 
 
} 
 

 
.ui-datepicker-today .ui-btn { 
 
    text-decoration: underline !important; 
 
} 
 

 
.ui-datepicker-days-cell-over .ui-btn { 
 
    border-color: inherit !important; 
 
} 
 

 
.ui-datepicker-buttonpane .ui-btn { 
 
    float: left; 
 
    margin: 0.5em 0 0; 
 
    padding: 0.5em 1em; 
 
} 
 

 
.ui-datepicker-buttonpane .ui-btn:last-child { 
 
    float: right; 
 
} 
 

 

 
/* class that can be added to datepicker <input> element's wrapper; makes room for trigger button */ 
 

 
.dp-input-button-wrap { 
 
    position: relative; 
 
    padding-right: 2.5em; 
 
} 
 

 
.dp-input-button-wrap .ui-btn { 
 
    top: 0.1875em; 
 
    margin: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 
<body> 
 
    <div id="page1" data-role="page"> 
 
    <div data-role="header"> 
 
     <h1>Pick a date</h1> 
 
    </div> 
 
    <div role="main" class="ui-content"> 
 
     <form> 
 
     <input name="date" id="datepicker"> 
 
     </form> 
 
    </div> 
 
    <table id="myTable"> 
 
     <thead> 
 
     <tr> 
 
      <th>Date:&nbsp;<span></span></th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</body> 
 
</html>