Question

I am writing a script that utilizes the datetimepicker widget, which is an extension of JQuery’s datepicker widget. The widget is applied dynamically to a generated list of events via this code:

$(function() {
    $( 'input[id^="event_"]' ).datetimepicker({
        stepMinute: 15  
    });
});

The date/time can be set via the following option:

// where x is the dynamic ID of the row
var dtpicker = $( '#event_x' );
dtpicker.datetimepicker('setDate', (new Date()) );

Here is how the rows are generated:

if($results != false){
    foreach($results as $event){
        echo "<tr>\n";
        echo "<td><input type=\"text\" id=\"" . $event['id'] . "\" value=\"" . $event['name'] . "\" /></td>\n";
        echo "<td><input type=\"text\" id=\"event_" . $event['id'] . "\" value=\"" . $event['date'] . "\" /></td>\n";
        echo "<td>Save stuff here?</td>\n";
        echo "</tr>\n";
    }
    unset($event);
}else{
    echo "<div>Error getting events</div>\n";
}

Basically I have to loop through the generated rows, pull the date from the appropriate field, convert it from a string to a Date() and put that into the option.

I think I am going to use the .click() function to accomplish this. So far this is what I have come up with:

$( 'input[id^="event_"]' ).click(function() {
    //input format: 2011-09-15 20:30:00
    var mainSplit = $(this).val().split(" ");
    var dateSplit = mainSplit[0].split("-");
    var timeSplit = mainSplit[1].split(":");

    //alert($(this).val());
});

Any pointers/suggestions/solutions are greatly appreciated!

Answer 1

You can simply pass the date string to JavaScript’s date constructor, and it’ll create a date for you:

var theDate = new Date('2011-09-15 20:30:00'); // returns a date object