How to use a datepicker in a tools file?
Permalink
I have an addon with a tools file that is called up into a dialog box for the add/edit form on my page manager. One of the fields on the tools file I'm trying to use the date/time helper, but I think because the file is called in inside of a dialog and not there on page load it doesn't work as a date picker.
This is the code that I'm using in the tools file:
It gives me the correct class of file, but not the javascript initialization. So I tried adding this:
Then the datepicker is there and it works, but the z index is hard coded on the created divs to a z index of 12. This puts it underneath the modal dialog box and makes it unusable.
Any insight as to how to get this working or even just change the z index on the datepicker is appreciated.
This is the code that I'm using in the tools file:
<?php $date = $row['date']; if (!$date) { $date = '9 AM'; }; ?> <?php $dtt = Loader::helper('form/date_time'); print $dtt->date('date', $date, true); ?>
It gives me the correct class of file, but not the javascript initialization. So I tried adding this:
$(function(){ $(".hasDatepicker").datepicker(); });
Then the datepicker is there and it works, but the z index is hard coded on the created divs to a z index of 12. This puts it underneath the modal dialog box and makes it unusable.
Any insight as to how to get this working or even just change the z index on the datepicker is appreciated.
Probably not the most elegant solution but assuming the auto-created divs have no selectors of their own you could use :nth-child() selector on your .hasDatePickerClass and set the z-index using .css()
That doesn't work because the div that you need to target doesn't exist until you click on the thing that has the class, it's not that class that needs the z-index. I've seen a little bit on a function called onBeforeShow that I might be able to hook into to set the z-index that way but I didn't get a chance to try it before leaving last night. Seems incredibly complicated for something so simple.
Ah yes I see. Perhaps you could you come at it the other way, with a listener that changes the z-index of your dialog box to below that of the datepicker if there is scope for it.
If you need this to work when not logged in... you will need some additional code.
The issue appears the c5 designers have chosen which script libraries to skip when no one is logged in. If i had to guess why...
1. Complex data entry is reserved for when a user is logged in
2. or maybe its just to reduce on load time.
Either why the solution is pretty simple...
The official C5 documentation is silent on this dependency:
http://www.concrete5.org/documentation/developers/helpers/date-and-...
Hope this helps!
The issue appears the c5 designers have chosen which script libraries to skip when no one is logged in. If i had to guess why...
1. Complex data entry is reserved for when a user is logged in
2. or maybe its just to reduce on load time.
Either why the solution is pretty simple...
public function on_page_view() { $html = Loader::helper('html'); //Required for DatePicker (when not logged in) $this->addHeaderItem($html->css("jquery.ui.css")); $this->addHeaderItem($html->javascript("jquery.ui.js")); //Required for $('#x').dialog.open() (when not logged in) $this->addHeaderItem($html->css("ccm.app.css")); $this->addFooterItem($html->javascript("ccm.app.js")); }
The official C5 documentation is silent on this dependency:
http://www.concrete5.org/documentation/developers/helpers/date-and-...
Hope this helps!
Forgot to post a solution. I've still seen this in a couple of older sites, especially with some versions of jQuery ui.
Anyway, it ended up working with some more specific css and !important on the z-index for the datepicker div.
Anyway, it ended up working with some more specific css and !important on the z-index for the datepicker div.
