Adding Kendo UI to a webpage : Kendo UI Date Picker Function

By | June 11, 2013

In the last post we learned what is Kendo UI and what it offers to provide rich interactive web solutions, In this post we will learn how to add Kendo UI controls to a webpage. Now you know what Kendo UI is you know what you want to add into your webpage, Kendo UI is JavaScript framework which consists of script files, cascading style sheets and assets and adding them to your webpage involves just three simple steps:

  • Copy ‘JS’ – copy the contents of JS directory of Kendo UI directory to the directory of your web application’s JS directory.
  • Copy ‘Styles’ – next is to copy the contents of styles of Kendo UI to the directory where your application references the style sheets used.
  • Register the scripts and CSS – lastly you need to register the necessary scripts files and CSS to make your page aware of Kendo UI, which pieces you register refers which functionality of Kendo UI you want to use.

To use the web pieces which includes the web widgets, MVVM framework, client side data source, validation, templating and drag and drop you need to register the following scripts and styles :

web widgets scripts

To use the Data Visualization pieces of Kendo UI you need to register the following scripts and styles :

data viz scripts

To use the mobile components of Kendo UI, you would need to register :

mobile scipts

and off course for adding all the components you need to register all the scripts, now lets have a look at a demo illustrating how to use these scripts into your web application.

For this demo we will we working on intro to Kendo UI website, firstly I have added the Kendo UI styles to my content directory and Kendo UI JavaScript files to my scripts directory, I will use the basic HTML5 page as my base page to use the web widgets, as we are using the web components we need to reference the relevant script and style files to my HTML page :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <TITLE>My First Kendo UI Page</TITLE>

        <!-- StyleSheets -->
        <link href="content/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="content/kendo.default.min.css" rel="stylesheet" type="text/css" />

        <!-- Scripts -->
        <script type="text/javascript" src="scripts/jquery.min.js"></script>
        <script type="text/javascript" src="scripts/kendo.web.min.js"></script>

   </head>
   <body>
        <span>Pick a Date:
           <input id="pickDate" type="text" />
        </span>
   </body>
</html>

The above code shows the simple HTML page with the references to Kendo UI web scripts and stylesheets, now we need to verify that the scripts and stylesheets are the one we need to register, we can do this by implementing one of the Kendo UI web widgets and here for example we will use the date picker.

<script type="text/javascript">
   $(document).ready(function () {
      $("#pickDate").kendoDatePicker();
   });
</script>

Here you can see we have used the kendoDatePicker function, we will be going into much detail in the posts later about their implementation process, but at this point we assume we indeed have everything in place you implement the Kendo UI, so now its all done and lets see what Kendo UI Date Picker has done for us.

Kendo UI Date Picker

So this was simple, we will go in deep details with Kendo UI, stay tuned.

Download the source code >> IntroToKendoUI.

One thought on “Adding Kendo UI to a webpage : Kendo UI Date Picker Function

Leave a Reply

Your email address will not be published. Required fields are marked *