Jun 18, 2010

Posted by in Joomla | 23 comments

How to use Date Picker in Joomla

Mostly we need to have a date picker in our form, if you are working with joomla, then we dont need to use any 3rd party module, as Joomla has a built-in date picker in it. Which is very easy to use. 

Here is how we can use it

we need to use the calendar function of JTHML class to display the date picker.

Here are its attributes.


void calendar (string $valuestring $namestring $id, [string $format = '%Y-%m-%d'], [array $attribs = null])
  • string $value: The date value
  • string $name: The name of the text field
  • string $id: The id of the text field
  • string $format: The date format
  • array $attribs: Additional html attributes



 echo JHTML::calendar('2010-02-25','cal_field_name','cal_field_id','%Y-%m-%d');

   Simply use the above function and you are done, if you dont want to have any default date, simply leave the first param blank i.e ''

  1. Thanks,
    I am a beginner in joomla , Its very usefull to me

    Anoop P R

  2. Thanks you.

  3. great line of code, thanks a lot!

  4. thanks for the very useful line of code.

  5. This is very useful indeed, Thanks a lot, so how does one get the inserted date value from this date picker..?

    • I didnt get your question View,

      Are you asking how can one retrieve the submitted date from a form in Joomla ?

  6. Hello!

    Thankyou very much for this! It helped me a great deal!!

  7. Thank You. Very useful Tips. 🙂

  8. Thank you very much, Really very helpful tip. but I am facing one issue in date format. I want date in this format ‘%n/%j/%Y’. Does this not support this format? Any suggestion?
    Thanks in advance.

  9. Thanks for replying so quick. The date format i had given was in PHP date format. I got my required JHTML date format from http://breathing-spring.com/jhtml-date-in-joomla/

    Thanks for replying once again. 🙂

  10. Can you explain the HTML attributes array part? I’d like to make the textbox readonly so the user has to use the date picker. Thanks!

  11. Never mind the last comment, I just added ‘disabled’ as the last parameter. Thank you.

  12. Hello,

    Thanks a lot for your lines of code…however I’m trying to add the Datepicker on the advanced search of Joomla and I’m not achieving my goal.

    To do that I’m hacking mfield.class.php -> class mFieldType_date -> function getSearchHTML

    I think the problem is the name and id, of the custom field, but the search is not working.

    Do you know what I’ve to do?

    Thanks in advanceDa

  13. Hello Dharam.
    I need to add a date-picker/Check Availability calendar to a hotel site I have developed on Localhost. I want the date-picker to pass the values to this booking service:https://gc.synxis.com/rez.aspx?hotel=19603&chain=7665. Please say how I can achieve this. Thank you.

  14. Of course it must have “Check-in” date and “Check-out” date. Thanks.

  15. thanks…. it saved my time.

  16. Ankit Jain says:

    I have created a popup in my backend and their is a calendar control. But when i click on the calendar image nothing seems to be happen. Can anyone tell why the calendar event is not firing on the popup window.

  17. Hi, i did the , but when i click on the calendar image it takes me to the image url (media/system/images/calendar.png), and the calendar doesnt appear :(, heeeelp meeee pleaseee

  18. Hi,
    Can u help me with jcanlendar?
    I want to used an event like onClick.
    I dont want to use event onChange, cos it difficult when i want to get the date from the previous month.
    But when i using event onChange it will do every event when i’m click to the previous month. However, i’m not click the date that i want yet but it’s do the event onChange already.

    Do anyone have any idea?
    Help me please…

  19. I cannot believe that I could not get an answer on the Joomla site in this most simplistic form.

    Thank you! That was easy….


  20. Everybody is so happy!!!!!!!!!!!!!!
    Where to put this code???????

  21. Hi,

    this code is working fine, thanks for it.
    But my requirement is generating multiple datepicker’s
    I have a multi select dropdown, when user selects multiple values then I want to generate those many calenders dynamically.

    I tried with javascript calenders input field is visible
    but not showing the calender for any of dynamic input fields.

    Thanks in advance..

Leave a Reply