========
Datetime
========

Let's setup all required adapters using zcml. This makes sure we test
the real configuration. Let's render the widgets in different
modes and try to extract the value form an request.

  >>> import datetime
  >>> import z3c.form
  >>> import zope.schema


12 o'clock
----------

Test widgets 12 o'clock PM. (12h (noon) is 12 PM wenn using AM/PM, 24h/0h is
12 AM).

  >>> field = zope.schema.Datetime(default=datetime.datetime(2007, 4, 1, 12))
  >>> widget = self.setupWidget(field)
  >>> widget.update()
  >>> widget.extract() is z3c.form.interfaces.NOVALUE
  True


INPUT_MODE
''''''''''

Render without AM/PM support:

  >>> widget.mode == z3c.form.interfaces.INPUT_MODE
  True
  >>> print widget.render()
  <BLANKLINE>
  <BLANKLINE>  
  <input type="text" id="foo-day" name="bar-day" class="datetime-widget required datetime-field" size="2" maxlength="2" onchange="updateCalendar('#foo');" value="1" /> /
  <select id="foo-month" name="bar-month" class="datetime-widget required datetime-field" onchange="updateCalendar('#foo');">
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4" selected="selected">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
  </select> /
  <input type="text" id="foo-year" name="bar-year" class="datetime-widget required datetime-field" alt="" accesskey="" size="4" maxlength="4" onchange="updateCalendar('#foo');" value="2007" />
  <BLANKLINE>
  <BLANKLINE>
              <input type="hidden"
                  id="foo-calendar"
                  name="bar-calendar"
                  class="bar-calendar" />
              <script type="text/javascript">
                  if (jQuery().dateinput) {
                      jQuery.tools.dateinput.localize("en", {months: "January,February,March,April,May,June,July,August,September,October,November,December",shortMonths: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec",days: "Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday",shortDays: "Mon,Tue,Wed,Thu,Fri,Sat,Sun"});
                      jQuery("#foo-calendar").dateinput({lang: "en", value: new Date(2007, 3, 1, 12, 00), change: function() {
    var value = this.getValue("yyyy-m-d").split("-");
    jQuery("#foo-year").val(value[0]);
    jQuery("#foo-month").val(value[1]);
    jQuery("#foo-day").val(value[2]);
  }, selectors: true, trigger: true, yearRange: [-10, 10]}).unbind('change')
                          .bind('onShow', function (event) {
                              var trigger_offset = jQuery(this).next().offset();
                              jQuery(this).data('dateinput').getCalendar().offset(
                                  {top: trigger_offset.top+20, left: trigger_offset.left}
                              );
                          });
                      jQuery("#foo-calendar").next().css({'width': '16px', 'vertical-align': 'middle', 'display': 'inline-block', 'background': 'url(popup_calendar.gif)', 'height': '16px'});
                  }
  <BLANKLINE>
                  function updateCalendar(widgetId) {
                      var y = jQuery(widgetId + '-year').val();
                      var m = jQuery(widgetId + '-month').val();
                      var d = jQuery(widgetId + '-day').val();
                      jQuery(widgetId + '-calendar').val(m + '/' + d + '/' + y);
                      jQuery(widgetId + '-calendar').data()['dateinput'].setValue(new Date(m + '/' + d + '/' + y));
                  }
                 </script>
  <BLANKLINE>
  <BLANKLINE>
  <BLANKLINE>
  &nbsp;
  <BLANKLINE>
  <input type="text" id="foo-hour" name="bar-hour" class="datetime-widget required datetime-field" alt="" accesskey="" size="2"  maxlength="2" onchange="updateCalendar('#foo');" value="12" /> :
  <input type="text" id="foo-min" name="bar-min" class="datetime-widget required datetime-field" alt="" accesskey="" size="2"  maxlength="2" onchange="updateCalendar('#foo');" value="00" />
  <input name="bar-empty-marker" type="hidden" value="1" />

  >>> widget.request = self.testrequest(
  ...     form={'bar-day': '1',
  ...           'bar-month': '4',
  ...           'bar-year': '2007',
  ...           'bar-hour': '12',
  ...           'bar-min': '00',
  ...           'bar-empty-marker': '1',
  ...           }
  ...     )
  >>> widget.extract()
  ('2007', '4', '1', '12', '00')


Render with AM/PM support:

  >>> widget.ampm = True
  >>> print widget.render()
  <BLANKLINE>
  <BLANKLINE>
  <input type="text" id="foo-day" name="bar-day" class="datetime-widget required datetime-field" size="2" maxlength="2" onchange="updateCalendar('#foo');" value="1" /> /
  <select id="foo-month" name="bar-month" class="datetime-widget required datetime-field" onchange="updateCalendar('#foo');">
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4" selected="selected">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
  </select> /
  <input type="text" id="foo-year" name="bar-year" class="datetime-widget required datetime-field" alt="" accesskey="" size="4" maxlength="4" onchange="updateCalendar('#foo');" value="2007" />
  <BLANKLINE>
  <BLANKLINE>
              <input type="hidden"
                  id="foo-calendar"
                  name="bar-calendar"
                  class="bar-calendar" />
              <script type="text/javascript">
                  if (jQuery().dateinput) {
                      jQuery.tools.dateinput.localize("en", {months: "January,February,March,April,May,June,July,August,September,October,November,December",shortMonths: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec",days: "Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday",shortDays: "Mon,Tue,Wed,Thu,Fri,Sat,Sun"});
                      jQuery("#foo-calendar").dateinput({lang: "en", value: new Date(2007, 3, 1, 12, 00), change: function() {
    var value = this.getValue("yyyy-m-d").split("-");
    jQuery("#foo-year").val(value[0]);
    jQuery("#foo-month").val(value[1]);
    jQuery("#foo-day").val(value[2]);
  }, selectors: true, trigger: true, yearRange: [-10, 10]}).unbind('change')
                          .bind('onShow', function (event) {
                              var trigger_offset = jQuery(this).next().offset();
                              jQuery(this).data('dateinput').getCalendar().offset(
                                  {top: trigger_offset.top+20, left: trigger_offset.left}
                              );
                          });
                      jQuery("#foo-calendar").next().css({'width': '16px', 'vertical-align': 'middle', 'display': 'inline-block', 'background': 'url(popup_calendar.gif)', 'height': '16px'});
                  }
  <BLANKLINE>
                  function updateCalendar(widgetId) {
                      var y = jQuery(widgetId + '-year').val();
                      var m = jQuery(widgetId + '-month').val();
                      var d = jQuery(widgetId + '-day').val();
                      jQuery(widgetId + '-calendar').val(m + '/' + d + '/' + y);
                      jQuery(widgetId + '-calendar').data()['dateinput'].setValue(new Date(m + '/' + d + '/' + y));
                  }
                 </script>
  <BLANKLINE>
  <BLANKLINE>
  <BLANKLINE>
  &nbsp;
  <BLANKLINE>
  <input type="text" id="foo-hour" name="bar-hour" class="datetime-widget required datetime-field" alt="" accesskey="" size="2"  maxlength="2" onchange="updateCalendar('#foo');" value="12" /> :
  <input type="text" id="foo-min" name="bar-min" class="datetime-widget required datetime-field" alt="" accesskey="" size="2"  maxlength="2" onchange="updateCalendar('#foo');" value="00" />
  <select id="foo-ampm" name="bar-ampm" class="datetime-widget required datetime-field" onchange="updateCalendar('#foo');">
      <option value="AM">AM</option>
      <option value="PM" selected="selected">PM</option>
  </select>
  <input name="bar-empty-marker" type="hidden" value="1" />

  >>> widget.request = self.testrequest(
  ...     form={'bar-day': '1',
  ...           'bar-month': '4',
  ...           'bar-year': '2007',
  ...           'bar-hour': '12',
  ...           'bar-min': '00',
  ...           'bar-ampm': 'PM',
  ...           'bar-empty-marker': '1',
  ...           }
  ...     )
  >>> widget.extract()
  ('2007', '4', '1', '12', '00')


DISPLAY_MODE
''''''''''''

  >>> widget.mode = z3c.form.interfaces.DISPLAY_MODE
  >>> print widget.render()
  <span id="foo"
        class="datetime-widget required datetime-field">4/1/07 12:00 PM</span>


HIDDEN_MODE
'''''''''''

  >>> widget.mode = z3c.form.interfaces.HIDDEN_MODE
  >>> print widget.render()
  <input type="hidden" id="foo" name="bar"
           class="hidden-widget" value="4/1/07 12:00 PM" />

  >>> widget.request = self.testrequest(form={'bar': '4/1/07 12:00 PM'})
  >>> widget.extract()
  ('2007', '4', '1', '12', '0')


13 o'clock
----------

Same as above, but with at 13h / 1 PM.


INPUT_MODE
''''''''''

  >>> field = zope.schema.Datetime(default=datetime.datetime(2007, 4, 1, 13))
  >>> widget = self.setupWidget(field)
  >>> widget.ampm = True
  >>> widget.update()
  >>> widget.extract() is z3c.form.interfaces.NOVALUE
  True

  >>> print widget.render()
  <BLANKLINE>
  <BLANKLINE>
  <input type="text" id="foo-day" name="bar-day" class="datetime-widget required datetime-field" size="2" maxlength="2" onchange="updateCalendar('#foo');" value="1" /> /
  <select id="foo-month" name="bar-month" class="datetime-widget required datetime-field" onchange="updateCalendar('#foo');">
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4" selected="selected">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
  </select> /
  <input type="text" id="foo-year" name="bar-year" class="datetime-widget required datetime-field" alt="" accesskey="" size="4" maxlength="4" onchange="updateCalendar('#foo');" value="2007" />
  <BLANKLINE>
  <BLANKLINE>
              <input type="hidden"
                  id="foo-calendar"
                  name="bar-calendar"
                  class="bar-calendar" />
              <script type="text/javascript">
                  if (jQuery().dateinput) {
                      jQuery.tools.dateinput.localize("en", {months: "January,February,March,April,May,June,July,August,September,October,November,December",shortMonths: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec",days: "Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday",shortDays: "Mon,Tue,Wed,Thu,Fri,Sat,Sun"});
                      jQuery("#foo-calendar").dateinput({lang: "en", value: new Date(2007, 3, 1, 13, 00), change: function() {
    var value = this.getValue("yyyy-m-d").split("-");
    jQuery("#foo-year").val(value[0]);
    jQuery("#foo-month").val(value[1]);
    jQuery("#foo-day").val(value[2]);
  }, selectors: true, trigger: true, yearRange: [-10, 10]}).unbind('change')
                          .bind('onShow', function (event) {
                              var trigger_offset = jQuery(this).next().offset();
                              jQuery(this).data('dateinput').getCalendar().offset(
                                  {top: trigger_offset.top+20, left: trigger_offset.left}
                              );
                          });
                      jQuery("#foo-calendar").next().css({'width': '16px', 'vertical-align': 'middle', 'display': 'inline-block', 'background': 'url(popup_calendar.gif)', 'height': '16px'});
                  }
  <BLANKLINE>
                  function updateCalendar(widgetId) {
                      var y = jQuery(widgetId + '-year').val();
                      var m = jQuery(widgetId + '-month').val();
                      var d = jQuery(widgetId + '-day').val();
                      jQuery(widgetId + '-calendar').val(m + '/' + d + '/' + y);
                      jQuery(widgetId + '-calendar').data()['dateinput'].setValue(new Date(m + '/' + d + '/' + y));
                  }
                 </script>
  <BLANKLINE>
  <BLANKLINE>
  <BLANKLINE>
  &nbsp;
  <BLANKLINE>  
  <input type="text" id="foo-hour" name="bar-hour" class="datetime-widget required datetime-field" alt="" accesskey="" size="2"  maxlength="2" onchange="updateCalendar('#foo');" value="01" /> :
  <input type="text" id="foo-min" name="bar-min" class="datetime-widget required datetime-field" alt="" accesskey="" size="2"  maxlength="2" onchange="updateCalendar('#foo');" value="00" />
  <select id="foo-ampm" name="bar-ampm" class="datetime-widget required datetime-field" onchange="updateCalendar('#foo');">
      <option value="AM">AM</option>
      <option value="PM" selected="selected">PM</option>
  </select>
  <input name="bar-empty-marker" type="hidden" value="1" />

  >>> widget.request = self.testrequest(
  ...     form={'bar-day': '1',
  ...           'bar-month': '4',
  ...           'bar-year': '2007',
  ...           'bar-hour': '01',
  ...           'bar-min': '00',
  ...           'bar-ampm': 'PM',
  ...           'bar-empty-marker': '1',
  ...           }
  ...     )
  >>> widget.extract()
  ('2007', '4', '1', '13', '00') 

  >>> print widget.get_js()
  <BLANKLINE>
              <input type="hidden"
                  id="foo-calendar"
                  name="bar-calendar"
                  class="bar-calendar" />
              <script type="text/javascript">
  ...
        
DISPLAY_MODE
''''''''''''

  >>> widget.mode = z3c.form.interfaces.DISPLAY_MODE
  >>> print widget.render()
  <span id="foo"
        class="datetime-widget required datetime-field">4/1/07 1:00 PM</span>


HIDDEN_MODE
'''''''''''

  >>> widget.mode = z3c.form.interfaces.HIDDEN_MODE
  >>> print widget.render()
  <input type="hidden" id="foo" name="bar"
           class="hidden-widget" value="4/1/07 1:00 PM" />

  >>> widget.request = self.testrequest(form={'bar': '4/1/07 1:00 PM'})
  >>> widget.extract()
  ('2007', '4', '1', '13', '0')
