Jquery Mobile日期选择器，选择日期并显示事件

Question

我有一个表格，里面有活动和它们重复的频率(周一、周二等)我的手机网页将显示今天的详细信息。我想在页面上的导航栏中添加一个日期选择器按钮。

以下代码获取"今日"的信息

//todays date
$current_day = date('N');
echo "<ul data-role='listview' data-inset='true'>";
while($row = mysqli_fetch_array($result))
{
//if the event is on today then print the details
if(strpos($row['Day'], $current_day) !== false){
echo "<li>";
echo "<h1>".$row['Start']." - ".$row['End']."</h1>";
echo "<h2>".$row['Class']."</h2>";
echo "<h2>".$row['Instructor']."</h2>";
echo "</li>";
}
}
echo "</ul>";

我想使用日期选择器将当前日期设置为用户选择的日期。我试过使用Jquery Mobile Date Box，但不知道如何使用该日期。(使用CalBox)

Answer 1

您可以按如下方式使用jQM日期框：

使用type="date"创建一个input，并根据需要设置模式。如果希望在用户设置新日期后立即对其作出响应，则可以为closeCallback添加回调。

<input name="Date1" id="Date1" type="date" data-role="datebox" data-options='{"mode": "calbox", "closeCallback": "onClose" }' /> 
function onClose(){
alert($('#Date1').datebox('getTheDate').getDay());
}

你也可以稍后获取日期，比如点击按钮时：

$('#btndatebox').on('click', function () {
var currDate = $('#Date1').datebox('getTheDate').getDay();
alert(currDate);
});

getDay()是用于从日期对象中获取星期几的javascript函数。

这是DEMO