JSFiddle - React, Tailwind, and code Playground

by krustev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<body>
    
        <div id="example" class="k-content">
            <div id="to-do">
                    <input id="datetimepicker" style="width:200px;" />
            </div>
        <script>
            $(document).ready(function () {
                var start = new Date(2014, 5, 6, 8, 15);
                var end = new Date(2014, 5, 16, 8, 15);
            
                // create DateTimePicker from input HTML element
                $("#datetimepicker").kendoDateTimePicker({
                    open: function(e) {
                        if (e.view === "time") {
                            var value = kendo.parseDate(this.element.val(), this.options.format);
            
                            if (value) {
                                value.setHours(0, 0, 0, 0);
                                this.value(value);
                            }
                        }
                    },
                    value:new Date(2014, 5, 6, 8, 15),
                    min: start,
                    max: end
                });
            });
        </script>
   
        </div>
    

</body>

CSS

#to-do {
    height: 52px;
    width: 221px;
    margin: 30px auto;
    padding: 91px 0 0 188px;               
}