diff --git a/components/date.inc b/components/date.inc index 2450f73..093d712 100644 --- a/components/date.inc +++ b/components/date.inc @@ -6,6 +6,21 @@ */ /** + * No date picker option. + */ +define('DATEPICKER_NONE', 0); + +/** + * Popup date picker option. + */ +define('DATEPICKER_POPUP', 1); + +/** + * Inline date picker option. + */ +define('DATEPICKER_INLINE', 2); + +/** * Implements _webform_defaults_component(). */ function _webform_defaults_date() { @@ -22,7 +37,7 @@ function _webform_defaults_date() { 'start_date' => '-2 years', 'end_date' => '+2 years', 'year_textfield' => 0, - 'datepicker' => 1, + 'datepicker' => DATEPICKER_POPUP, 'title_display' => 0, 'description' => '', 'description_above' => FALSE, @@ -90,10 +105,15 @@ function _webform_edit_date($component) { ); $form['display']['datepicker'] = array( - '#type' => 'checkbox', + '#type' => 'radios', '#title' => t('Enable popup calendar'), '#default_value' => $component['extra']['datepicker'], - '#description' => t('Enable a JavaScript date picker next to the date field.'), + '#options' => array( + DATEPICKER_POPUP => t('Popup calendar'), + DATEPICKER_INLINE => t('Inline calendar'), + DATEPICKER_NONE => t('No calendar'), + ), + '#description' => t('Enable a JavaScript date picker, either as a popup or inlined.'), '#weight' => 2, '#parents' => array('extra', 'datepicker'), ); @@ -190,8 +210,8 @@ function _webform_render_date($component, $value = NULL, $filter = TRUE, $submis '#translatable' => array('title', 'description'), ); - if ($component['extra']['datepicker']) { - $element['#datepicker'] = TRUE; + if ($component['extra']['datepicker'] != DATEPICKER_NONE) { + $element['#datepicker'] = $component['extra']['datepicker']; $element['#attached'] = array( 'library' => array( array('system', 'ui.datepicker'), @@ -375,8 +395,12 @@ function theme_webform_date($variables) { $class = array('webform-container-inline'); // Add the JavaScript calendar if available (provided by Date module package). - if (!empty($element['#datepicker'])) { + $datepicker = $element['#datepicker']; + if ($datepicker != DATEPICKER_NONE) { $class[] = 'webform-datepicker'; + if ($datepicker == DATEPICKER_INLINE) { + $class[] = 'webform-datepicker-inline'; + } $calendar_class = array('webform-calendar'); if ($element['#start_date']) { $calendar_class[] = 'webform-calendar-start-' . $element['#start_date']; @@ -386,8 +410,8 @@ function theme_webform_date($variables) { } $calendar_class[] ='webform-calendar-day-' . variable_get('date_first_day', 0); - $calendar = theme('webform_calendar', array('component' => $element['#webform_component'], 'calendar_classes' => $calendar_class)); - } + $calendar = theme('webform_calendar', array('component' => $element['#webform_component'], 'calendar_classes' => $calendar_class, 'datepicker_style' => $datepicker)); +} $output = ''; $output .= '
'; diff --git a/css/webform.css b/css/webform.css index ce3d42f..1c4c475 100644 --- a/css/webform.css +++ b/css/webform.css @@ -18,6 +18,9 @@ html.js input.webform-calendar { .webform-container-inline div.form-item { display: inline; } +.webform-datepicker-inline div.form-item { + display: none; +} .webform-container-inline div.description { display: block; } diff --git a/js/webform.js b/js/webform.js index d2c6675..3aac3b7 100644 --- a/js/webform.js +++ b/js/webform.js @@ -25,15 +25,19 @@ $('div.webform-datepicker').each(function () { var $webformDatepicker = $(this); var $calendar = $webformDatepicker.find('input.webform-calendar'); + var $inline = $webformDatepicker.find('div.webform-calendar-inline'); // Ensure the page we're on actually contains a datepicker. - if ($calendar.length == 0) { + if ($calendar.length == 0 && $inline.length == 0) { return; + } else if ($inline.length != 0) { + $calendar = $inline; } var startDate = $calendar[0].className.replace(/.*webform-calendar-start-(\d{4}-\d{2}-\d{2}).*/, '$1').split('-'); var endDate = $calendar[0].className.replace(/.*webform-calendar-end-(\d{4}-\d{2}-\d{2}).*/, '$1').split('-'); var firstDay = $calendar[0].className.replace(/.*webform-calendar-day-(\d).*/, '$1'); + // Convert date strings into actual Date objects. startDate = new Date(startDate[0], startDate[1] - 1, startDate[2]); endDate = new Date(endDate[0], endDate[1] - 1, endDate[2]); @@ -55,6 +59,7 @@ firstDay: parseInt(firstDay), minDate: startDate, maxDate: endDate, + inline: $inline.length, onSelect: function (dateText, inst) { var date = dateText.split('-'); $webformDatepicker.find('select.year, input.year').val(+date[0]).trigger('change'); @@ -83,7 +88,7 @@ }); // Prevent the calendar button from submitting the form. - $calendar.click(function (event) { + $calendar.click(function(event) { $(this).focus(); event.preventDefault(); }); diff --git a/templates/webform-calendar.tpl.php b/templates/webform-calendar.tpl.php index ca57cec..b3d295f 100644 --- a/templates/webform-calendar.tpl.php +++ b/templates/webform-calendar.tpl.php @@ -5,4 +5,8 @@ * Theme the button for the date component date popup. */ ?> + + +
+