Tutorials - Using Web Controls

Including a control in your web page is very easy and requires no or little Javascript knowledge. You must have valid references set up to the Spiderscript library as described in the Getting Started Tutorial.

Adding the Calendar control to your web page

To add a calendar to your web page simply paste the following code into the body of your HTML document.

<div ext="calendar" "height=200px" width="200px"></div>

That's it! See:-

To call a web control, simply create a DIV element and inside that set the custom parameter ext to the name of the control type that you wish to include in your web page.

In the example above we created a calendar by setting ext="calendar"

Okay, so we have a calendar. What now?

For now we'll continue with the example of the calendar created above.

If we want to set a text box equal to the date the user has just set then we simply can use the custom parameter of the calendar control linkto to link the value selected in the calendar to the value in the textbox (and vice versa). Note the linktoformat parameter. This allows you to specify the exact date format that should be used. If an invalid date is entered, or a date in a different format, the calendar control will try to do its best to parse that date. If it fails, it simply selects today's date. The default linktoformat value is MM/dd/yyyy.

<input type="text" id="txtSelectedDate" />
<div ext="calendar" linkto="txtSelectedDate" linktoformat="dd/MM/yyyy" "height=200px" width="200px"></div>

Take a look at the web control reference in the documentation section. This details what parameters are available for each web control.