Create an Appointment Tracking App with RadDatePicker & RadTimePicker.

by Michael Crump

September 05, 2012 Web 0 Comments

Introduction

We all have a variety of uses for collecting Date and Time information from a user. For example, tracking the time a patient arrives and departs from a hospital, to when a car was returned at a local car rental location to tracking expense reports. One of the controls that you may have found missing with Windows 8 XAML applications is the Date/Time Picker control. While the control exists for Windows 8 HTML Applications, it is very limited in its initial state. That is one of the reasons that Telerik has decided to make a more robust Date/Time Picker control and in this blog post we will explain how to use it in a simple app that keeps track of important appointments. So buckle up and let’s get started.

Gathering the Required Tools

I’ll make this brief, to get started follow the information posted here. After that is complete then you will need to download and install the Telerik’s Windows 8 UI Controls. Once that is in place we are ready to start working with the controls.

Let’s Begin with a StoryBoard of our App

I’m a big fan of using storyboards to visualize our applications before writing any code. For this simple one page application, I’m going to use the new PowerPoint StoryBoarding tab available if you install VS2012 Pro and up. Below you can visualize what our application looks like on the Start screen and the second screenshot shows what our single page application looks like.

Figure 1: Windows 8 Start Screen Mock

Figure 2: Appointment Tracker Mock

Please note that I prefer the light theme for storyboarding purposes.

Putting it All Together

Launch Visual Studio 2012 from the Start Screen and selecting “Templates” -> “Other Languages” -> “JavaScript” then “Windows Store”. If you are using the RC, then it located under "Windows Metro Style”. Select “Blank App” then give it a name and select the OK button as shown below.

In this sample, we are going to use the name AppointmentList. Once the project loads, we need to right click on References and select “Add Reference”.

From here, we can select “Telerik UI for JS Metro” and press OK.

If you look under References, you will see “Telerik UI for JS Metro” has been added.

Starting From Default.html

The first thing that I want to do for this sample application is setup my page to resemble the storyboard used in Figure 2. Even though we just added a reference to the Telerik controls, we are going to need to add the following Telerik JavaScript/CSS Files to our application as well. This will give us access to all of the styles/controls available to us by Telerik.

<script src="///Telerik.UI/js/jquery.js" type="text/javascript"></script>

<script src="///Telerik.UI/js/ui.js" type="text/javascript"></script>

<link href="///Telerik.UI/css/common.css" rel="stylesheet" type="text/css">    

<link href="///Telerik.UI/css/dark.css" rel="stylesheet" type="text/css">

We can also use the built-in styles supplied by Microsoft to put together a user interface quickly and easily. Copy and paste the following code and put it inside your <body> tags.

<div class="fragment homepage">

<header aria-label="Header content" role="banner"> 

<h1 class="titlearea win-type-ellipsis">

<span class="pagetitle">Appointment Tracker</span><br/>

</h1>

</header>

<section aria-label="Main content" role="main">

<p>Appointment Name:   

<input id="appointmentInput" type="text">

</p>

     Arrival<br/> 

<span data-win-control="Telerik.UI.RadDatePicker" id="arrivalDateInput"></span>

<span data-win-control="Telerik.UI.RadTimePicker" id="arrivalTimeInput"></span> <br/>Departure<br/> 

<span data-win-control="Telerik.UI.RadDatePicker" id="departureDateInput"></span>

<span data-win-control="Telerik.UI.RadTimePicker" id="departureTimeInput"></span> 

<br/><br/>

<button type="button" id="saveButton" >Save</button>

<button type="button">Clear All</button>

<br/>

</section> 

<div id="appointmentOutput" ></div> 

</div>

The special tags to pay attention to are:

You may be surprised that is all it takes to use the control with its default settings. If we go ahead and run the application we can see the default look and feel of RadDatePicker and RadTimePicker.

One of the more commonly used scenarios of this control is formatting the way the data is displayed. Telerik has you covered there as well by the selectorFormat option. Say for example, you only wanted RadDatePicker to display the month and year. You could do that very easily by changing the selectorFormat to m/d as shown below:

The same thing applies with the TimePicker control. Maybe you only wanted RadTimePicker to display the hour and the minutes. You could accomplish that by changing the selectorFormat to h/m as shown below:

Adding Save Button Functionality

So far our application runs, but the Save button is not active. We are going to jump over to default.js and locate the following line:

args.setPromise(WinJS.UI.processAll());

Underneath it, add the following two lines of code:

var SaveButton = document.getElementById("saveButton");

SaveButton.addEventListener("click", SavebuttonClickHandler, false);

We begin by getting the id of our Save Button and adding in an event handler. Next, you need to add a function called SavebuttonClickHandler to run code once the Save button has been clicked. Add this function underneath app.oncheckpoint. Here's the function in it’s entirely:

function SavebuttonClickHandler(eventInfo) {

var appointmentName = document.getElementById("appointmentInput").value;

var arrivalDate = document.getElementById("arrivalDateInput").textContent;

var arrivalTime = document.getElementById("arrivalTimeInput").textContent;

var departureDate = document.getElementById("departureDateInput").textContent;

var departureTime = document.getElementById("departureTimeInput").textContent;



            document.getElementById("appointmentOutput").innerText = "You have an " + appointmentName + " arriving on " + arrivalDate + " and ending on " + departureDate + " from " + arrivalTime + " until " + departureTime; }

With the addition of this function, you've defined several local variables that gets the value or textContent set in our multiple input/span tags. Finally, it outputs the values inside our appointmentOutput div by appending each local variable. Of course, in a real-world application you would probably want to do some sort of error checking to see if the values are null or not before printing to the screen. The only thing left to do now is run it and see our results:

You can see in this simple example that creating and customizing RadTimePicker/RadDatePicker is very simple and can be used in a variety of different ways. But so far, we haven’t explored Blend support or adding the controls via JavaScript. Let’s take a look at Blend Support now then we will take a look at adding the controls via JavaScript.

Download this project.

Blend for Visual Studio is Supported

We could have also created our UI in Blend for Visual Studio if we wanted to by right clicking on default.html and selecting “Open in Blend”.

If we navigate over to Assets and select “References” then “Telerik UI for JS Metro”. This will allow us to see all of the controls available in the suite.

We could simply drag and drop the controls that we wanted onto the designer and Blend would automatically add references to the Telerik CSS/JavaScript files as well as add in the proper tags. We also have the ability to edit the properties more easily by looking at the HTML attributes for the controls as shown below.

Using JavaScript with RadTimePicker & RadDatePicker

The last topic that I want to talk about is adding these controls programmatically by using JavaScript. So let’s go ahead and remove everything inside the default.html page (yes, everything!) and pasting the following code inside:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>AppointmentList</title>

  

<!-- WinJS references -->

<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

<script src="//Microsoft.WinJS.1.0/js/base.js"></script>   1:  

    <script src="//Microsoft.WinJS.1.0/js/ui.js">

</script>

  

    <!-- AppointmentList references -->

    <link href="/css/default.css" rel="stylesheet" />

    <script src="/js/default.js">

</script>

    <script src="///Telerik.UI/js/jquery.js" type="text/javascript">

</script>

    <script src="///Telerik.UI/js/ui.js" type="text/javascript">

</script>

    <link href="///Telerik.UI/css/common.css" rel="stylesheet" type="text/css">

    <link href="///Telerik.UI/css/dark.css" rel="stylesheet" type="text/css">

    <script>

        document.addEventListener("DOMContentLoaded", function () {

var datePicker = new Telerik.UI.RadDatePicker(document.getElementById("myDatePicker"), { selectorFormat: "m/d" });

var timePicker = new Telerik.UI.RadTimePicker(document.getElementById("myTimePicker"), { selectorFormat: "h:m" });

        });


</script>

  

</head>

<body>

<p>Appointment Date</p>

<div id="myDatePicker"></div>

<br>

<p>Appointment Time</p> 

<div id="myTimePicker"></div>

</body>

</html>

Heading back to our body tag, we added two divs where our span tags were. This is simply a placeholder for the Date/Time controls we are about to place inside. If you scroll up then you will see we added a small piece of JavaScript to run after the DOMContent is loaded and we declared a new instance of RadDatePicker/RadTimePicker and set the selectorFormat exactly like we did in Blend. Pretty easy stuff right?

Wrap-up

In this blog post, we took a look at RadDatePicker and RadTimePicker part of Telerik’s Windows 8 UI Controls. We saw just how easy you can implement the controls in a real-world application using VS2012 and/or Blend for Visual Studio. I encourage you to check out the other controls available in the suite. If you would like to learn more about this control, then feel free to check out the online control documentation as well.

Thanks again and if you have any questions or comments, then feel free to drop them in the comments section below.

App Dev

About the Author

Michael Crump

Michael Crump is a Microsoft MVP, Pluralsight and MSDN author as well as an international speaker. He works at Telerik with a focus on everything mobile. You can follow him on Twitter at @mbcrump or keep up with his various blogs by visiting his Telerik Blog or his Personal Blog.

Comments

Comments are disabled in preview mode.

All articles

Topics

Latest Stories
in Your Inbox

Subscribe to be the first to get our expert-written articles and tutorials for developers!

All fields are required

Country/Territory

Blog

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools