Kendo form demo

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="nl" ng-app="iats-booking"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="nl" ng-app="iats-booking"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="nl" ng-app="iats-booking"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="nl"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>dynamic booking form</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="//cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
        <link rel="stylesheet" href="//cdn.kendostatic.com/2012.2.710/styles/kendo.silver.min.css">
        <link rel="stylesheet" href="style.css">
        <style></style>
    </head>
    <body>
        <div id="iats-booking"></div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="//cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
        <script type="text/javascript" src="//cdn.kendostatic.com/2012.2.710/js/cultures/kendo.culture.nl.min.js"></script>
        <script type="text/javascript">kendo.culture("nl");</script>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

body, html {
  height : 100%;
  font-size: 11px;
  font-family:  'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
 }

/*
 * @author: DaRamirezSoto
 *
 * 1. Boilerplate console fix
 * 2. Eternal Template loader Kendoui
 * 3. Widgets Settings
 */

/*
 *  1. Boilerplate console fix
 */
if (!(window.console && console.log)) {
    (function() {
        var noop = function() {};
        var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'markTimeline', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];
        var length = methods.length;
        var console = window.console = {};
        while (length--) {
            console[methods[length]] = noop;
        }
    }());
}
// Place any jQuery/helper plugins in here.

/*
 * 2. Kendo Template loader
 *  @see https://gist.github.com/3087987
 */
var templateLoader = (function($,host){
    //Loads external templates from path and injects in to page DOM
    return{
        loadExtTemplate: function(path){
            var tmplLoader = $.get(path)
            .success(function(result){
                //Add templates to DOM
                $("body").append(result);
            })
            .error(function(result){
                alert("Error Loading Templates -- TODO: Better Error Handling");
            });

            tmplLoader.complete(function(){
                $(host).trigger("TEMPLATE_LOADED", [path]);
            });
        }
    };
})(jQuery, document);

/*
 * 3. Widget settings
 *
 */

templateLoader.loadExtTemplate("booking.tmpl.html");

var lookupOption = [
    { id: "Zipcode", name: "Postcode" },
    { id: "Address", name: "Adres" },
    { id: "Airport", name: "Vliegveld" }
];

var lookupAirport = [
    { id: "Airport1", name: "Vliegveld 1" },
    { id: "Airport2", name: "Vliegveld 2" },
    { id: "Airport3", name: "Vliegveld 3" },
    { id: "Airport4", name: "Vliegveld 4" },
    { id: "Airport5", name: "Vliegveld 5" },
    { id: "Airport6", name: "Vliegveld 6" }
];

var lookupCountry = [
    { id: "nl", name: "Nederland" },
    { id: "be", name: "België" },
    { id: "de", name: "Duitsland" }
];

var minBookingDateTime = new Date();
minBookingDateTime.setDate(minBookingDateTime.getDate() + 1);

$(document).bind("TEMPLATE_LOADED", function(e, path) {

    tmplBooking = kendo.template($("#booking-template").html(),{useWithBlock:false});

    $("#iats-booking").html(tmplBooking());

    $("#from-type").kendoDropDownList({
        dataTextField: "name",
        dataValueField: "id",
        dataSource: lookupOption
    });

    $("#from-airport").kendoDropDownList({
        dataTextField: "name",
        dataValueField: "id",
        dataSource: lookupAirport
    });

    $("#to-type").kendoDropDownList({
        dataTextField: "name",
        dataValueField: "id",
        dataSource: lookupOption
    });

    $("#to-airport").kendoDropDownList({
        dataTextField: "name",
        dataValueField: "id",
        dataSource: lookupAirport
    });

    $("#passengers").kendoNumericTextBox({
        format: "#",
        min: 1,
        max: 12,
        decimals: 0
    });

    $("#date").kendoDateTimePicker({
        timeFormat: "HH:mm",
        min: minBookingDateTime,
        value: minBookingDateTime,
        interval: 15
    });

});

<script type="text/x-kendo-template" id="booking-template">
    <form class="k-content">
        <fieldset class="k-widget k-header">
            <legend>Van :</legend>
            <select id="from-type"></select>
            <input type="hidden" id="from-country" value="nl">
            <span class="k-textbox k-space-right">
                <input class="k-textbox" type="text" id="from-_zipcode" placeholder="postcode" >
                <a href="\#" class="k-icon k-i-search">&nbsp;</a>
            </span>
            <span>
                <input class="k-textbox" type="text" id="from-city" placeholder="stad" >
                <input class="k-textbox" type="text" id="from-street" placeholder="straat" >
                <input class="k-textbox" type="text" id="from-streetnr" placeholder="nummer" >
            </span>
            <span>
                <select id="from-airport"></select>
            </span>
        </fieldset>
        <fieldset class="k-widget k-header">
            <legend>Naar :</legend>
            <select id="to-type"></select>
            <input type="hidden" id="to-country" value="nl">
            <span class="k-textbox k-space-right">
                <input class="k-textbox" type="text" id="to-zipcode" placeholder="postcode" >
                <a href="\#" class="k-icon k-i-search">&nbsp;</a>
            </span>
            <span>
                <input class="k-textbox" type="text" id="to-city" placeholder="stad" >
                <input class="k-textbox" type="text" id="to-street" placeholder="straat" >
                <input class="k-textbox" type="text" id="to-streetnr" placeholder="nummer" >
            </span>
            <span>
                <select id="to-airport"></select>
            </span>
        </fieldset>
        <fieldset class="k-widget k-header">
            <legend>Boeking :</legend>
            <label for="passengers" >Datum</label> : <input type="text" id="date">
            <label for="passengers" >Passagiers</label> : <input type="text" value="1" id="passengers">
        </fieldset>
    </form>
</script>