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

Paul DeBruicker pdebruic at gmail.com
Thu Sep 11 14:10:17 UTC 2014

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);
component:true}).on('changeDate', function(ev){
                var date = moment(ev.date);
                $('#' + inputId).val(date.format('YYYY-MM-DD'));
                $('#'+ hiddenId).val(date.format());
    $.fn.getDatePickerDateFrom = function( anId ){
        var newDate, dateInput;
        dateInput=$('#' + anId);
    $.fn.addDatePicker = function ( anId ) {
        var dtP = $('#' + anId);
            //         dtP.find('.date').addClass('dtNarrow');
        } else {

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
										value: aValue;
										id: inputId;
										disabled: aBoolean;
												((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';
														ifFalse: [ html jQuery this addDatePickerTo: groupId ]);
										with: [ 
													html anchor
														url: '#datePicker';
																		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: 

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

Hope this helps


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.

More information about the seaside mailing list