Add a datepicker programmatically with jquery_ui

This is some idea on how you can add a datepicker programmatically with the jquery_ui module. This code is not working as it is, its just some code I have cut out from my code. You have to match the form id in the jquery script as the drupal form creates. Look for edit-from, edit-to, edit-month in the script. I have here two alternative jquery scripts. And you find more scripts at the link to jqueryui.com below.

  <?php
  jquery_ui_add('ui.datepicker');

/*  $script = '$(function() {
        var dates = $( "#edit-from, #edit-to" ).datepicker({
            defaultDate: "-1m",
            changeMonth: true,
            numberOfMonths: 3,
            onSelect: function( selectedDate ) {
                var option = this.id == "edit-from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" );
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });';*/

  $script = '$(function() {
                  $( "#edit-month" ).datepicker({
                      changeMonth: true,
                      changeYear: true
                  });
              });';

  drupal_add_js($script, 'inline');

  $form = array();

  $form['stats']['accounts'] = array(
    '#type' => 'select',
    '#title' => t('Accounts'),
    '#default_value' => $project['id'],
    '#options' => $accounts,
    '#weight' => 0,
  );

  $form['stats']['month'] = array(
    '#type' => 'textfield',
    '#title' => t('Month'),
    '#size' => 10,
    '#default_value' => $project['id'],
    '#weight' => 1,
  );

  $form['stats']['year'] = array(
    '#type' => 'textfield',
    '#title' => t('Year'),
    '#size' => 10,
    '#default_value' => $project['id'],
    '#weight' => 2,
  ); 

  $form['stats']['submit'] = array(
    '#type' => 'submit',
    '#title' => 'Submit',
    '#value' => t("Apply"),
    '#weight' => 3,
  );

  return $form;

*******

This example works:

function support_filter_daily_form($form_state, $sent) {

  drupal_add_css(drupal_get_path('module', 'jquery_ui') .'/jquery.ui/themes/smoothness/jquery-ui-1.8.5.custom.css');

  jquery_ui_add('ui.datepicker');

  $script = '$(function() {
                  $( "#edit-day" ).datepicker();
              });';

  drupal_add_js($script, 'inline');

  $accounts = array("all" => "-- ".t("All")." --");
  $accounts += _get_support_clients();
  $accounts += _get_customers();

  $form = array();

  $form['stats']['type'] = array(
    '#type' => 'hidden',
    '#value' => 'day',
    '#weight' => 0,
  );

  $form['stats']['accounts'] = array(
    '#type' => 'select',
    '#title' => t('Accounts'),
    '#default_value' => $sent['account_name'],
    '#options' => $accounts,
    '#weight' => 0,
  );

  $years = _get_stats_years();

  if ($sent['timestamp']) {
      $day = date('Y-m-d', $sent['timestamp']);
  }else{
    $day = date('Y-m-d');
  }

  $form['stats']['day'] = array(
    '#type' => 'textfield',
    '#title' => t('Day'),
    '#default_value' => $day,
    '#size' => 10,
    '#weight' => 2,
  );

  $form['stats']['submit'] = array(
    '#type' => 'submit',
    '#title' => 'Submit',
    '#value' => t("Apply"),
    '#weight' => 3,
  );

  return $form;
 }


?> 

Source:
http://drupal.org/project/jquery_ui
http://jqueryui.com/demos/datepicker/
http://drupal.org/node/292667

Knowledge keywords:

You are here

Add a datepicker programmatically with jquery_ui