Using SharePoint’s DatePicker Control

 

SharePoint Date Picker
SharePoint Date Picker

Whenever I am building anything for SharePoint, I try to leverage the OOTB SharePoint components as much as possible. There are a few benefits to doing so:

  • Present a UI that is familiar to the user
  • Spend less time re-inventing the wheel and spend more time on business logic
  • Write less code

SharePoint uses a lot of JavaScript, so why not use it to help build your application quicker? In this post, I will show you how you can use SharePoint's DatePicker control in your application page.

Overview

When creating a form, you want the user to be able to quickly and easily enter their data. What you don't want is a form where the user has to guess and potentially enter bad data. When dealing with a date field, a DatePicker control is ideal!

There are many DatePicker plugins available, like the popular jQuery DatePicker plugin. Depending on the requirements of your application, you might want to seek other options, specially if you want to have custom branding applied! But I almost always prefer using SharePoint's DatePicker control, mainly because I don't have to worry about including jQuery and jQuery UI... and I have yet to come across the need for a super fancy DatePicker control!

Code Snippets

In this section I will show you the code snippets required to use the OOTB SharePoint DatePicker control inside an application page!

1. Include the Script

The first thing we need to do is include the script that contains the DatePicker code:

[code language="csharp"]
<SharePoint:ScriptLink LoadAfterUI="true" runat="server" Name="datepicker.js" Localizable="false" Language="javascript" />
[/code]

2. Add the Markup

With the script included, we can now add the required HTML to make it work.

[code language="csharp"]
<asp:TextBox runat="server" id="txtDate" ClientIDMode="Static"></asp:TextBox>
<iframe id='txtDateDatePickerFrame' title='Select a date from the calendar.' style='display:none; position:absolute; width:200px; z-index:101;' src='/_layouts/15/images/blank.gif?rev=23' class="owl-date-picker "></iframe>
<a href='javascript:void()' style='vertical-align:top' onclick="clickDatePicker('txtNDate', '/_layouts/15/iframe.aspx?&cal=1&lcid=1033&langid=1033&tz=-08:00:00.0002046&ww=0111110&fdow=0&fwoy=0&hj=0&swn=false&minjday=109207&maxjday=2666269&date=', '', event); return false;">
<img id='txtDateDatePickerImage' border='0' alt='Select a date from the calendar.' src='/_layouts/15/images/calendar_25.gif?rev=23'>
</a>
[/code]

The markup needs a bit of explanation:

  • The TextBox control is the field that you want associated with the DatePicker control. So give it an ID (required).
  • The iframe tag is used to render the DatePicker control, it also requires an ID which is used by the script. Should have the same ID as the TextBox control but appended with 'DatePickerFrame'.
  • Next is a tag which has an OnClick attribute to call the DatePicker function 'clickDatePicker'. This function takes in a couple of parameters:
    1. The first parameter is the ID of the TextBox control
    2. The second is a string with all the DatePicker properties (explained below)
    3. The third param can be left empty
    4. The last parameter is the actual click event
  • And finally, inside the a tag, there is an img tag, it should also have an ID (required). Same as the TextBox control but this time appended with 'DatePickerImage'.

3. Calendar Options

You can configure the calendar with the query string parameters passed into the iframe.aspx page. Here is a brief outline of the options:

  • CAL: The SPCalendarType
  • LCID: The locale ID
  • LANGID: The language ID
  • TZ: The timezone
  • WW: Work week (a 7 day string to indicate the workdays, where 1 is a workday and 0 is not)
  • FDOW: First day of week (0-6, where 0 is Sunday)
  • FWOY: First week of year (0: the week in which january 1 occurs, 1: the first week that has at least 3 days in the new year, 2: first full week of year)
  • HJ: Hijiri adjustment
  • SWN: Show week number
  • MINJDAY: The minimum calendar day (number of days since 1601-01-01)
  • MAXJDAY: The maximum calendar day (number of days since 1601-01-01)
  • DATE: The selected calendar date

Conclusion

Adding a DatePicker control to your SharePoint app doesn't have to be complicated! No need for any third party plugins and no custom JavaScript code to maintain. Looks good, and works well.

It’s Time To Transform

Let us show you how much easier your work life can be with Bonzai Intranet on your team.