s
Contact Login Register
h M

Dynamic Forms Demonstration - Date Fields and Options w/ Dynamic Forms

 

See all the different ways you can set a date field on your form!  The top parts are options available directly from Dynamic Forms out of the box.  You'll also find a variety of jQuery options for your date field.  Please see the tutorial below the form for additional information.  Thanks!

 

 


Section 1: Built-in Options for the Date Field Type


  


   

   

   

 


Section 2:  Dates Using the Textbox Field Type




Section 3:  Dates with JQuery Implementation






Save           

Dynamic Form Demonstration 28 - Date Fields w/ Dynamic Forms

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"});

** If using Dynamic Registration -> The jQuery Datepicker call will require an actual hardcoded ID. You won’t be able to reference $(TokenName_FieldID) for the datepicker call in Dynamic Registration.
 
  • 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!

 

 

DOWNLOAD A COPY


tip6.gifWould you like to set up your form just like this demo? 

     Simply download this template and save it using the exact file name (don't rename).  Next, upload it to File Manager and then go back to Dynamic Forms and click on Import Content.   

Get a copy now!



Let us do it for you



    Need help?  

Our super powers can make it happen. 

Let's start talking.




Enter your email below AND grab your spot in our big giveaway!

The winner will receive the entire Data Springs Collection 7.0 - Designed to get your website up and running like a DNN superhero (spandex not included).

  
Subscribe