JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-fiori.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.fiori.min.css">
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content"ng-controller="MyCtrl">
<div>
<h4>Select date:</h4>
<input kendo-date-picker
ng-model="dateString"
ng-change="onChange()"
k-ng-model="dateObject"
style="width: 100%;" />
<pre>
dateString: {{ dateString }}
dateObject: {{ dateObject | date:"EEEE, MMMM d, yyyy" }}
typeof dateObject: {{ getType(dateObject) }}
dateObject instanceof Date: {{ isDate(dateObject) }}
</pre>
</div>
<button class="k-button" ng-click="sendTestCall()">Click me!</button>
</div>
</div>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/restangular/1.5.2/restangular.min.js"></script>
<script>
angular.module("KendoDemos", [ "kendo.directives", "restangular" ])
.config(function(RestangularProvider) {
//RestangularProvider.setBaseUrl("http://dojo.telerik.com");
})
.controller("MyCtrl", function($scope, Restangular){
//$scope.dateString = "2015-05-13T00:00:00+00:00";
$scope.datePickerOptions = {
parseFormats: ["yyyy-MM-ddTHH:mm:ss.fffZ"]
};
$scope.monthSelectorOptions = {
start: "year",
depth: "year"
};
$scope.getType = function(x) {
return typeof x;
};
$scope.isDate = function(x) {
return x instanceof Date;
};
...
CSS
html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }