[TYPO3-mvc] Mootools Datepicker

[Thomas Allmer]

hey Zalán Somogyváry,

you are welcome :)
MooTools is great... but with behavior it really awesome :)
in my opinion it's such a clean "interface" so that even non tech-people 
can easily use it... just tell them which behaviors are available and 
you are done...

and moreover it work with later (via ajax) loaded content too... AND 
it's completely progressive enhancement... just nice :)

On 21.06.2011 09:35, Zalán Somogyváry wrote:
> Hello Thomas,
>
> Wow, thanks for your help! This works really well....
>
> Am 20.06.2011 um 22:42 schrieb Thomas Allmer:
>
>> I would suggest a completely different approach using MooTools Behavior You don't need any viewhelper for this.
>>
>> Basically you need to install a bunch of extension which only provide the needed js files for MooTools Core, More, Behavior...
>>
>> it would be
>> mootools_core (Core js Files)
>> mootools_more (More js Files
>> mootools_behavior (Behavior js Files)
>> mootools_packager (resolves dependency; includes only needed js files)
>> mootools_stack (my MooTools manifest, which already has the mentioned datepicker properly included + basic behavior for it)
>>
>> once that done you just need to write something like this in your HTML... be it fluid, ts, html, text...
>>
>> <input type="text" data-behavior="DatePicker" data-datepicker-options="{pickerClass: 'datepicker_vista'}" />
>>
>> or
>>
>> <input type="text" data-behavior="DatePickerGerman" data-datepickergerman-options="{pickerClass: 'datepicker_dashboard'}" />
>>
>> and for the pages you just need to define the following setup-ts:
>> # use the mootools_packager
>> <INCLUDE_TYPOSCRIPT: source="FILE: EXT:mootools_packager/static/setup.txt">
>> # define the needed files
>> plugin.tx_mootoolspackager_pi1.files := addToList(Stack/Behavior.DatePicker, Stack/Behavior.DatePickerGerman)
>> 	
>> # all available styles remove if needed
>> page.includeCSS.DatePickerBasic = EXT:mootools_stack/res/Settings/Form/DatePicker/Basic/DatePicker.Setting.Basic.css
>> page.includeCSS.DatePickerDashboard = EXT:mootools_stack/res/Settings/Form/DatePicker/Dashboard/DatePicker.Setting.Dashboard.css
>> page.includeCSS.DatePickerJqui = EXT:mootools_stack/res/Settings/Form/DatePicker/Jqui/DatePicker.Setting.Jqui.css
>> page.includeCSS.DatePickerVista = EXT:mootools_stack/res/Settings/Form/DatePicker/Vista/DatePicker.Setting.Vista.css
>>
>> here is a full example
>> http://pastie.org/2097853
>>
>> some more info about behavior
>> http://www.clientcide.com/code-releases/clientcide-3-0-behavior-1-0-mootools-development-and-so-much-more/
>>
>> conclusion:
>> I think view helpers are awesome but you don't always need one :p
>> You probably should consider using HTML5 as data-* properties of elements only "validate" there.
>>
>> cheers
>>
>> PS: I just updates some of the extensions listed above, so make sure you have mootools_stack 0.0.4 and mootools_packager 0.0.5
>>
>> On 19.06.2011 17:28, Zalán Somogyváry wrote:
>>> Hi List,
>>>
>>> I've googled some time now, but I did not find the right answer for me.
>>> I'm trying to write a extbase/Fluid DateViewHelper, which includes the Mootools-Datepicker [1]
>>> (that's the most flexible I've seen until now.)
>>> Is there a possiblity to make this Datepicker work in the backend and in the frontend. I've already tried the with the pageRenderer [2] for the backend but this does not work for me.
>>> (I'm using Typo3 4.5 LTS)
>>> Is there a simple way to include JSFiles for both, the back- and frontend? This would be a cool feature for future releases.
>>>
>>> Best regards,
>>> Zalán Somogyváry
>>>
>>> [1] http://www.monkeyphysics.com/mootools/script/2/datepicker[2] http://lists.typo3.org/pipermail/typo3-german/2010-August/070809.html
>
> Best regards,
> Zalán Somogyváry
>
>
>


-- 
+---------------------------------+-----------------------------------+
| Thomas Allmer                   |   http://www.delusionworld.com    |
| E-mail: at at delusionworld.com    |   phone: +43 699 16217064         |
+---------------------------------+-----------------------------------+