Event

Sample Event Form

The sample event form is a HTML form with a datepicker and database support.

Overview

The sample event form introduces the dates group and the custom datepickers, both regular and accessible.

Shown below is the event form in action. The datepicker displays the dates selected so far in blue. The selected date format is MMM., d. yyyy, but the date textfield allows simplified input, e.g. 6 8 2020 for Jun., 8. 2020. The below date textfields are equipped with calendar toggle buttons to offer both manual and calendar date selection.

Below is the initial form
with date fields for arrival,
meeting, and departure.

The date textfield allows
simplified date input, here
for Jun., 8. 2020.

Simplified manual input of the arrival date.

The focus lost of the arrival
field triggered conversion
to the selected date format.

Focus lost triggered conversion to the correct date format.

A click on the meeting date
field's datepicker icon opens
a datepicker (Sunday is first DOW).

Using the datepicker to enter the meeting date.

The chosen meeting date is
Jun., 9. 2020, and the departure
date field comes next.

Using the datepicker to enter the departure date.

The accessible event sample form in action with an arrival date field datepicker.

The accessible event sample form with an accessible datepicker

Form Layout

Drag-and-drop a group component symbol from the toolbar on the form to create a group component.

Dragging and dropping a group component on the event form

Double-click the group's label cell and change the label to "Event".

Drag-and-drop a text field symbol from the toolbar on the group symbol to create the group's first child.

Dragging and dropping a text field symbol on the group symbol

Right-click the text field symbol to open the context menu and change the text field type to "Date".

Double-click the text field's label cell and change the label to "Arrival".

Right-click the date text field symbol and clone the date text field component with its properties. Clone the text field component again and …

… and change the labels to get the group below. The date text fields are the only group members and the group turned automatically into a dates group.

The dates group created from three date text fields

Now the dates group's properties must be changed to expect consecutive dates in a date span between two dates. All date text fields get datepickers.

A valid arrival date is today or later.

Range, initial input, and placeholder for the arrival date field

A valid meeting date is tomorrow or later.

Range, initial input, and placeholder for the meeting date field

A valid departure date is the day
after tomorrow or later.

Range, initial input, and placeholder for the departure date field

The allowed span between two dates is 1…7 days.

The updated properties cells are shown below.

The final dates group with the properties of the group and its children

The black dots in the message columns indicate where error message text is required. The error messages below could be a starting point.

The final dates group with the error messages of the group and its children

Add a submit button to the form.

Go to the date section of the settings view and select a date format of your choice and localization.

Setting the date format and localization for the event form sample

Go to the a datepicker section of the settings view and check the trigger button option for regular forms. This option will instruct the code generator to supply date text fields with datepicker trigger buttons.

The date text fields get datepicker trigger buttons

Form Layout

Switch to the layout view with the initial form layout. Toggle the view mode as convenient.

Increase the page height, rearrange the drawing objects, and reduce the page width.

The rearranged form objects of the event form

Drag-and-drop a round-corners rectangle from the toolbar and draw the blue rectangle below.

Double-click the page background to open the page's properties dialog and to set border and background.

Adding a border and a background to the event form

Database Support

Click the settings tab, select the client-server code and the database "MySQL" options. Enter the MySQL root password if required - MySQL has no initial root password, MAMP's initial MySQL root password is "root" (see LAMP, MAMP, or WAMP).

The code generator will create a database

Click the product tab and save the event HTML form to the server folder as index.php.

Load the event HTML form in your browser, enter dates, and submit it.

Shown below is what we have in our database.

                "1"  
                "2021-02-01"
                "2021-02-03"
                "2021-02-07"
                "2020-02-04 16:11:40"

The date format is ISO 8601 (yyyy-mm-dd). The last entry is the record's timestamp (sample update on 2020-Feb-04).

Source Code

Below is the source code of the event form sample.

<?xml version="1.0" encoding="us-ascii" standalone="yes"?>
<!-- Created on Tue Feb 04 16:14:46 CET 2020 -->
<form>
	<settings>
		<form-settings code="1" database="1" host="bG9jYWxob3N0" port="8888" user="cm9vdA==" password="cm9vdA==" layout="2"/>
		<date>
			<names>
				<months-long m0="SmFudWFyeQ==" m1="RmVicnVhcnk=" m2="TWFyY2g=" m3="QXByaWw=" m4="TWF5" m5="SnVuZQ==" m6="SnVseQ==" m7="QXVndXN0" m8="U2VwdGVtYmVy" m9="T2N0b2Jlcg==" m10="Tm92ZW1iZXI=" m11="RGVjZW1iZXI="/>
				<months-short m0="SmFu" m1="RmVi" m2="TWFy" m3="QXBy" m4="TWF5" m5="SnVu" m6="SnVs" m7="QXVn" m8="U2Vw" m9="T2N0" m10="Tm92" m11="RGVj"/>
				<days-short d0="TW9u" d1="VHVl" d2="V2Vk" d3="VGh1" d4="RnJp" d5="U2F0" d6="U3Vu" first-day-of-week="sun"/>
			</names>
			<date-format order="407" sep1="Liwg" sep2="LiA="/>
		</date>
		<datepicker-settings>
			<regular trigger="button"/>
		</datepicker-settings>
	</settings>
	<pages>
		<page width="880" height="1060" border="1" border-color="C0C0C0" border-opacity="10" background="1" background-color="FFFFFF" background-opacity="10">
			<defaults>
				<shape border="1" border-color="6699FF" border-opacity="10" background="1" background-color="FFFFFF" background-opacity="10"/>
				<label alignment="left" font-family="THVjaWRhIFNhbnMgVW5pY29kZQ==" text-color="000000" text-opacity="10" border="0" background="0"/>
			</defaults>
			<shapes>
				<shape type="roundrect" x="40" y="40" width="800" height="840" border-radius="20"/>
			</shapes>
			<components>
				<component type="group">
					<label x="80" y="80" width="230" height="100">RXZlbnQ=</label>
					<components>
						<component type="textfield">
							<control x="100" y="300" width="700"/>
							<label x="100" y="220" width="170" height="60">QXJyaXZhbA==</label>
							<properties type="date" required="true" datepicker="true">
								<constraints start="0"/>
							</properties>
							<messages>
								<missing-input>UGxlYXNlIGVudGVyIGEgZGF0ZS4=</missing-input>
								<invalid-input>UGxlYXNlIGVudGVyIGEgdmFsaWQgZGF0ZSAodG9kYXkgb3IgbGF0ZXIpLg==</invalid-input>
							</messages>
						</component>
						<component type="textfield">
							<control x="100" y="520" width="700"/>
							<label x="100" y="440" width="200" height="60">TWVldGluZw==</label>
							<properties type="date" required="true" datepicker="true">
								<constraints start="1"/>
							</properties>
							<messages>
								<missing-input>UGxlYXNlIGVudGVyIGEgZGF0ZS4=</missing-input>
								<invalid-input>UGxlYXNlIGVudGVyIGEgdmFsaWQgZGF0ZSAodG9tb3Jyb3cgb3IgbGF0ZXIpLg==</invalid-input>
							</messages>
						</component>
						<component type="textfield">
							<control x="100" y="740" width="700"/>
							<label x="100" y="660" width="260" height="60">RGVwYXJ0dXJl</label>
							<properties type="date" required="true" datepicker="true">
								<constraints start="2"/>
							</properties>
							<messages>
								<missing-input>UGxlYXNlIGVudGVyIGEgZGF0ZS4=</missing-input>
								<invalid-input>UGxlYXNlIGVudGVyIGEgdmFsaWQgZGF0ZSAoZGF5IGFmdGVyIHRvbW9ycm93IG9yIGxhdGVyKS4=</invalid-input>
							</messages>
						</component>
					</components>
					<constraints>
						<offsets><offset start="1" end="7"/><offset start="1" end="7"/></offsets>
					</constraints>
					<messages>
						<invalid-input>T25lIHRvIHNldmVuIGRheXMgc3BhbiBiZXR3ZWVuIHR3byBkYXRlcy4=</invalid-input>
					</messages>
				</component>
				<component type="button">
					<control x="440" y="920" width="400"/>
					<label>U3VibWl0</label>
					<properties type="submit">
					</properties>
				</component>
			</components>
			<messages>
				<missing-input>TWlzc2luZyBpbnB1dDo=</missing-input>
				<invalid-input>SW52YWxpZCBpbnB1dDo=</invalid-input>
			</messages>
		</page>
	</pages>
</form>