Implement the Dojo DateTextBox Control In an HTML5 Web Application Using the Maqetta Editor

8/19/13

In this follow up to the Create an HTML5 Desktop Application in the Maqetta Editor article, we’ll be learning how to work with Dojo DateTextBox control properties to change the date display format as well as perform various validation checks. As a bonus, we’ll also get better aquainted with the Palette and Property tabs of the Maqetta editor.

Setting Constraints

Constraints define the valid range and formats of a control. These can be closed or open-ended. The Start Date field is a great example of the latter because we want it to reside in the past. Therefore, the maximum value should be set to today’s date. Dynamic values such as these can be set in the ready() initialization block:

ready(function(){
    txtStartDate = dijit.byId('txtStartDate');
    txtStartDate.constraints.max = new Date();
...

The above code causes all future dates to be crossed out and disabled in the calendar:

We can also we constraints on the fly by hooking them up to an event.

       1. Select the txtStartDate control in the design window, click on the Events tab on the far right, and assign a function called “setEndDateConstraints” to the onblur() event.

       2. Add the following code to the app.js file so that end date calendar will only allow values greater than the selected start date (if there is one):

function setEndDateConstraints() { txtEndDate.constraints.min = txtStartDate.value; }

       3. While the underlying date value is always stored as a proper Date object by the DateTextBox control, the displayed date can be formatted however you wish using the datePattern property of the constraints object. I’ve always been partial to the universal ‘yyyy-MM-dd’ format myself:

txtStartDate.constraints.datePattern = ‘yyyy-MM-dd’;

Adding a Button

We’ll be needing a button to kick off the years of service calculation.

1. Locate the <BR> tag in the Palette under “HTML > Paragraphs, Breaks, Rules” and drag a couple over after the txtEndDate control.

2. Now we’re ready for the button. It’s under “HTML > Forms” in the Palette. Drag it over to the design window after the Breaks to add it to our form.

3. Click on the Widget tab on the right (it’s the first one) so that we can assign an ID. We’ll need that to hook up our JavaScript code. In the ID field, enter “btnCalc”.

4. In the Label field, give the button a value of “Calculate”.

5. Although the click event is exposed on the Events tab, we’ll do something a little different and bind the onclick code through code. Switch to the app.js file and enter the following code after the initialization of the date fields:

dojo.connect(dojo.byId(“btnCalc”), “click”, function(evt){ };

That is the unobtrusive way to add behavior to page elements because it doesn’t add an onclick attribute to the HTML markup.

Setting Up the Years of Service Output Labels

The years of service information will be presented using six labels within a DIV element: “Years: nn   Months: nn    Days: nn”.

1. Once again, drag over a couple of Breaks from the Palette to the design window, after the Calculate button.
2. You’ll find the DIV under “HTML > Common” in the Palette.
3. Once you’ve got it on the screen, go to the Border tab on the right and give it a border of “1px solid black”.
4. Go to the Fonts/Text tab and assign a font size of “10pt”.
5. Right next to the DIV elements where you’ll find the Label in the Palette. Drag all six over to the new DIV.
6. Double-click the first label so that the popup text editor appears, and set the text to “Years:”.
7. Double-click the next label, but this time, delete the text so that it has no value.
8. Repeat this process for the “Months:” and the “Days:” label pairs.

Output for Messages

It’s not enough to rely on constraints to validate the date values. We also need to perform some checks when the button is clicked. Those validation messages will appear in a DIV below the Years of Service one.

1. Drag over a couple more Breaks and a DIV to the bottom of the form.
2. Select the DIV and click on the Fonts/Text tab on the right.
3. Assign an ID of divOutput, a font size of “12pt”, “red” color, and “bold” font-weight.

Coding the btnCalculate Onclick Event

As mentioned earlier, we need to perform some validation before calculating the years of service. The three main checks to do are that:

• Both the start and end dates have been provided.
• Both the start and end dates are valid dates.
• The end date is later than the start date.

The displayedValue is a good one for testing for an empty string since it is already a string type, unlike the value, which is better suited for the date ordering test above, being a proper date. We can test for a valid date using the state property. It is set to “Error” when the date parsing fails. Here is the validation code, along with the call to calcYearsMonthsAndDays() when validation passes:

dojo.connect(dojo.byId("btnCalc"), "click", function(evt){
        var divOutput = dojo.byId('divOutput');
        //clear any previous messages
         divOutput.innerHTML = '';
        
        if (txtStartDate.displayedValue == '') {
                 divOutput.innerHTML = 'The start date is required.';
                 txtStartDate.focus();
        }
        else if (txtEndDate.displayedValue == '') {
           divOutput.innerHTML = 'The end date is required.';
           txtEndDate.focus();
        }
        else if (txtStartDate.state != '') {
                 divOutput.innerHTML = 'The start date is invalid.';
                 txtStartDate.focus();
        }
        else if (txtEndDate.state != '') {
           divOutput.innerHTML = 'The end date is invalid.';
           txtEndDate.focus();
        }
        else {
                var startDate = txtStartDate.value;
                var endDate   = txtEndDate.value;
                
                if (startDate > endDate) {
                   divOutput.innerHTML = 'The start date must be earlier than the start date.';
             txtStartDate.focus();
                }
                else {
                   calcYearsMonthsAndDays(startDate, endDate);
                }
        }
});

Conclusion

The calcYearsMonthsAndDays() code is fairly long, so I’ll leave that for next time, along with some tricks for beautifying the form. Until then, try running the above code yourself and step through it to better understand what each property returns.