Date picker

The Date Picker includes, among other things, the following features.

• It can be configured as a date, date/time, or time picker by setting the Date format string.

• Client-side Event mode allows the first and last date shown in the Date Picker to be dynamically computed using Javascript functions

• It can be configured to disable certain days of the week. For example, can disable dates on Saturdays and Sundays

To select the new Date Picker in the Grid Builder, make sure that the ' Use Legacy Date Picker property ' in the Properties > Miscellaneous section is unchecked. The UX Builder will always use the new Date/Time Picker . To turn a date picker into a date/time picker, simply define a Date Format that includes a time portion.

Date/Time Picker properties grid in the UX Builder

Additional settings, including localization properties, are found in the Properties > Other for the UX builder . In the Grid builder these same properties can be found under the Properties page under Miscellaneous .

Date Picker settings in the Other Properties section of the UX Builder

Date Picker settings in the Other Properties section of the Grid Builder

Set to include a Date and Time Picker

1. With a [Textbox] control with a Time type added to the UX Builder, go to Properties .

2. Go to Other and select the Date Format property row. Click the button to the right of the row.

   

3. The Date Format Dialog will load. Select the Date Format you wish to use from the drop-down and click the Build button next to the Time Format : box.

4. The Time Format Codes Dialog will appear. Here you can either format your own string using the Format String box and the Format Code list that appears above it. Alternatively, if you want a format string that has already been created simply click the text button labeled Insert pre-defined format strings . This will determine how the Time picker appears in your control. This example creates a Time Picker showing the hours, minutes, and seconds with either an AM or PM displayed and a 0 when empty. Pre-defined format strings

   

5. Click OK to close the Time Format Codes dialog. You will see your new Time Format displayed in the Date Format dialog.

6. Click OK to close the Date Format dialog. Your change should be visible in the Date Format definition on the Properties page.

   

7. In the Grid Builder go to the Working Preview tab. You should see something like this when you click the Date/Time Picker drop-down button.

   

   Date and Time Picker

Creating Multiple Controls with Different Portions.

1. If you want one of your controls to have a date and time format while limiting the format of some other controls there is an easy way to do this. First go to the Controls page under the UX Builder Design menu.

2. Click on the control you wish to modify and on the right scroll down to the Date/Time Picker Properties list.

3. On the Date Format property row click the button at the end of the row.

4. The Date, Date/Time, Time Format Dialog will open. If you have not set the to include a Time and Date Picker format string see the instructions above on how to do this. If your setting does include both of these, then this dialog is where you can override the setting. Click on the drop-down to select the override setting you wish to use.  will make the control only displays the date format string from your .  will alter a control to only include the time format string from your .  lets you create a control with its own separate date and time format strings. Selecting is the same as seleting.

   

   Override the Setting for Date/Time Format

5. If the 'Date of Arrival' control shown at the beginning of the guide is overridden with the  then it will look something like this...

   

The ' Show days of the week ' Setting toggles on and off the days of the week. Out of the box these settings are in English. However, if you are in a non-English speaking country you can control the month and day names. To access the language strings go to the UX Builder Properties on the design menu and scroll down to the Other properties. Change the text for the " Date picker - 'Today' button text ", the " Date picker - day names " text, and the " Date picker - month names " text to your liking. To see the changes simply click on Working Preview and open your Date Picker control.

Setting international text

The Has mask property on the Controls page under Date/Time Picker properties allows you to restrict what a user can enter into a Date Picker. In cases where the user is doing their own typing into a field, a mask can prevent them from entering characters and only allow them to enter numbers, or visa versa. Alpha Anywhere also has an Allow date ranges property. A date range is where you use a single date field to enter two date values. The Multiple separator property lets you decide which character(s) you want to use to distinguish the two ranges. Before you change it the separator is usually '..', Here is a date range with .. as a separator

The Low date property sets the lowest date that a user can select on the Date Picker. Similarly the High date property sets the highest date that a user can select. Both of these properties are listed on the Controls page under Date/Time Picker properties. When you click the button next to either of the two, the ' Property Value ' dialog will open. Here you can choose either an Explicit value or a Javascript function for the low and or high date. If you want an explicit value, which a user can not go beyond, simply enter it in the Property value: text box. Alternatively you could also copy and paste into this box from your working preview.

A low date set at August 11th

If you click the Javascript function radio button in the Property value dialog, then you can use a function for the Low date or High date property instead of an absolute value. Using this feature you can prevent users from entering an end date that occurs before the start date that enter.

Adding a Javascript Function to a Low date Property

1. Go to the UX Controls page.

2. Click on [Textbox] under Data Controls and when the New Control Dialog opens create a control with the Name: start_date and the Label: Start Date. Under Data Type: select 'Date'.

3. Click OK .

4. Create a second [Textbox] control. Give it the Name: end_date, Label: End Date, and select Data type: 'Date'.

5. Click on the [end_date] control in your control list. Scroll down the Properties list on the Controls page until you get to Date/ Time Picker Properties .

6. Click on the button next to the Low date property to open the Property Value dialog.

7. In the Property Value dialog click the Javascript function radio button. In the Javascript function name: textbox type getLowDate.

8. Go to the Design menu on the left and click on the Code section drop-down to open it. Select Javascript functions

9. Enter the following Javascript code into the Javascript code editor.

   function getLowDate(){ 
   var startDate = {dialog.object}.getValue('START_DATE'); 
   if(startDate != '') return startDate; 
   else return ''; 
   }

10. Go to your Working Preview window. You should now not be able to enter a end date earlier than the start date you entered.

These videos give a tour of the Date Picker features and show how the Date picker appears with various settings:

• Watch Video - Part 1
• Watch Video - Part 2
• Watch Video - Part 3

Date Picker

In previous updates support was added for customizing the day and month names in the calendar. Now, you can customize the day that the week starts on. In the Grid Properties there is a new property for 'First day of week'. By default this is set to 1 ( for Sunday). If you want the week to start on Monday, set this property to 2. The screen below shows how the calendar looks when the first day of the week is set to 3 (Tuesday).

Keeping a Calendar Control Current

When you place a Date Picker (popup calendar) control on a grid or dialog component, there are several properties that you can set.

• Date format

• Low year

• High year

There are applications where you would want to limit the range of years shown on the control. You might also want to dynamically change the date format, depending on the preferences of the web user. This example shows the override section of the dlg_hdatedialog component after the designer placed it on an A5W page. The date picker was the first control on the page (hence with Variable_Info[1]).

with tmpl_dlg_hdate
with Variable_Info[1]
.DatePicker.DateFormat = "mm/dd/yyyy"
.DatePicker.HighYear = cyear(date())
end with
componentName = "dlg_hdate"
end with

Note how the .DatePicker.HighYearproperty will always be set to the current year (in this case, 2006). There will be no need for future maintenance.