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: