Dynamic Web Development with Seaside

10.6Date Inputs

Using the canvas’ dateInput method is the simplest way to provide a date editor. It produces a WADateInput, which understands the messages callback: and value:.

First, add a birthdate instance variable to the class Contact and produce accessor methods for it. You should be familiar with how to do this by now. If not, look back at the changes you’ve made in the previous sections.

Then add the following code to the form: block on your renderContentOn: method:

    html dateInput
callback: [ :value | self contact birthdate: value ];
with: self contact birthdate.
html break.

For those who like to see the date presented in a different order, cascade-send options: #(day month year) to the brush.

Your renderContentOn: method should now look like this:

ContactView>>renderContentOn: html
| group |
html form: [
html text: 'Name:'.
html textInput on: #name of: self contact.
html break.
html text: 'Email address:'.
html textInput on: #emailAddress of: self contact.
html break.
html text: 'Gender: '.
group := html radioGroup.
group radioButton
selected: self contact isMale;
callback: [ self contact beMale ].
html text: 'Male'.
group radioButton
selected: self contact isFemale;
callback: [ self contact beFemale ].
html text: 'Female'.
html break.
html text: 'Send email updates: '.
html checkbox
value: self contact requestsEmailUpdates;
callback: [ :value | self contact requestsEmailUpdates: value ].
html break.

"Date Input"
html text: 'Birthday: '.
html dateInput
callback: [ :value | self contact birthdate: value ];
with: self contact birthdate.
html break.

html submitButton on: #save of: self ]

Finally update our display method, as below:

ContactView>>save
self inform: self contact name ,
'--' , self contact emailAddress ,
'--' , self contact gender ,
'--' , self contact requestsEmailUpdates printString ,
'--' , self contact birthdate printString

Full contact view

Because the birthdate instance variable is nil, the date is displayed with the current date. Your final version of the application should look something like Figure 80.

Date Message Summary. The following table shows the messages of the dateInput brush.

Methods on WADateInput Description
callback: aBlock Specify a single argument callback block which is passed a Date object representing the date entered by the user.
with: aDateSpecifies the date with which we will initialize our date editor. If aDate is nil, today’s date is used.
options: anArray Specify the order in which the #day, #month and #year fields are rendered.

Copyright © 19 March 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.