SharePoint 2013: How to Render Single Line of Text as Date Range Control using JSLink

While working with an assignment, I encountered a requirement where we needed to have a Date Range Control in the SharePoint List Form for user entry.

I got the same requirement in the past when I was working with SharePoint 2007. At that time, I achieved this requirement by developing Custom Field Type for Date Range. Believe me, it was too tricky to handle but we did not have any other option available at hand. But this time, I made use of Client Side Rendering Framework, which is a new concept introduced in SharePoint 2013.

And the awesome part about it, is that we can bring this big change without changing the existing schema of the List itself.

In order to work out the demo, we can start with an existing list " Products”, which has a list of Products available in a catalog (an arbitrary scenario), as shown below-

All we need to do is to add Product Validity information into the catalog, so that Products can be tracked based on the Product Validity Date Range.

So, let’s add a new column of type "Single Line of Text " by the name "ProductValidity " , as shown below-

Now, we need to add a new JavaScript file at any suitable location in your site. For this demo, I am adding the file to "SiteAssets" by the name "Date Range – JSLink.js" as shown below-

Now, let's add the JSLink plumbing to the JavaScript File, in the below order-

Step 1: Add required reference to JQuery Files & CSS files. For this demo, we need to add the references to "jquery-1.10.0.min.js", "jquery-ui.min.js" , and "jquery-ui.css".

Step 2: Create a JSON Object that defines the behavior of the List Column on which it is implemented.

Templates: This is a sub object that can store the information regarding List Template Type.
OnPostRender: Defines the method to be called, after the List Column gets rendered.
Fields: Defines the field on which this JSLink should get implemented.

Step 3, Step 4 & Step 5: Define that this JSLink should be implemented on "ProductValidity" column only when it is rendered in "NewForm" and "EditForm"

Step 6: Finally, register Template Override to make sure that JSLink should get precedence over the OOB behavior of List Column rendering.

Now, let’s get inside the function "DRFieldTemplate" which will act as Template Override Handler.

Step 7: Instantiate Form Context by calling "GetFormContextForCurrentField" method.

Step 8: In this step, we are reading the "ProductValidity" Column value and splitting it by "-", since the values saved to the field as "From Date – To Date"

Step 9: In this step, we are preparing the custom HTML to render the List Field in a new way. This is the turning point of this implementation and here you can apply any HTML you like. This also equally means that we can give any desired look to our List Field in this step.

Step 10: Here, we are defining the Get Value Call Back function that supplies SharePoint a custom value for the List Column to save to.

In this step, we are getting values from two different input controls (From Date & To Date) and formatting these values by separating them using "-" character, which can be used as splitter in Step 8 above.

Step 11: In Post Render Callback, we are hooking up the jQuery Date Picker control to the HTML Input controls.

Note: Post Render Callback will get executed once the default rendering of the List Form has been completed.

Since we have developed this JSLink to work in "New Form" and "Edit Form" Mode only, we need to first apply this JSLink in these two forms.

Apply JSLink in New Form:

Browse the Products List.

From the Ribbon, choose New Item.

Once the New Form is loaded, verify if "ProductValidity" List Field is rendered as "Single Line of Text".

Now, in order to apply the JSLink, Edit the Page.

Edit WebPart.

Scroll down to the "Miscellaneous" Section in the WebPart Editor Part.

Locate the JSLink Placeholder.

Specify the path to the JSLink File.

Note: Here, we need to make use of SharePoint Tokens instead of specifying the full path.

To get details on different kinds of SharePoint Tokens, you can refer to another article from me https://howtodowithsharepoint.wordpress.com/2015/01/16/sharepoint-url-tokens/

Click OK to save the changes.

And if there are no issues with the JSLink, sure enough you will get the "ProductValidity" List Field converted from "Single Line of Text" to a set of multiple controls with Date Picker hooked to it.

Apply JSLink in Edit Form:

For the Edit Form, we have to follow exactly the same steps to Apply JSLink as we did in New Form –

Edit any List Item.

Validate "ProductValidity" List Field.

Edit Page.

Edit WebPart.

Specify the JSLink File Path and Click OK.

While adding or editing an item, we can select "Valid From" & "Valid To" date to specify the Product Validity.

These dates will be stored in the format, as shown below.

Every time a user edits the item, these dates will get split up based on "-" and set back to the respective date fields.

This simple demo shows how easily we can tweak around and enhance the default behavior of List Form rendering, by making use of JSLink mixing it up with latest HTML, JQuery & CSS constructs.

Hope you find it helpful.