       dayOfWeekStart: I18n.t('datepicker.day_of_week_start'),
       format:         I18n.t('datepicker.date_format'),
       minDate:        0,
-      scrollMonth:    false
+      scrollMonth:    false,
+      onChangeDateTime: validateDateTime
     });
 
     $('.xd_timepicker').datetimepicker({
       datepicker:     false,
       step:           15,
       format:         I18n.t('datepicker.time_format'),
-      defaultTime:    '12:00'
+      defaultTime:    '12:00',
+      onChangeDateTime: validateDateTime
     });
 
-  showOrHideEndDate = ->
+  showOrHideStartDate = ->
     type = $('#task_scheduling_type').val()
     if type == "between" 
       $('.at-element').hide()

    working_group = $('#task_working_group_id :selected').text()
    escaped_wg = working_group.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
    options = $(organizers).filter("optgroup[label='#{escaped_wg}']").html()
    console.log options
    if options
      $('#task_organizer_id').html(options)
      $('#task_organizer_id').parent().show()

      $('.at-element').show()
      $('.between-element').hide()

  validateDateTime = ->
    start = new Lale.DateTime($('#task_start_date_string'), $('#task_start_time'))
    due   = new Lale.DateTime($('#task_due_date_string'), $('#task_due_time'))

    # when start date is before due date, set them both to start date
    if start.valid() && due.valid() && (start.value > due.value)
      console.log $('#task_due_date_string').val()
      console.log $('#task_start_date_string').val()
      $('#task_due_date_string').val($('#task_start_date_string').val())
      $('#task_due_time').val($('#task_start_time').val())


  if $("form.edit_task, form.new_task").length > 0
    showOrHideStartDate()
    $('#task_scheduling_type').on 'change', showOrHideStartDate
    initTimeDatePickers()

  organizers = $('#task_organizer_id').html()
  showOrganizers = ->
