- datetime ||= nil
- if editable && f = form_builder
  = f.hidden_field(attr_name, value: datetime)
  - # TODO(jon): Figure out a better way to do transforms. This works for now though.
  = f.hidden_field("transforms[#{attr_name}]", value: "DateTime#parse")
  .row
    .col-xs-12.col-md-4
      .input-group.pikadate
        %input.form-control{type: :text, value: datetime, id: "#{form_id}-date"}
        %span.input-group-addon
          %span.glyphicon.glyphicon-calendar
    .col-xs-12.col-md-4
      .input-group.clockpicker{"data-align" => "top", "data-autoclose" => "true", "data-placement" => "right"}
        %input.form-control{:type => "text", :value => datetime, id: "#{form_id}-time"}
        %span.input-group-addon
          %span.glyphicon.glyphicon-time



  - content_for(:javascript) do
    :javascript
      (function() {
        var datePicker,
            hiddenInput = $('##{form_id}'),
            date = new Date(hiddenInput.val());

        // Date Specific Code
        var handleDateSelect = function() {
          var pickerDate = datePicker.getDate();
          console.log("Setting the date from " + date + " to " + pickerDate);

          date.setUTCFullYear(pickerDate.getUTCFullYear());
          date.setUTCMonth(pickerDate.getUTCMonth());
          date.setUTCDate(pickerDate.getUTCDate());

          hiddenInput.val(date.toUTCString());
        }

        datePicker = new Pikaday({ field: $('##{form_id}-date')[0], onSelect: handleDateSelect });

        // Time Specific Code
        var timeInput = $('##{form_id}-time');

        var parseTime = function(timeString) {
          var ret = new Date();

          var time = timeString.match(/(\d+)(?::(\d\d))?\s*(p?)/i);
          if (!time) {
            return NaN;
          }
          var hours = parseInt(time[1], 10);
          if (hours == 12 && !time[3]) {
            hours = 0;
          } else {
            hours += (hours < 12 && time[3]) ? 12 : 0;
          }

          ret.setHours(hours);
          ret.setMinutes(parseInt(time[2], 10) || 0);
          ret.setSeconds(0, 0);
          return ret;
        }

        var handleTimeSelect = function() {
          var time = parseTime(timeInput.val());

          date.setUTCHours(time.getUTCHours());
          date.setUTCMinutes(time.getUTCMinutes());

          hiddenInput.val(date.toUTCString());
        }

        timeInput.clockpicker({
          autoclose: true,
          donetext: "Done",
          twelvehour: true,
          afterDone: handleTimeSelect,
          default: date.getHours() + ":" + date.getMinutes()
        });

        timeInput.val(date.getHours() + ":" + date.getMinutes());


        // Make sure we set times when the form is input in case the user typed in values.
        timeInput.closest("form").submit(function(event) {
          // TODO(jon): Add code to handle typed in dates.
          handleTimeSelect();
        });
      })();


- else
  %p.well
    -# TODO(jon): Make this show an uneditable date and time field.
    = datetime