jquery-mobile - JQueryMobile Datebox - 没有输入框的链接

Question

我希望在单击时有一个小的 cal 图标（或嵌入在输入框中的图标）具有“弹出日历”的标准行为，并且在选择时会触发 onClick 事件或函数。

基本日历是：

<input name="mydate" id="mydate" type="date" data-role="date box" data-options='{"mode": "calbox"}'>

我希望它只是标题右侧的一个图标。这是我现有的标头代码，其中有一个“+”作为指向 OnClick 事件的链接。

<div data-role="header" class="tb">
    <h1>MyDate</h1>
    <a class="ui-btn-right" id="myplus" onclick="openPickDate();">+</a>
</div>

Answer 1

这是一个jsFiddle：

http://jsfiddle.net/ezanker/LS3g6/1/

---

HTML 标记在标题中包含一个隐藏的日期框，右上角有一个按钮，如下所示：

<div data-role="header">
   <h1>My page</h1> 
   <a  data-role="button" id="myplus" class="ui-btn-right" >+</a>
   <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "hideInput": "true", "centerHoriz": "true", "closeCallback":"onCLoseMyDate();"}' />
</div>

将 hideInput 设置为 true 隐藏日历输入框，centerHoriz 将弹出窗口居中显示在屏幕上，并且当您选择日期并关闭弹出窗口时调用 closeCallback。

要启动弹出窗口，请处理 myplus 按钮上的单击事件：

$('#myplus').on('click', function() {
    $('#mydate').datebox('open');
});

然后提供回调函数：

function onCLoseMyDate(){
    var dateObject = $('#mydate').datebox('getTheDate');
    alert(dateObject);   
}