[Seaside] Re: Datepicker for Seaside and jquery/bootstrap

[Paul DeBruicker]

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

> seaside at .squeakfoundation

> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside





--
View this message in context: http://forum.world.st/Datepicker-for-Seaside-and-jquery-bootstrap-tp4777417p4777463.html
Sent from the Seaside General mailing list archive at Nabble.com.