Script 8: Date Time Editors in Studio for WinRT XAML 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.
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. 3. Open MainPage.xaml if it isn't already open, place the cursor between the
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
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: 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. 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