SharePoint – JQuery Calendar Control

In SharePoint out of the box the calendar control is quite basic and rigid.

image

Giving an example here : let’s say you are working in an international environment and you need to change the date Format depending on the user region.

Or you want to change the week start day not being a Sunday but a Monday for example

image

Well the JQuery Calendar control can handle this and much more

Here is how it will look at the end.

image

And this is how to get there :

First you need to get the JQuery libr. installed. But that’s obvious.

Next you need to remove the original calendar image.

Next you need to bind a .Change Event to the input box.

This is only a snippet out of the full code but it should be enough to get you going

<script type="text/javascript">
/* Remove "From" Calendar Image link */
$('#ctl00_m_g_...  ').each(function () {
    $(this).replaceWith($(this).text());
});
/* Remove "To" Calendar Image link */
$('#ctl00_m_g_...   ').each(function () {
    $(this).replaceWith($(this).text());
});

/* Set Date Field "To" based on the Date Field "FROM", Change Event*/
$('#ctl00_m_g_...   ').datepicker(
{
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        onSelect: function(dateText, inst) 
{
$("[name='ctl00$m$g_...   ']").val(dateText);
    }
});

/* DatePicker "To" Field */
$('#ctl00_m_g_...   ').datepicker(
{
        dateFormat: 'dd/mm/yy',
        firstDay: 1, 
        onSelect: function(dateText, inst) 
{
        $(this).val(dateText);
 }

});
</script>

Enjoy !

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: