Question

我希望在点击时有一个小的校准图标（或输入框中嵌入的图标）具有“弹出日历”的标准行为，并且在选择时触发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按钮上处理click事件：

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

然后提供回调函数：

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

JQueryMobile Datebox - 没有输入框的链接

1 个答案:

这是一个jsFiddle：