Datepicker for Seaside and jquery/bootstrap

Hi,

I am using Pharo, Seaside 3.1, TwitterBootstrap (from Torsten Bergmann) and tried out some javascript extensions for creation of a datepicker. The last one I've tried was http://www.eyecon.ro/bootstrap-datepicker but I did not get it work, as the onClick event is not attached to the add-on when calling the datepicker function, and there seems to be no way to force it.
Does anyone have a similar setup and is using a datepicker? Which one is to be recommended?

Regards

Max_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

I use this one: https://github.com/eternicode/bootstrap-datepicker  but only on browsers that don't already have a native date picker for an HTML5 date input. So Firefox & IE.  I don't use Torsten's bootstrap because I started this before it was out and haven't felt compelled to change over.  


I use http://modernizr.com/ to detect whether the browser has a native datepicker and if not load the js one.  

the jQuery functions are :

(function ($) {
    'use strict';
    $.fn.createDatePicker = function(inputId, hiddenId) {
        var thisElement=$(this);
        if(!thisElement.data('datepicker')){
            thisElement.datepicker({autoclose:true, component:true}).on('changeDate', function(ev){
                var date = moment(ev.date);
                $('#' + inputId).val(date.format('YYYY-MM-DD'));
                $('#'+ hiddenId).val(date.format());
               
            });
        }
        thisElement.datepicker('show');
    };
    $.fn.getDatePickerDateFrom = function( anId ){
        var newDate, dateInput;
        dateInput=$('#' + anId);
        newDate=moment(dateInput.val());
        $(this).val(newDate.format());
        dateInput.val(newDate.format('YYYY-MM-DD'));
    };
    $.fn.addDatePicker = function ( anId ) {
        var dtP = $('#' + anId);
        if(!Modernizr.inputtypes.date){
           
            dtP.removeClass('input').addClass('input-group').find('.input-group-addon').removeClass('hidden');
            //         dtP.find('.date').addClass('dtNarrow');
           
        } else {
            dtP.find('.hidden').off('change');
        }
       
    };
})(jQuery);


Those are in an external file.  

The seaside is:


MyBaseComponent>>renderDatePickerFor: aValue withCallback: aOneArgBlock spanning: aNumber disabled: aBoolean on: html
        | groupId hiddenId |
        hiddenId := html nextId.
        groupId := html nextId.
        html div
                class: 'dtPicker';
                with: [
                                        html div
                                                id: groupId;
                                                class: 'input date';
                                                with: [
                                                                        | inputId spanId |
                                                                        inputId := html nextId.
                                                                        spanId := html nextId.
                                                                        html dateInput5
                                                                                class:'form-control';
                                                                                value: aValue;
                                                                                id: inputId;
                                                                                disabled: aBoolean;
                                                                                onChange:
                                                                                                ((html jQuery id: hiddenId) getDatePickerDateFrom: inputId) , (html jQuery post serialize: (html jQuery id: hiddenId)).
                                                                        html span
                                                                                id: spanId;
                                                                                class: 'input-group-addon hidden';
                                                                                attributeAt: 'data-date' put: aValue;
                                                                                attributeAt: 'data-date-format' put: 'yyyy-mm-dd';
                                                                                script:
                                                                                                (aBoolean
                                                                                                                ifFalse: [ html jQuery this addDatePickerTo: groupId ]);
                                                                                with: [
                                                                                                        html anchor
                                                                                                                url: '#datePicker';
                                                                                                                onClick:
                                                                                                                                (aBoolean
                                                                                                                                                ifFalse: [ (html jQuery id: spanId) createDatePickerFor: inputId and: hiddenId ]);
                                                                                                                with: [ html image resourceUrl: '/images/calendar.gif' ] ] ].
                                        html hiddenInput
                                                value: aValue;
                                                id: hiddenId;
                                                callback: aOneArgBlock ]


JQueryInstance>>createDatePickerFor: inputId and: hiddenId
        self call: 'createDatePicker' with: inputId with: hiddenId

JQueryInstance>>getDatePickerDateFrom: anId
        ^ self call: 'getDatePickerDateFrom' with: anId

Then I'll use it where I want a date picker like this:

        self
                renderDatePickerFor: self endDate
                withCallback: [ :value | self setEndDate: value ]
                spanning: 12
                disabled: self disabled
                on: html.




Hope this helps


Paul

Max Bareis wrote

Hi,

I am using Pharo, Seaside 3.1, TwitterBootstrap (from Torsten Bergmann) and tried out some javascript extensions for creation of a datepicker. The last one I've tried was http://www.eyecon.ro/bootstrap-datepicker but I did not get it work, as the onClick event is not attached to the add-on when calling the datepicker function, and there seems to be no way to force it.
Does anyone have a similar setup and is using a datepicker? Which one is to be recommended?

Regards

Max_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

oh & I forgot this one:


JQueryInstance>>addDatePickerTo: anId
        self call: 'addDatePicker' with: anId

oh and yes it should be an Object rather than a method but here we are.....