javascript | Hexónio Blog

jQuery Calendar Date Picker in Django Forms

One of Django missing features that all developers miss is the lack of a calendar component that allows a user to select a date from a visual component instead of writing the date in a text field using a predefined format.

The common solution that seems to use the calendar from the administrator graphical interface.
Unfortunately this is a hack that takes too much work for a possible failure, since a Django update may break it all.

While Django does not provide such component, the best option is to use a solid solution, such as using the independent jQuery Calendar Date Picker.
This can be set up in ten minutes and does not depend on Django version.

The first step is to download the jQuery Datepicker component.

Uncompress it and put it in your media directory, so that it looks something like “media/jquery”, or something else that is fits best with your structure. For the current example “media/jquery” will be used.

In your HTML file, include the following scripts:

Please note that the file names will vary according to the jQuery version and the CSS will vary according with the selected template. Don’t forget to confirm the location and file names.

Next, you must bind your form objects with the jQuery Datepicker with the following script. Also include this on your HTML file

Where “form_date_field” should be your form date field, keep the “#id_” because Django precedes the ids with “id_”

If you require internationalization, load the correspondent i18n file after the “jquery…min.js” file:

This will load the appropriate i18n file.

If you try it and it’s not working, check the files location and the name of the object you’re binding to, these are the two most common problems.

MetaMod Position Display Management

When using Joomla! sometimes one requires to hide some information, like a specific menu, or an entire position.

MetaMod let’s you do this in a quite easy way. One can follow their documented technique of moving stuff from an non-existing position into the real position, or one can use a simpler strategy that does not imply having virtual positions and nor moving stuff between these virtual positions and the real position.

Imagine you wish to hide all position placeholders on a marketing landing page. It’s quite easy:

Download and install MetMod. Don’t forget to read the documentation to know how MetaMod works.
The first step is to define the MetaMod position in the last one to be interpreted by Joomla!, usually the footer or the debug.
This guarantees that our code will be executed only when all positions are already loaded.
The second step is to define the MetaMod execution rules, as stated in the documentation.
Next, in the PHP window, include the execution code that will hide or display the position through the injection of a Javascript conde snippet.

Here’s an example: let’s say that one wishes to hide the stuff on the left of the page (usually the menu, login, etc.) when the user is located in the Virtuemart Cart plugin.
Here’s what one has to do:

Identify the location through the $option and $view parameter values.
Inject a Javascript script that finds the left position element and hides it.
If required, adjust the size of the remaining position in order to claim the extra space.
Return the current position.

Here’s an example that hides the “column_left” position. Please note that this MetaMod example is located in the “debug” position, change it if necessary.

if ($option == 'com_virtuemart' and ($view == 'cart' or $view == 'pluginresponse'))
{
echo "
<script>
elem = document.getElementById('column_left');
elem.style['display']='none';
elem = document.getElementById('content_wrap');
elem.style['width']='960px';
</script>";
}

return 'debug';

Obviously this must be adapted to the template in use and it may required some adjustments, like the new size of the position that should claim the extra space.

One can use Firebug to help finding the HTML div elements identifiers involved.