|
Introduction
We believe that a datepicker being able to handle and display public holidays is much more efficient than a regular datepicker. When picking up a date, letting your customers be aware that there is a local public holiday on the way is often an important information. However, maintening a database of public holidays is a very cumbersome task. That's why we built the Wdatepicker. Our Wdatepicker is aware of public holidays in 40 countries and more 240 regional calendars and can be setup in 7 seven languages. Our database is constantly updated and your widget will always be up to date. Our javascript widget is fully configurable, can be used as a datepicker or an inlined calendar and will be added to your website in a few minutes. Give a try to our configuration tool, it will let you configure the widget very easily. In order to install the Wdatepicker widget onto your website you will need to register your domain. Now let's look at the javascript API, and get through several examples of integration. |
27
Datepicker localized in US | California
|
Workingdays_datepicker(InputId,Options,CallbackOnSelect)
Turn an input text field into a datepicker
|
|
|
InputId |
|
Options |
See the configuration tool to see all the options available. |
CallbackOnSelect |
You can use it to provide your own code, to populate alternate field or anything else. You will be receiving a javascript date as a parameter in the callback function. |
Example 1
On this first example, we create a datepicker in English displaying the public holidays in Canada, Ontario.
We here use the default theme large blue (but every detail of the datepicker can be customized through a CSS modification).
Using a callback function, we simply log to the browser's console the date picked using a formatting function found in the javascript coming with the widget.
and here is the result (you can try the widget):
Example 2
In this second example, we would like to create a french datepicker (we don't set the public_holidays_configuration parameter and the default french config "calendrier civil usuel" will be used).
We don't want to display the name of the public holiday on the calendar (we use the public_holidays_label parameter) but instead a red background (this is done through CSS). The public holidays should not be selectable.
Our weekend days are sundays only which should not be selectable.
We ware using the orange theme.
and here is the result:
Example 3
In this third example, we would like to create a datepicker located in New Jersey, USA.
Because americans usally starts their calendar on sunday, we are going to use the first_day_of_week parameter .
Unlike any other, americans use a mm/dd/yyyy date format, so we are going to use the date_format parameter.
We would like the public holidays to not be selectable.
We are also going to add a small picto next to the input field. You can provide any div with an image. Here, instead of putting an image in the div, we created an html/css picto, and we pass the div id into the id_picto parameter, so a click on that div will trigger datepicker opening.
In the callback function, we take to day of the date (we are receiving a javascript date here) and we put it in the picto's div.
Finally, we are using the black theme, including this CSS.
and here is the result:
Example 4
In this fourth example, we are creating a datepicker located in Australia, Queensland.
We are using the small blue theme, to create a small datepicker.
As we want to gain space, we won't be displaying the week number, and we will display a dot instead of the full name of the public holiday (the full name is always visible on hover).
and here is the result:
Going mobile
We do support mobile web.
The widget comes with a mobile.css responsive layout that you can completly adapt to fit your own website identity. In our mobile.css, the width of the cells are computed relativly to the screen width. On a mobile web page, the datepicker calendar frame is to be added at body level on a fixed position (rather than at a relative position below the input text field like we do on a desktop). That is why the component needs to be aware that we are choosing a mobile layout adding the mobile=1 parameter.
visit this page from a mobile to see the result in action.
On this first example, we create a datepicker in English displaying the public holidays in Canada, Ontario.
We here use the default theme large blue (but every detail of the datepicker can be customized through a CSS modification).
Using a callback function, we simply log to the browser's console the date picked using a formatting function found in the javascript coming with the widget.
and here is the result (you can try the widget):
Example 2
In this second example, we would like to create a french datepicker (we don't set the public_holidays_configuration parameter and the default french config "calendrier civil usuel" will be used).
We don't want to display the name of the public holiday on the calendar (we use the public_holidays_label parameter) but instead a red background (this is done through CSS). The public holidays should not be selectable.
Our weekend days are sundays only which should not be selectable.
We ware using the orange theme.
and here is the result:
Example 3
In this third example, we would like to create a datepicker located in New Jersey, USA.
Because americans usally starts their calendar on sunday, we are going to use the first_day_of_week parameter .
Unlike any other, americans use a mm/dd/yyyy date format, so we are going to use the date_format parameter.
We would like the public holidays to not be selectable.
We are also going to add a small picto next to the input field. You can provide any div with an image. Here, instead of putting an image in the div, we created an html/css picto, and we pass the div id into the id_picto parameter, so a click on that div will trigger datepicker opening.
In the callback function, we take to day of the date (we are receiving a javascript date here) and we put it in the picto's div.
Finally, we are using the black theme, including this CSS.
and here is the result:
Example 4
In this fourth example, we are creating a datepicker located in Australia, Queensland.
We are using the small blue theme, to create a small datepicker.
As we want to gain space, we won't be displaying the week number, and we will display a dot instead of the full name of the public holiday (the full name is always visible on hover).
and here is the result:
Going mobile
We do support mobile web.
The widget comes with a mobile.css responsive layout that you can completly adapt to fit your own website identity. In our mobile.css, the width of the cells are computed relativly to the screen width. On a mobile web page, the datepicker calendar frame is to be added at body level on a fixed position (rather than at a relative position below the input text field like we do on a desktop). That is why the component needs to be aware that we are choosing a mobile layout adding the mobile=1 parameter.
visit this page from a mobile to see the result in action.
Workingdays_calendar(InputId,Options,CallbackOnSelect,Month,Year)
Turn any div into an inline calendar displaying public holidays
|
|
|
InputId |
|
Options |
See the configuration tool to see all the options available. |
CallbackOnSelect |
You can use it to provide your own code, to populate alternate field or anything else. You will be receiving a javascript date as a parameter in the callback function. |
Month,Year |
|
Example 5
The widget can be used to display a calendar on your web page.
On this example, we create an inline calendar localized in England.
and here is the result (you can try the widget):
The widget can be used to display a calendar on your web page.
On this example, we create an inline calendar localized in England.
and here is the result (you can try the widget):
Technical informations
To install the widget on your website, you need to download the Wdatepicker javascript file from the admin console (accessible to subscribers) and install it onto your webserver.At runtime, the Wdatepicker javascript will send asynchronous AJAX requests toward our servers that will reply with the public holidays information required.
We choose this architecture solution for several reasons:
What happens if our servers were unreachable?
If the requests from the javascript client could not reach our servers for any reason, the datepicker will gracefully fall back into a regular datepicker. (but well, we don't see why that should happen.. maybe if you deploy the widget on a intranet with no access to internet?)
Our servers are hosted by OVH.