Joomla Datepicker : How to insert in components

Joomla Datepicker

joomla datepickerJoomla is a popular Content Management System which helps people to develop websites easily without the need of learning web development languages like html, css, php etc. Anybody who is having a basic understanding of using web based softwares can create and maintain a website using joomla as it is already equipped with many modules and components, backed and developed by its open source community. Joomla is Free, Open Source and more than everything, it is easy to use. Joomla was the most popular and the most used CMS for websites few years ago. The usage of Joomla was slightly gone down over the time with the growth of another elegant Open Source CMS, called “Wordpress”. Many web developers preferred Wordpress over the Joomla as it was simpler to use. But Joomla is still being used by many web developers and webmasters to create websites as it has more features than in Wordpress. In this article, I am going to show you how to insert a datepicker in your custom developed Joomla Component or a Module.

Joomla has its own datepicker built within the Joomla framework for you to use in your components. To insert the datepicker simply put the following code.


Then wherever you want to include the datepicker, you can call the following function

echo JHtml::calendar('date''%Y-%m-%d');

This will generate a datepicker textbox as below;

So that is how to insert a datepicker within your custom Joomla component or Module. See how easy it is. You can use this datepicker for any kind of a component related to the time and date. For an example, if you are developing a Hotel Reservation Component, you can simply integrate this datepicker for a availability checker or a check-in date selector. One thing I am not happy about this datepicker is that it is not that much beautiful. It will definitely not go with a modern template, so you will have to use some third party datepicker plugin for sure ;) This will be useful if you are not concerned much about the design of the datepicker. Anyway, the scope of this article was only to show the way of adding the built in Joomla datepicker in your custom components. The decision to use it or not will be always up to you :)

Please leave a comment if this post was useful to you.


  1. how to stop drag option in calendar

  2. how to stop drag option in calendar please tell me the way i am in dead line of my project

  3. in calendar how to disable before dates form current date. guide me thanks in advace

  4. Sorry for bothering...but where do I have to insert the code above?
    I want to integrate it in my Joomla contact form.

    1. Hi Anonymous,

      Thank you for the comment. Actually this is used when creating your own custom component. I don't recommend you to make changes to the module you are currently using. You should find a module which has a datepicker in it

  5. Wonderful blog posting on joomla datepicker. Thanks for sharing us!!! I I like it