Building a Shared Calendar [Part 6]: Creating the event form with a date-time-picker

Now that the site can authenticate users the next step is to allow them to create events in the shared calendar. I used BlazeCSS to create the modal dialog and a datetimepicker jQuery plugin to help the user select the date and the time of the event.

Setting it up was very simple:

var defaultStart = new Date();
defaultStart.setMinutes(0);
defaultStart.setSeconds(0);

$('#startDate').datetimepicker({
    startDate: defaultStart,
    onChangeDateTime: function(dp) {
        vm.event.startTime(dp && dp.getTime());
      }
});

There are many options available when setting up the picker. In this case I used the 'startDate' so that by default it shows today's date for the event. The 'onChangeDateTime' function is called when a user has made a change to the date time and in this case I use it to update the Knockout view model with the selected time.

Source code is available at bitbucket or you can play with the live test site.