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: