Sitecore WFFM: How to include Year & Month in the Date Picker field

Posted on Updated on

 

Have you noticed anything wrong with this date picker?

WFFM - Date Picker Plugin

 

Well, let me you give a scenario:

Anonymous user goes to this form page, populate the fields, and navigate to April 1993.

Now you see the problem? For you to be able to locate the year 1993, you have to click the left arrow button on top left of the date picker, clicks needed: 283 clicks. 

And Imagine your AGE plays around 40 years old. Total clicks needed: 487 clicks

 

are you kidding me.jpg

 

So wait! Why not type it manually from the field!!??

gotcha

Well, You cannot! The state is READONLY.

Enough talking.

Here’s what you have to do.

  1. Open the \Website\Views\Form\EditorTemplates\ DatePickerField.cshtml
  2. Navigate to the bottom, you’ll see this line of code:
    $scw(".field-datepicker")
  3. Modify, and save.

From:

datepickerfield without date and year.JPG

To:

datepickerfield add year and date attribute.JPG

Raw code:

 V.8.0

if (typeof ($scw) === "undefined") {
window.$scw = jQuery.noConflict(true);
}
$scw(document).ready(function () {
$scw(".field-datepicker").datepicker({
'defaultDate': new Date('@currentDate.Year', '@(currentDate.Month - 1)', '@currentDate.Day'),
'dateFormat': '@ClientDateFormatConverter.ConvertToClientFormat(Model.DateFormat)',
'minDate': new Date('@Model.StartDate.Year', '@(Model.StartDate.Month - 1)', '@Model.StartDate.Day'),
'maxDate': new Date('@Model.EndDate.Year', '@(Model.EndDate.Month - 1)', '@Model.EndDate.Day'),
'changeMonth': true,
'changeYear': true,
});
});

 

(Update) V.8.1

window.WffmFieldsData["@Html.IdFor(x => Model.Value)"] =
{
'defaultDate': new Date('@Model.Value'),
'dateFormat': '@ClientDateFormatConverter.ConvertToClientFormat(Model.DateFormat)',
'minDate': new Date('@Model.StartDate.Year', '@(Model.StartDate.Month - 1)', '@Model.StartDate.Day'),
'maxDate': new Date('@Model.EndDate.Year', '@(Model.EndDate.Month - 1)', '@Model.EndDate.Day'),
'changeMonth': true,
'changeYear': true,
};

 

Result:

datepicker with year and month

 

You can find more about Jquery date picker here.

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