Script 8: Date Time Editors in Studio for WinRT XAML image Date Time Editors Display, edit and validate DateTime information using ComponentOne DateTime Editors™ for WinRT XAML. Get six fundamental editors that include both classic and Windows 8-inspired designs.

  • DateTime Editors

The C1DateSelector, C1TimeSelector and C1DateTimeSelector controls provide a series of drop-downs to collect DateTime input. These controls are inspired by the Windows Store apps. The C1DatePicker control provides a drop-down calendar in classic tradition. The C1TimeEditor control enables time input like a numeric up/down control. The C1DateTimePicker control combines C1DatePicker and C1TimeEditor into one colossal control.

  • Validate Input with Masking

The C1DatePicker and C1DateTimePicker controls support custom date formats and masked input. The edit mask tells the user the desired format and prevents end-users from entering invalid characters into the field.

  • Allow Null Values

C1DateTimePicker and C1TimeEditor allow null values, by default. You can disable this by setting the AllowNull property to false.

Controls Included

C1DateSelector

image

C1TimeSelector

image

C1DateTimeSelector

image

C1DatePicker

image

C1TimeEditor

image

C1DateTimePicker

image

Getting Started with Date Time Editors Step 1 of 3: Creating an Application with a C1DateTimePicker Control In this step, you'll begin in Visual Studio to create a WinRT-style application using TimePicker for WinRT XAML. Complete the following steps: 1. In Visual Studio 2012 Select File | New | Project. 2. In the New Project dialog box, expand a language in the left pane, under the language select Windows Store, and in the templates list select Blank App (XAML). Enter a Name and click OK to create your project. image 3. Open MainPage.xaml if it isn't already open, place the cursor between the and tags. 4. Navigate to the Toolbox and double-click the C1DateTimePicker icon to add the control to the grid. The XAML markup resembles the following:

<DateTimeEditors:C1DateTimePicker HorizontalAlignment="Left" VerticalAlignment="Top"/>

You have successfully created a WinRT-style application containing a C1DateTimePicker control. In the next step, you will customize the C1DateTimePicker control. Step 2 of 3: Customizing the Control In the previous step, you created a WinRT-style application with a C1DateTimePicker control. In this step, you will modify the appearance of the control. 1. Modify properties so it looks like this

<DateTimeEditors:C1DateTimePicker Height="60" Width="450" TimeFormat="ShortTime" DateFormat="Long" FirstDayOfWeek="Wednesday" HorizontalAlignment="Left" VerticalAlignment="Top"/>

TimeFormat="ShortTime" : Changes the format of the time to a short format consisting of only hours and minute spaces DateFormat="Long" : Changes the format of the date to a longer format that includes the weekday FirstDayOfWeek="Wednesday" : Changes first day of the drop-down calendar's week to Wednesday. will run the project and experience the functionality of the control. Step 3 of 3: Running the Project In the last step, you customized the C1DateTimePicker control. In this step, you will run the project and observe some of the run-time features of the control. Complete the following steps: 1. From the Debug menu, select Start Debugging. Your application will appear similar to the following: image 2. Using your cursor, highlight an area in the date picker. 3. Click the time picker drop-down arrow to reveal the calendar and observe that the calendar's weeks start with Wednesday. image Congratulations! You have completed the DateTimePicker for WinRT XAML quick start. In this quick start, you created a WinRT-style application containing a C1DateTimePicker control, modified the control's appearance, and experienced the control's run-time appearance features. See other Quick Start examples here. Next: Blog Series (Part 9) Input: Windows 8 Studio for WinRT XAML