Datepicker appears strangely formatted (see pic)

Looks like you're not loading the stylesheet for datepicker.

Yep, it doesn't load CSS

I fixed it by adding it myself:

  jquery_ui_add(array('ui.draggable','ui.resizable'));
  drupal_add_css("sites/all/modules/jquery_ui/jquery.ui/themes/base/ui.resizable.css"); // handles ui

A.

This is what I used to make datepicker appear properly

jquery_ui_add(array('ui.datepicker'));
drupal_add_js('$(document).ready(function(){$("#date").datepicker();});','inline');
drupal_add_css("sites/all/modules/jquery_ui/jquery.ui/themes/default/ui.datepicker.css");

I am having the same problem as ck9. I have tried #4 and #5 solutions with no luck. I copied there code in to the node_expire.info file and made sure my paths where correct but ui.datepicker.css is not being used/seen. Any ideas about what i am doing wrong.

Do I also have to add: stylesheets[all][]=style.css to my themes ".info" file? The README.txt file for jquery_ui dose not mention this.

Thank you.

@marshallexcavating

view source code and make sure that on the page you are using datepicker
the above mentioned files are included in the section

You might have to clean your cache if they don't

I have cleared the cache and none of the files (ui.datepicker.css) are loading in the page source code. I am only adding the above code to the node_expire module .info file, is this the correct place for the code?

Thank you

One simple way to use the datepicker would be in a node

1. Enable the PHP filter from the modules page (admin/build/modules)
2. Add new content (lets say page)
3. Choose php filter from your input format (under body textarea)
4. Paste following code in body and save
(just a simple textbox for date and a submit button that takes you to page "date_receiver")

<?php
jquery_ui_add(array('ui.datepicker'));
drupal_add_js('$(document).ready(function(){$("#date").datepicker();});','inline');
drupal_add_css("sites/all/modules/jquery_ui/jquery.ui/themes/default/ui.datepicker.css");
?>
<form action="date_receiver" method="GET">
<label>Please give date</label><input type="text" id="date" name="date"/>
<input type="submit" value="Send Date"/>
</form>

other way would be to create a custom module

Thank you for your help GiorgosK,

The following is what I did to get the calinder to theme for all all the nodes I want it enabled on for my site.

I think this way of hacking the module is dangerous because whine I upgrade the module i will have to remember to past code in to the ".module" file. Well it works, if there is a better way please let me know.

I pasted GiorgosK's code (the first three lines) in to the node_expire.module file like this and it works. The calender pops up themed from the "ui.datepicker.css" file:

<?php

jquery_ui_add(array('ui.datepicker'));
drupal_add_js('$(document).ready(function(){$("#date").datepicker();});','inline');
drupal_add_css("sites/all/modules/jquery_ui/jquery.ui/themes/default/ui.datepicker.css");

// $Id: node_expire.module,v 1.9 2009/01/31 01:26:53 brmassa Exp $

/**
* @file
* Set a timer into your content, allowing you to perform customized actions.
*/

DEFINE('NODE_EXPIRE_FORMAT', 'Y-m-d');
DEFINE('NODE_EXPIRE_FORMAT_JS', 'yy-mm-dd');

/**
* Implementation of hook_cron().
*/
function node_expire_cron() {
if ($query = db_query('SELECT n.nid FROM {node} n
JOIN {node_expire} ne ON n.nid = ne.nid
WHERE ne.expired = 0 AND ne.expire <= %d', time())) {
while ($node = db_fetch_object($query)) {
$nids[] = $node->nid;
$node = node_load($node->nid);
rules_invoke_event('node_expired', array('node' => &$node));
}
module_load_include('rules.inc', 'node_expire');
node_expire_set_expired($nids, TRUE);
}
}

/**
* Implementation of hook_form_alter().
*
* Add expiration options to the node entry forms
*/
function node_expire_form_alter(&$form, &$form_state, $form_id) {
if (isset($form['type'])
and $form['type']['#value'] .'_node_form' == $form_id
and $ntypes = variable_get('node_expire_ntypes', array())
and $ntypes = $ntypes[$form['type']['#value']]) {

module_load_include('nodeapi.inc', 'node_expire');
_node_expire_form_alter_nodeform($ntypes, $form, $form_state, $form_id);
}
}

/**
* Implementation of hook_form_alter().
*
* Enable/Disable expiration feature on node types
*/
function node_expire_form_node_type_form_alter(&$form, &$form_state) {
if (user_access('administer node expire')) {
$ntypes = variable_get('node_expire_ntypes', array());
$ntype = $form['#node_type']->type;
$form['workflow']['node_expire'] = array(
'#title' => t('Expiration Date'),
'#description' => t('Default date to consider the node expired.') .' '. t('Format: PHP strtotime format.') .' '. t('Leave it blank if this content type never expires.'),
'#type' => 'textfield',
'#default_value' => empty($ntypes[$ntype]['default']) ? '' : $ntypes[$ntype]['default'],
);
$form['workflow']['node_expire_max'] = array(
'#title' => t('Expiration Date Limit'),
'#description' => t('The max date to consider the node expired.') .' '. t('Format: PHP strtotime format.') .' '. t('Leave it blank if this there is no limit date.'),
'#type' => 'textfield',
'#default_value' => empty($ntypes[$ntype]['max']) ? '' : $ntypes[$ntype]['max'],
);
$form['workflow']['node_expire_required'] = array(
'#title' => t('Expiration Date Required'),
'#type' => 'checkbox',
'#default_value' => !empty($ntypes[$ntype]['required']),
);

// Add special validate/submit functions
module_load_include('ntype.inc', 'node_expire');
$form['#validate'][] = '_node_expire_form_node_type_form_alter_validate';
$form['#submit'][] = '_node_expire_form_node_type_form_alter_submit';
}
}

/**
* Implementation of hook_nodeapi().
*/
function node_expire_nodeapi(&$node, $op, $a3 = NULL, $a4 = NULL) {
// Only deal with node types that have the Node Expire feature enabled
$ntypes = variable_get('node_expire_ntypes', array());
if (!$ntypes = $ntypes[$node->type]) {
return;
}

module_load_include('nodeapi.inc', 'node_expire');
_node_expire_nodeapi($ntypes, $node, $op, $a3, $a4);
}

/**
* Implementation of hook_perm().
*/
function node_expire_perm() {
return array('administer node expire', 'edit node expire');
}

/**
* Implementation of hook_views_api().
*/
function node_expire_views_api() {
return array(
'api' => 2,
'path' => drupal_get_path('module', 'node_expire'),
);
}

Here is another approach to get the calender to theme in node_expire: http://drupal.org/node/597210

drupal_add_css(drupal_get_path('module', 'jquery_ui') ."/jquery.ui/themes/default/ui.all.css"); 

Did the trick for me on the latest version.
It's always a good idea not to hardcode the module path.

This is now fixed in latest 2.x-dev of node expire (also 2.04 if I am not mistaken): #597210: Theming datepicker in the node expire_module problem!

...feel free to reopen if problem persists or happens with a different module (other than Node expire I mean)