The purpose of this demonstration is to showcase the different ways you can implement a date field on your form.  Section 1 features the various options available using the Date Field Type.  Section 2 shows how the standard Textbox Field Type can be used for dates.  Section 3 demonstrates a variety of jQuery applications.

Section 1

When you select a Date Field Type, you will need to select from among the built-in format options available.  In our demonstration, the birthday question was set with the Month, Day, Year (Combo Box).   We used a Textbox with Calendar for the Project Due question.  We chose the Month and Year type for the Happy Memory and the next question uses a Month, Day, Year (Textbox).  Finally, the Anniversary question uses the Month and Day type.

A word on the year options:  The options you offer using combo boxes (dropdowns) are set by the Starting Years and the Ending Years.  Keep in mind that a value of zero means the current year.  Take a look at the birthday question.  This has a starting year of -90 and an ending year of -14.  This means that with the current year being 2009, the choices will only range from 1919 to 1995.  This is especially helpful in implementations where you have age limitations.

Also notice the Happy Memory field where the starting year is -90 but the ending year is 0.  This means that they can select up to the current year.  In contrast, you can set the starting year to -5 and the ending year to 10 so that the earliest year will be 5 years back from current year and the latest option will be 10 years from today.

Section 2

The Textbox Field Type is also a great way to implement a date field.   Dynamic Forms 3.0 now offers the Mask Edit Option where you can use 999 for numeric entries, aaa for text and *** for alphanumeric entries.  (See also  Demo 26.)  For this demo, we used 99/99/9999 as the mask edit.  You may also set the default as watermark.

Defaulting the field to today's date can easily be done by editing the textbox and going to the Advanced Field Options.  Here you can set the Default Value to SQL Driven.  In this example, we used this to auto-populate the field:  Select GetDate() As DefaultValue

Section 3

In this section, we explore the many ways you can use jQuery to implement your date fields.   There are a series of elements that need to work together to get this working.  Here's a step-by-step illustration of how we set up this demo:

• First, visit http://jqueryui.com and click on the Demos and Documentation Tab.  Find the section For Developers and click on Getting Started where you'll get instructions on how to get set up.  Make sure you download the jQuery UI by clicking on the Download Builder.  Once you download all the components you need, go ahead and upload them to your site.
• Using Script Injector by Gumbosoft (available at www.Snowcovered.com) loaded on the same page, you can add all the jQuery scripts you need, including the jQuery UI Core.
• From here, go to Module Configuration, Custom Javascript File.  In the Initial Javascript, you can define your jQuery fields.  For this demo we used this:

jQuery($(DPDefault_#FieldID)).datepicker();

jQuery($(DPMultiple_#FieldID)).datepicker({
            numberOfMonths: 3
        });

jQuery($(DPDisplayButtons_#FieldID)).datepicker({
            showButtonPanel: true
        });

jQuery($(DPMonthYear_#FieldID)).datepicker({
            changeMonth: true,
            changeYear: true
        });

jQuery($(DPFormat_#FieldID)).datepicker({dateFormat: "DD, d MM, yy"});

• Now you're ready to create the field on your form.   Set the short field name of your date field based on your initial javascript.   For our demo here, the Date Picker Default field was given a short field name of DPDefault while the Multiple Months field has a short field name of DPMultiple.

Note:  Each field will need to have something in the Client Side Event box under Advanced Field Options or the jQuery will not work.  We added 'var nothing;' for this demo.

 

Did you notice the pop up image?  You can set up your own by going to Module Configuration, AJAX/jQuery Integration.  Choose Link Type: File.  If you click on Generate, you'll get to www.ajaxload.info where you can generate your own image.  Once created, you can choose to Upload New File in Dynamic Forms with your new AJAX progress image.  Otherwise, you can use the Alternate Modal Popup Message to add your own text as you see in this demo.  See Demo 23 for an example of a progress image.

Visit other Dynamic Forms Demonstrations to see how this module can enhance the look and functionality of your site!