Monday, February 3, 2014

Nintext Form - Custom Date Input Control

I was assigned to do a Nintext Form and when it came to date of birth input, relaying on date picker control was not a good idea, so decided to take input in custom way.

Here is is how I did it.

Step 1: Create control

Put three controls each for Date, Month and Year
Date and Year is Textbox
Month is dropwown list. Open settings for this dropdown and specify choices with following and also specify first choice as default value otherwise dropdown will have "Please selection one..." as first option.
01 (Jan)
02 (Feb)
03 (Mar)
04 (Apr)
05 (May)
06 (Jun)
07 (Jul)
08 (Aug)
09 (Sep)
10 (Oct)
11 (Nov)
12 (Dec)

Step 2: Assign CSS class to controls

Nintext default date picker control: custom-dob
Date control: custom-dob-dd
Month control: custom-dob-mmm
Year control: custom-dob-yyyy

Step 3: Add Javascript to Form's settings

Bring up the form's settings by going to tab Nintext Forms  > Settings
Paste following code in "Custom Javascript" section input box.

// Update Nintext DOB calendar control on input / chages of our custom control
var customDateInput = [];

NWF$(document).ready(function () {
    customDateInput.push({
        dt: NWF$('.custom-dob input'),
        d: NWF$('.custom-dob-dd input'),
        m: NWF$('.custom-dob-mmm select'),
        y: NWF$('.custom-dob-yyyy input'),
        format: 'dmy'
    });
});

function CustomDateInputHandler(idx) {
    // This function updates the date picker control
    // Find the controls from collection
    var item = customDateInput[idx];
    // Get date,month and year
    var d = item.d.val();
    var m = item.m.prop('selectedIndex') + 1;
    var y = item.y.val();
    // Build the date in specified format
    var dt;
    if (item.format==='mdy'){
        dt = m + '/' + d + '/' + y;
    }
    else if (item.format==='ymd'){
        dt = y + '/' + m + '/' + d;
    }
    else{
        dt = d + '/' + m + '/' + y;
    }
    // Update date picker control
    item.dt.val(dt);
}
NWF$(document).ready(function () {
    if (customDateInput.length === 0) return;
    for (var i = 0; i < customDateInput.length; i++) {
        curItem = customDateInput[i];
        // Save index of this item in attribute
        curItem.d.attr('custom-date-index', i);
        curItem.m.attr('custom-date-index', i);
        curItem.y.attr('custom-date-index', i);
        
        // Bind change event to date,month and year.
        // On change it will call a function with index
        // in the collection
        curItem.d.change(function () {
            CustomDateInputHandler(NWF$(this).attr('custom-date-index'))
        });
        curItem.m.change(function () {
            CustomDateInputHandler(NWF$(this).attr('custom-date-index'))
        });
        curItem.y.change(function () {
            CustomDateInputHandler(NWF$(this).attr('custom-date-index'))
        });
    }
});


Save the form and test if changing custom control is updating default datepicker control value correctly.

Step 4: Hide default datepicker control

Open the form's setting page by going to tab Nintext Form > Settings
Paste following code in "Custom CSS" section input box:

.custom-dob{
   visibility:hidden;
}


Here is design and final rendered look of the test form:

If more than one control is required

If you want to have more than 1 custom date picker, you need to copy the following code and replace the css class with your own. Also, take a look at the screenshot below:
The code you can use:

customDateInput.push({
    dt: NWF$('.custom-dob input'),
    d: NWF$('.custom-dob-dd input'),
    m: NWF$('.custom-dob-mmm select'),
    y: NWF$('.custom-dob-yyyy input'),
    format: 'dmy'
});

Changing the format of date

You might have notice format: 'dmy', you can change the value of dmy to following:
  1. dmy for d/m/yyyy
  2. mdy for m/d/yyyy
  3. ymd for yyyy/m/d

No comments: