Joomla 3.4 custom calendar field with JQuery

[listerl]

Currently I am using the Calendar standard field of Joomla 3.4. However, I do not like it. I searched for a suitable calendar/datepicker and found this to be useful. Baffling as it may be, I couldn't find anything on Google that can help me understand how to implement it in Joomla.

I want to be able to define the attributes as follows:

Code: Select all

<field
        name="myfield"
        type="mycustomtype"
        description="description"
        label="label"
        required="true"
        (maybe more ...)
/>

Everytime the form loads, it will load the form element correctly, along with the js and css. In a form I may be using multiple fields with the same type, so I need to its id called correctly based on "name".

Does JHTML::register() have to do with it? I still cannot understand what this is used for, and where to use it to call for the function.

[ws_machine]

Did you create a mycustomtype form field type? This file goes in your model/fields folder. Inside that file you would add the codes to display the popup calendar.

[listerl]

Yes. I've been planning to do that. And I've explored into the calendar codes and able to add the jquery datepicker just like I wanted. However, I'm unable to pick any date. The calendar shows (but transparent) when the text is focused, and when I click on a date, the calendar disappears and no date is in the text. The funny thing is that, when there is some elements behind the calendar, eg: buttons, text fields, I can't click on the date, but if there is no element behind, I can click it and the date is shown the textbox. It shows the same result when I tried to implement directly on the page, not using the custom field. Any idea why, and how to fix it?

[listerl]

Found that it works with different templates. The template that I used is using bootstrap 3. Would that be the cause of the issue?

[listerl]

No it is not the bootstrap. The solution is found in http://stackoverflow.com/questions/7033 ... ndex-issue, that is to add style=" position: relative; z-index: 100000;" at the 'input' text element.