JSFiddle - React, Tailwind, and code Playground

by ranjith08feb

HTML

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/datetimepicker/angular">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
    

</head>
<body>
<div id="example" ng-app="KendoDemos">
    <div class="demo-section k-content" ng-controller="MyCtrl">
        <h4>Select date and time:</h4>
        <input kendo-date-time-picker
               k-ng-model="MyCtrl.startDate"
               style="width: 100%;" />
        
        <input kendo-date-time-picker
               k-ng-model="MyCtrl.endDate"
               k-options="MyCtrl.options"
               style="width: 100%;" />
<pre>
  str: {{ str }}
  startDate: {{ MyCtrl.startDate }}
  typeof obj: {{ getType(MyCtrl.startDate) }}
  startDate instanceof Date: {{ isDate(MyCtrl.startDate) }}
</pre>
</div>
</div>

<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
      $scope.startDate="";
      $scope.endDate="";
      $scope.options={
      	min: $scope.startDate
      }
          $scope.getType = function(x) {
              return typeof x;
          };
          $scope.isDate = function(x) {
              return x instanceof Date;
          };
      })
</script>


</body>
</html>