New Datepicker FieldFrame extension
Development and Programming
TBZ Date extension is a JQuery Datepicker field type for the FieldFrame framework.
This field type will allow you to add a datepicker as either its own entry field or to the FF Matrix.
Install: Copy the tbz_date folder into your system/extensions/fieldtype folder. Copy the language file into system/language/english Enable the field type from Admin › Utilities › Fieldtypes Manager Important: Update your “JQuery UI URL” (within the “jQuery for the Control Panel” extension) to read: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js The default JQuery UI v1.5.2 doesn’t include the themeroller, v1.7.2 upwards does!
Settings include: Theme - themes included are “Pepper Grinder” and “Smoothness”, more can be downloaded or created from ThemeRoller, once downloaded, place the relevant files into the extensions\fieldtype\tbz_date\css\<yourtheme> folder. See the existing themes for guidance, but I’ll add specific details to the documentation when I’ve created them 😖
Show Button - you can either show it or, erm, hide it. The text entry box is also the trigger, but the button sometimes helps users!
Date Format - Here you can set the format and layout for the displayed date (in the entry panel not front-end!). Basics include “dd/mm/yy”, “mm-dd-yy”, “m d y”, “yy mm dd”. More formats here, but many of them not yet supported - shout if you want anything specific and I’ll add it.
The date is stored in EE as a Unix timestamp, when displaying the variable in your templates it will default to the date format specified in the admin, but this can be over-ridden to display in any of the usual ExpressionEngine date formats and the format parameter (e.g. {my_date format="%j %F, %Y"}).
You must have the JQuery extension activated within your extensions and have a valid JQuery UI path set. And FieldFrame v0.9.5 upwards must be installed and enabled.
I will be adding better free-entry validation to this similar to Blind Date and there will be more features added in the future.
Download: TBZ Date Fieldframe extension v1.0.6
Link to documentation not implemented yet - I’ll get there!
Because you specify the date format, it can handle day-month-year, month-day-year, year-month-day, whatever…
Let me know if there are any issues, or additional features you’d like to see.
Peter
Version History: v1.0.1 - solved error in publish page as example date shown in Matrix is string not integer v1.0.2 - Doh! Previous change meant it defaulted to 1970. Default is now blank, with current date shown in datepicker. Bug: internal version number still showing 1.0.1! v1.0.3 - Corrected Theme folder detection. Re-wrote date formatting identification and conversion. v1.0.4 - Corrected issue with display of formatted date within templates v1.0.5 - Fixed issue with “Automatically Convert High ASCII Text to Entities” set to Yes. Thanks to Brandon Kelly for the solution. v1.0.6 - Correctly returns false if no date set - so {if date_field} should work.
hey looks like you pretty much beat me to it! will check it out anyhow. well done and thanks for releasing…
How are you managing time values at the moment?
Adding force time values a la blind date would be cool, but I was thinking that it would be good to be able to give the user a separate picker for the time and then roll that into the stored date value, but i never got all that far with it… any ideas?
Time: I’m not! I needed it primarily for dates, haven’t even checked what time it’s using - hmmm, not good. But would look at either default to various values like Blind Date, or have an additional slider or similar to set time. There’s a JQuery plugin I’ve seen that does date and time, so possibly I’ll look into this if there’s a massive need.
Edit: it defaults to 00:00
I think blind date type settings could be the way forward as that makes the field highly useful for events etc. shouldn’t be too tricky to implement. All the combined date/time pickers I’ve found so far are a bit too alpha for real world use. Personally I think separating the two out would make things clearer for end users anyway.
You might want to think about github’ing your FT download - it seems to have become a bit of a standard for EE addons lately… plus it means your users can do funky stuff with git submodules to automate updating their sites
Did consider GitHub, but will be releasing a module soon, so will need better information and support pages. So figured wrap it up in that.
Cheers,
Peter
fair dinkum… you can actually write pretty good docs on github tho.
will let you know how I get on with the FT anyway
best
tom
Anyone else having trouble getting the css to load for it?
The picker works great, but it’s totally unstyled for me.
turbineseaplane: Can you let me know what it says under your “jQuery for the Control Panel” extension settings for the “jQuery UI URL”.
Have you tried either theme from within the Field Type settings?
Did you copy all the sub-folders across for the field type as well?
HI.
For jQuery it says: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
For jQuery UI it says: http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js
I did try both themes, yes. Additionally, I copied all across as it should be. Ive used a zillion extensions, so I’m pretty sure I’ve installed it right. Like I said, it actually is all working except the css. The weird thing is that if you use the web inspector, the calendar is calling the right css file and it loads correctly if you copy the css file link that the actual calendar is calling.
I just can’t figure out why it won’t display the css on the calendar!
Other than this hiccup. Awesome extension!!!!!
Thanks. Change your JQuery UI path to read:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js
Now should I include this in the extension for the future release or just state the above as an installation step?
Peter.
Beautiful!
Worked like a charm!
I would just clearly include it in the installation notes.
Time: I’m not! I needed it primarily for dates, haven’t even checked what time it’s using - hmmm, not good. But would look at either default to various values like Blind Date, or have an additional slider or similar to set time. There’s a JQuery plugin I’ve seen that does date and time, so possibly I’ll look into this if there’s a massive need. Edit: it defaults to 00:00
+1 for adding time-picker functionality. I have a very busy community events calendar that uses the time for the event’s start and end time as well as ordering the events on the calendar page itself, so this addition (especially if it works with an SAEF) would be phenomenal.
On of the main features in this extension is correctly recognising the UK date format of day-month-year, as opposed to month-day-year.
Why not allow for international standards like YYYY-MM-DD as well?
It does (sort of). A typical issue with UK dates that I come accross is 01-02-09 can either mean 1st Feb, or 2nd Jan. And with most add-ons I’ve come across (including blind date) it assumes month first. Because you specify the format in this extension, you can display it however you want - even YY-MM-DD or YY-DD-MM.
Explanation of the “(sort of)”: It won’t handle “YYYY”, because JQuery format doesn’t know this, it will display the 4-digit year twice. Although, I’ve now added in a check for this in the next version.
Edit: As of v1.0.3 it now handles “YYYY” or “yyyy”.
Thanks for this much needed field type edition. +1 for the addition of time to the datepicker. For some ideas check Derek Allard’s write up and the comments on his blog “Adding time to jQuery UI Datepicker”.