A calendar control for WebDev
WebDev is really missing a good calendar control. It’s unfortunate because there are so much good javascript calendars available out there. The best one, in my opinion, is the jQuery datapicker. It’s quite easy to use it in a WebDev page.
Here is a quick tutorial to build a WebDev project using the jQuery datepicker.
Files required to be copied in the ProjectName_WEB folder:
- ui.datepicker.css (CSS stylesheet prj_WEB folder)
- jquery-1.2.6.js (Javascript code prj_WEB folder)
- ui.datepicker-fr.js (Javascript code prj_WEB folder)
- jquery-ui-personalized-1.6b.min.js (Javascript code prj_WEB folder)
- domready.js (Javascript code prj_WEB folder)
Project actions
In Project > Project description > Style / Free CSS style sheets / add the “ui.datepicker.css” stylesheet.
In Project > Project description > Advanced in “Option for generating the HTML code” uncheck all the options in the “Readability of HTML Code”
Page actions
For each page holding a date control, insert in this order these Javascript script files (page description, tab “Advanced”, javascript):
- jquery-1.2.6.js
- jquery-ui-personalized-1.6b.min.js
- ui.datepicker-fr.js
- domready.js
For each page holding a date control, create a local browser procedure called DOMready (respect the case). Enter this code in the procedure (this is a javascript code):
function DOMready()
{
// datepicker
$("#DATECONTROL").datepicker({position: 'r'});
}
You may have several lines like
$("#DATECONTROL").datepicker({position: 'r'});
In this line #DATECONTROL is the date control name. So if we have, say DATE1 and DATE2, we will have two lines.
$("#DATE1").datepicker({position: 'r'});
$("#DATE2").datepicker({position: 'r'});
Internationalization
Many languages are supported.
References
