I hope you've been following along with my series on how to use Kendo UI components, because a fantastic opportunity has just arisen for us to build an important new web app.
The intergalactic space council recently made wormholes available for space travel.
In response to this news, an entire industry was spawned. Many new airlines and hotels were created to provide trips to the outer edges of the universe. Seeking to capitalize on this opportunity, the team at Progress wants to build a travel site so anyone can search for and book trips online. Your mission, if you choose to accept it, is to create a booking form for guests to search for hotels in outer space. The form will need to provide a way for users to search for destinations, enter their check in and check out dates, select the number of guests, and provide a way to submit the form.
Searching Destinations
For the search feature, we need a text field for users to enter input. We also want to provide suggestions for them when they begin typing. We will use the AutoComplete component for this feature. We could have also used the DropDownList. Since right now we only have a few destinations to choose from, we could display all of the options to the user. But in the future we know we will be adding many more hotels and space shuttle carriers from hundreds of galaxies. Therefore, an AutoComplete is our best option because we expect our users to have some idea of what to enter but we can still force them to select an option from our predefined list.
This is the boilerplate code with the search bar implemented:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Intergalactic</title>
<link rel="stylesheet"href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css">
<link rel="stylesheet"href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap-v4.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<scriptsrc="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<style>
body {font-family: helvetica;}
form {display: inline-block; background-color: #ffc107; color: #000; width: 400px;}
h2 {text-transform: uppercase; font-weight:400;}
label {margin-bottom: 8px;}
.k-autocomplete, .k-datepicker {width: 100%;}
.text-center { text-align: center;}
</style>
</head>
<body>
<div class="text-center">
<form class="k-form">
<h2>The Intergalactic</h2>
<div class="k-form-field">
<label>Destination</label>
<input id="location">
</div>
</form>
</div>
<script>
$(document).ready(function(){
$('#location').kendoAutoComplete({
placeholder: 'Enter a galaxy, space station, or coordinates',
dataTextField: 'name',
dataSource: [
{id: 0, name: 'Omicron Persei 8'},
{id: 1, name: 'Niblonia'},
{id: 2, name: 'Namek'},
{id: 3, name: 'Planet Vegeta'}
],
template: '<span class="k-icon k-i-marker-pin"></span>#: name #',
});
});
</script>
</body>
</html>
Choosing Dates
Next, users will need to select their check in and check out dates. We don't want the user to type in the date because we don't trust they will enter it correctly. We could set the format for the input. But our form will be used by people from all over planet Earth. Different cultures will have different expectations for formatting dates and we don't want to force anyone to know one standard. Therefore, we will be using a DatePicker component. The DatePicker gives us a calendar that users can click on to select the date. This is the markup that will be added to the end of the form:
<div class="k-form-field">
<label>Check in</label>
<input id="checkin">
</div>
<div class="k-form-field">
<label>Check out</label>
<input id="checkout">
</div> The check in DatePicker needs to to be initialized with today’s date. The user also cannot select any date in the past so we will set the minimum date for the check in to today’s date as well. This is the code to initialize our check in date picker:
$('#checkin').kendoDatePicker({
value: new Date(),
min: new Date()
});
var checkin = $('#checkin').data('kendoDatePicker');The default value for the check out will be one day after check in because a user has to book at least a one night stay. And the minimum date for check out is one day after check in. To calculate the check out date, we will use a helper function that returns the value of the check in date picker plus one day. Now we have this code related to the check out date picker:
$('#checkout').kendoDatePicker({
value: getCheckout(),
min: getCheckout()
});
var checkout = $('#checkout').data('kendoDatePicker');
function getCheckout() {
var today = Date.parse(checkin.value());
return new Date(today + 86400000);
}
There is one more problem we need to consider. If the user changes the check in date, the check out date does not automatically change. It would be possible to select a check in date that is after the check out date. We need to fix this so that that the minimum value of the check out date picker is at least one day more than the check in date picker. To implement this, we will add a change event handler to our check in date picker to set the value and min value of the check out date picker. This is the updated check in date picker:
$('#checkin').kendoDatePicker({
value: new Date(),
min: new Date(),
change: function() {
var checkinTime = Date.parse(checkin.value());
var checkoutTime = Date.parse(checkout.value());
if (checkinTime > checkoutTime) {
var newCheckoutTime = new Date(checkinTime + 86400000);
checkout.value(newCheckoutTime);
checkout.min(newCheckoutTime);
}
}
}); Selecting Number of Guests
To select the number of guests we will use the DropDownList component. Users will only be able to choose a number from one to five. This is just enough options that we can put them in a drop down. A ComboBox is not necessary because we don’t want the user to enter values other than the ones we’ve defined. For that same reason, a NumericTextBox also doesn’t fit our needs. Other ways we can use a drop down list is to let users select the number of rooms or nights they will be staying. This is the markup for the guest selection drop down list:
<div class="k-form-field">
<label>Guests</label>
<select id="guests"></select>
</div>
We will keep this component simple and only customize the look of the selected item. This requires us to set the valueTemplate parameter of the component. We could also customize the template for each item in the dropdown and a header and footer template. This is the initialization code for our drop down list:
$('#guests').kendoDropDownList({
dataSource: [1,2,3,4],
valueTemplate: 'Adults - #: data #'
});
Putting it All Together
Finally, we will need a button to submit our form data.
<div class="k-form-field">
<button id="btn-submit" class="k-primary">Reach for the stars</button>
</div>
$('#btn-submit').kendoButton({
click: function(e) {
e.preventDefault();
}
}); This is the final project:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Intergalactic</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap-v4.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<style>
body {font-family: helvetica;}
form {display: inline-block; background-color: #ffc107; color: #000; width: 400px;}
h2 {text-transform: uppercase; font-weight:400;}
label {margin-bottom: 8px;}
.k-autocomplete, .k-datepicker {width: 100%;}
.text-center { text-align: center;}
</style>
</head>
<body>
<div class="text-center">
<form class="k-form">
<h2>The Intergalactic</h2>
<div class="k-form-field">
<label>Destination</label>
<input id="location">
</div>
<div class="k-form-field">
<label>Check in</label>
<input id="checkin">
</div>
<div class="k-form-field">
<label>Check out</label>
<input id="checkout">
</div>
<div class="k-form-field">
<label>Guests</label>
<select id="guests"></select>
</div>
<div class="k-form-field">
<button id="btn-submit" class="k-primary">Reach for the stars</button>
</div>
</form>
</div>
<script>
$(document).ready(function(){
$('#btn-submit').kendoButton({
click: function(e) {
e.preventDefault();
}
});
$('#guests').kendoDropDownList({
dataSource: [1,2,3,4],
valueTemplate: 'Adults - #: data #'
});
$('#location').kendoAutoComplete({
placeholder: 'Enter a galaxy, space station, or coordinates',
dataTextField: 'name',
dataSource: [
{id: 0, name: 'Omicron Persei 8'},
{id: 1, name: 'Niblonia'},
{id: 2, name: 'Namek'},
{id: 3, name: 'Planet Vegeta'}
],
template: '<span class="k-icon k-i-marker-pin"></span>#: name #',
});
$('#checkin').kendoDatePicker({
value: new Date(),
min: new Date(),
change: function() {
var checkinTime = Date.parse(checkin.value());
var checkoutTime = Date.parse(checkout.value());
if (checkinTime > checkoutTime) {
var newCheckoutTime = new Date(checkinTime + 86400000);
checkout.value(newCheckoutTime);
checkout.min(newCheckoutTime);
}
}
});
var checkin = $('#checkin').data('kendoDatePicker');
$('#checkout').kendoDatePicker({
value: getCheckout(),
min: getCheckout()
});
var checkout = $('#checkout').data('kendoDatePicker');
function getCheckout() {
var today = Date.parse(checkin.value());
return new Date(today + 86400000);
}
});
</script>
</body>
</html>Summary
We used an AutoComplete to search for destinations, a DatePicker to choose the dates, a DropDownList to select the number of nights, and a Button component to submit our form. We are well on our way to publishing our intergalactic travel site.
Still, there is more we can do if we really want to impress the boss. We could display the number of nights selected on the form. We could even add a ComboBox for users to enter the number of nights and update the check out date based on the selected value. Not to mention, we need to do something with the form once the button is clicked. The button’s click handler should get the values of each field and send the data in a request. The next step would be to create a page displaying the results. But that task will be saved for another day.
Try it Out for Yourself
Want to start taking advantage of the Kendo UI components to build a booking form, or other feature for your web app? Check out the 70+ ready-made Kendo UI components, like Grid or Scheduler. You can begin a free trial of Kendo UI today and start developing your apps faster.
Angular, React, and Vue Versions
Looking for UI component to support specific frameworks? Check out Kendo UI for Angular, Kendo UI for React, or Kendo UI for Vue.