Jquery Mobile Datepicker, Choose date and display events

Question

I have a table with activities and the frequency they are repeated (Mon,Tue, etc) The mobile web page I have will display the details for today. I want to add a datepicker button to a navbar on the page.

The following code gets the information for 'today'

//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>";

I would like to use a date picker to set the current day to the user's choice. I have tried using Jquery Mobile Date Box but can't figure out how to use the date that way. (Using the CalBox)

Answer 1

You can use the jQM datebox as follows:

Create an input with type="date" and set the mode as desired. If you want to respond to the new date as soon as the user sets it, you can add a callback for closeCallback.

<input name="Date1" id="Date1" type="date" data-role="datebox" data-options='{"mode": "calbox", "closeCallback": "onClose" }' /> 

function onClose(){
    alert($('#Date1').datebox('getTheDate').getDay());
}

You can also just get the date later, say when a button is clicked:

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

getDay() is the javascript function for getting the day of the week from a date object.

Here is a DEMO