Telerik UI for Windows 8 HTML

The RadDatePicker/RadTimePicker for Windows 8 is an HTML/JavaScript component that by default shows the system date/time in the picker as specified by the system short date/time format. It also shows those date/time elements in a selector that match the same short date/time format. These and few other elements of the control can also be customized to fit in your application requirements.

This topic contains the following sections.

Prerequisites

Before you declare a Telerik control in your application, make sure that you have added the references to the needed JavaScript and CSS resources, as described here:

Adding Telerik UI for Windows 8 HTML to an HTML Page

Creating the RadDatePicker/RadTimePicker

You can initialize the RadDatePicker/RadTimePicker in a way that is similar to the rest of the Telerik UI for Windows 8 HTML controls.

RadDatePicker

To create a RadDatePicker in the HTML markup, add an empty div element with a data-win-control attribute with a value of Telerik.UI.RadDatePicker:

RadDatePicker Markup Declaration Copy imageCopy
<div data-win-control="Telerik.UI.RadDatePicker">
</div>

Alternatively, you can create a RadDatePicker programmatically through JavaScript by first defining a div element with an id and then passing it as a first argument to the RadDatePicker constructor:

Markup Copy imageCopy
<div id="myDatePicker">
</div>
RadDatePicker JavaScript Declaration Copy imageCopy
var datePicker = new Telerik.UI.RadDatePicker(document.getElementById("myDatePicker"));

Both ways produce the same result. Here is an image of the control and its usage.

datepicker-gettingstarted

RadTimePicker

To create a RadTimePicker in the HTML markup, add an empty div element with a data-win-control attribute with a value of Telerik.UI.RadTimePicker:

RadTimePicker Markup Declaration Copy imageCopy
<div data-win-control="Telerik.UI.RadTimePicker">
</div>

Alternatively, you can create a RadTimePicker programmatically through JavaScript by first defining a div element with an id and then passing it as a first argument to the RadTimePicker constructor:

Markup Copy imageCopy
<div id="myTimePicker">
</div>
RadTimePicker JavaScript Declaration Copy imageCopy
var timePicker = new Telerik.UI.RadTimePicker(document.getElementById("myTimePicker"));

Both ways produce the same result. Here is an image of the control and its usage.

timepicker-gettingstarted

Setting RadDatePicker/RadTimePicker Options

You can set the options of the RadDatePicker/RadTimePicker in a way that is similar to the rest of the Telerik UI for Windows 8 HTML controls.

RadDatePicker

Just like any other Windows Runtime JavaScript control, the RadDatePicker options can be defined through the data-win-options attribute:

Setting RadDatePicker Options in Markup Copy imageCopy
<!-- Define a date picker allowing the user to choose only month and day during the current year. -->
<div data-win-control="Telerik.UI.RadDatePicker" data-win-options="{
        displayValueFormat: 'MM/dd'
    }">
</div>

Alternatively, you can programmatically pass an options object as a second argument to the control constructor:

Setting RadDatePicker Options in JavaScript Copy imageCopy
// Define a date picker allowing the user to choose only month and day during the current year.
var datePicker = new Telerik.UI.RadDatePicker(document.getElementById("myDatePicker"), { format: "MM/dd" });

RadTimePicker

Just like any other Windows Runtime JavaScript control, the TimePicker options can be defined through the data-win-options attribute:

Setting RadTimePicker Options in Markup Copy imageCopy
<div data-win-control="Telerik.UI.RadTimePicker" data-win-options="{
         displayValueFormat: 'hh:mm'
    }">
</div>

Alternatively, you can programmatically pass an options object as a second argument to the control constructor:

Setting RadTimePicker Options in JavaScript Copy imageCopy
// Define a time picker allowing the user to choose only hour and minute.
var timePicker = new Telerik.UI.RadTimePicker(document.getElementById("myTimePicker"), { format: "hh:mm" });

To see all available configuration options, go to RadDatePicker

Accessing and Modifying Date/Time Pickers

You can get ahold of the RadDatePicker/RadTimePicker object the same way as the native WinJS components - find its DOM element and access its winControl property.

Getting a Picker Control Using the winControl property Copy imageCopy
var picker = document.getElementById("myPicker").winControl;

Once you have a reference to the control, you can modify its properties as required:

Changing a Picker Control Option Copy imageCopy
picker.autoSizeWidth = true;

Attaching Events

You can either declare an event handler in the options object that you pass to the control during initialization, or you can use the addEventListener method to attach a function for execution upon a certain event. Below you can see samples of both approaches:

Assigning an Event Handler as a Control Option Copy imageCopy
var picker = new Telerik.UI.RadDatePicker(document.getElementById("myPicker"), {
    onchange: changeHandlerFnName 
});
// OR
var picker = new Telerik.UI.RadDatePicker(document.getElementById("myPicker"), {
    onchange: function(e) {
        //...
    }
});
Note

Note that if you attach the event handler as shown above but in HTML mark-up you would need to mark the handler function as safe in your code, using the WinJS.Utilities.markSupportedForProcessing function.

Adding an Event Listener to a Win Control Object Copy imageCopy
picker.addEventListener("change", changeHandlerFnName);

See Also