SharePoint – JQuery Calendar Control

June 27, 2014

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

SharePoint – JQuery is Null or Not an Object – Error

February 23, 2013

If so you are sure there is probably a conflict of JQuery objects in 1 SP form.

In this case SharePointBoost Cross-Site Lookup also uses a JQuery object to have their webpart function properly.

http://www.sharepointboost.com/cascaded-lookup.html

clip_image002

To solve the error conflict, you have to use the $.noConflict() method.

http://api.jquery.com/jQuery.noConflict/

Just add an extra line :

$.noConflict();
jQuery(document).ready(function($)
Code here ...

And you can start mixing JQuery Objects in 1 SharePoint form.


SharePoint – JQuery Scripts Examples

January 28, 2013

Lock input field and change background color

<br>/* --- Doc ready ---*/</p> <p>$(document).ready(function() {<br>/* --- End doc ready ---*/<br>/* --- Set Subject Read Only - Grey Color ---*/</p> <p>$("input[title='Subject']").attr("readonly","true").css<br>('background-color','#ccc').width(370);<br>});

Set a ‘To’ date field based on the ‘From’ date field. As you can see you need to find the proper field ID which is a long unique refference.

<br>/* Set Date Field "TO" based on the Date Field "FROM" */</p> <p>var sFrom= $("[name='ctl00$m$g_2a1915de_8d5b_445a_9443_...<br>Field$DateTimeFieldDate']").val();</p> <p>$("[name='ctl00$m$g_2a1915de_8d5b_445a_9443_2b18a9b32a7...<br>Field$DateTimeFieldDate']").val(sFrom);<br>;

The same as above but then on Change Event of the “From” date Field

<br>/* Set Date Field "TO" based on the Date Field "FROM" Change Event*/</p> <p>$('#ctl00_m_g_2a1915de_8d5b_445a_9443_2b18a9b32a70_ff3...<br>1_ctl00_ctl00_DateTimeField_DateTimeFieldDate').datepicker({<br>onSelect: function(dateText, inst)<br>{<br>$("[name='ctl00$m$g_2a1915de_8d5b_445a_9443_2b18a9b32a...<br>70$ff41$ctl00$ctl00$DateTimeField$DateTimeFieldDate']").val(dateText);<br>}<br>});<br>

Later I will add the print screen of how it looks :


SharePoint -JQuery Tools

January 28, 2013

Recently I needed to break out of the limited features that SharePoint had to offer out of the box. Condition was not to start programming, and especially not to change anything in the Backend of the SP Server.

So the solution was to turn to JScript, it runs client side !

Figure 1. Client Object Model Architecture

clip_image002

JavaScript Class Library

http://msdn.microsoft.com/en-us/library/ee538253(v=office.14).aspx

But with nearly ever touched JScript this would take me a while to get into it.

So the final solution came for the JQuery Library.

How to install the JQuery library

http://jquery.com/

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensbility, jQuery has changed the way that millions of people write JavaScript.

And the related SharePoint specific derivate tools, like :

SPFF Field assistant (needs JQuery Libr.)http://spff.codeplex.com/releases/view/28099

Dynamic Forms (needs JQuery Libr.)http://sharepointjavascript.wordpress.com/2012/05/29/dynamic-forms-for-sharepoint-production-release/

SPServices on Codeplex (needs JQuery libr.)http://spservices.codeplex.com/

SPAPI Webservices Libr (needs JQuery libr.)http://ekoncis.blogspot.be/2011/05/sharepoint-query-with-spapi.html

Jpoint API Framework Client side http://jpoint.codeplex.com/releases/view/37224

http://www.sharejpoint.com

Some examples in a next post.