adriatic/app.html

## app.html
<template>
  <require from="./custom-validation.css"></require>

  <div id="example">
    <div class="demo-section k-content">
      <form id="employeeForm"
            ak-validator="k-widget.bind: validator; k-rules.bind: rules"
            data-role="validator"
            novalidate="novalidate">
        <ul id="fieldlist">
          <li>
            <label for="FirstName">First Name:</label>
            <input type="text" class="k-textbox" name="FirstName" id="FirstName" required="required" />
          </li>
          <li>
            <label for="LastName">Last Name:</label>
            <input type="text" class="k-textbox" name="LastName" id="LastName" required="required" />
          </li>
          <li>
            <label for="HireDate">Hire Date:</label>
            <input type="text" k-datepicker id="HireDate" name="HireDate" data-type="date" required="required"  />
            <span data-for='HireDate' class='k-invalid-msg'></span>
          </li>
          <li>
            <label for="RetireDate">Retire Date:</label>
            <input type="text" k-datepicker name="RetireDate" data-greaterdate-field="HireDate" data-greaterdate-msg='Retire date should be after Hire date' />
            <span data-for='RetireDate' class='k-invalid-msg'></span>
          </li>
          <li>
            <button type="button" ak-button class="k-primary" click.delegate="save()">Save</button>
          </li>
        </ul>
      </form>
    </div>
  </div>
</template>

## app.js
export class CustomValidation {
  rules = {
    greaterdate: (input) => {
      if (input.is('[data-greaterdate-msg]') && input.val() !== '') {
        let date = kendo.parseDate(input.val());
        let otherDate = kendo.parseDate($('[name="' + input.data('greaterdateField') + '"]').val());

        return otherDate === null || otherDate.getTime() < date.getTime();
      }

      return true;
    }
  };

  save() {
    if (this.validator.validate()) {
      alert('Employee saved!');
    }
  }
}

## custom-validation.css
#fieldlist {
  margin: 0;
  padding: 0;
}

#fieldlist li {
  list-style: none;
  padding-bottom: .7em;
  text-align: left;
}

#fieldlist label {
  display: block;
  padding-bottom: .3em;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  color: #444;
}

#fieldlist li .k-widget:not(.k-tooltip),
#fieldlist li .k-textbox {
  margin: 0 5px 5px 0;
}

span.k-widget.k-tooltip-validation {
  display; inline-block;
  width: 160px;
  text-align: left;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  box-shadow: none;
  color: red;
}

.k-tooltip-validation .k-warning {
  display: none;
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}
	<template>
	<require from="./custom-validation.css"></require>

	<div id="example">
	<div class="demo-section k-content">
	<form id="employeeForm"
	ak-validator="k-widget.bind: validator; k-rules.bind: rules"
	data-role="validator"
	novalidate="novalidate">
	<ul id="fieldlist">
	<li>
	<label for="FirstName">First Name:</label>
	<input type="text" class="k-textbox" name="FirstName" id="FirstName" required="required" />
	</li>
	<li>
	<label for="LastName">Last Name:</label>
	<input type="text" class="k-textbox" name="LastName" id="LastName" required="required" />
	</li>
	<li>
	<label for="HireDate">Hire Date:</label>
	<input type="text" k-datepicker id="HireDate" name="HireDate" data-type="date" required="required" />
	<span data-for='HireDate' class='k-invalid-msg'></span>
	</li>
	<li>
	<label for="RetireDate">Retire Date:</label>
	<input type="text" k-datepicker name="RetireDate" data-greaterdate-field="HireDate" data-greaterdate-msg='Retire date should be after Hire date' />
	<span data-for='RetireDate' class='k-invalid-msg'></span>
	</li>
	<li>
	<button type="button" ak-button class="k-primary" click.delegate="save()">Save</button>
	</li>
	</ul>
	</form>
	</div>
	</div>
	</template>
	export class CustomValidation {
	rules = {
	greaterdate: (input) => {
	if (input.is('[data-greaterdate-msg]') && input.val() !== '') {
	let date = kendo.parseDate(input.val());
	let otherDate = kendo.parseDate($('[name="' + input.data('greaterdateField') + '"]').val());

	return otherDate === null \|\| otherDate.getTime() < date.getTime();
	}

	return true;
	}
	};

	save() {
	if (this.validator.validate()) {
	alert('Employee saved!');
	}
	}
	}
	#fieldlist {
	margin: 0;
	padding: 0;
	}

	#fieldlist li {
	list-style: none;
	padding-bottom: .7em;
	text-align: left;
	}

	#fieldlist label {
	display: block;
	padding-bottom: .3em;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 12px;
	color: #444;
	}

	#fieldlist li .k-widget:not(.k-tooltip),
	#fieldlist li .k-textbox {
	margin: 0 5px 5px 0;
	}

	span.k-widget.k-tooltip-validation {
	display; inline-block;
	width: 160px;
	text-align: left;
	border: 0;
	padding: 0;
	margin: 0;
	background: none;
	box-shadow: none;
	color: red;
	}

	.k-tooltip-validation .k-warning {
	display: none;
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia KendoUI bridge</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
	<script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

	aurelia.start().then(a => a.setRoot());
	}