JSFiddle - React, Tailwind, and code Playground

by andreev_artem

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<div ng-app="ExperimentsModule" ng-controller="TestController">
    <ui-datetime ng-model="datetime1"></ui-datetime>
    {{datetime1}}
</div>

CSS

/*!  * jQuery UI CSS Framework 1.8.22  *  * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)  * Dual licensed under the MIT or GPL Version 2 licenses.  * http://jquery.org/license  *  * http://docs.jquery.com/UI/Theming/API  */  /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; } .ui-helper-clearfix:after { clear: both; } .ui-helper-clearfix { zoom: 1; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }   /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; }   /* Icons ----------------------------------*/  /* states and images */ .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }   /* Misc visuals ----------------------------------*/  /* Overlays */ .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }   /*!  * jQuery UI CSS Framework 1.8.22  *  * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)  * Dual licensed under the MIT or GPL Version 2 licenses.  * http://jquery.org/license  *  * http://docs.jquery.com/UI/Theming/API  *  * To view and modify this theme, visit...

JavaScript

angular.module("ExperimentsModule", [])
    .directive("uiDatetime", function(){
        return {
            restrict: 'EA',
            replace: true,
            template: '<div class="ui-datetime">' +
                        '<input type="text" ng-model="_date" class="date">' +
                        '<input type="number" ng-model="_hours" min="0" max="23" class="hours">' +
                        '<input type="number" ng-model="_minutes" min="0" max="59" class="minutes">' +
                        '<br />Child datetime1: {{datetime1}}' +
                      '</div>',
            require: 'ngModel',
            scope: true,
            link: function(scope, element, attrs, ngModelCtrl) {
                var elDate = element.find('input.date');

                ngModelCtrl.$render = function () {
                    var date = new Date(ngModelCtrl.$viewValue);
                    var fillNull = function(num) {
                        if (num < 10) return '0' + num;
                        return num;
                    };
                    scope._date = fillNull(date.getDate()) + '.' + fillNull(date.getMonth() + 1) + '.' + date.getFullYear();
                    scope._hours = date.getHours();
                    scope._minutes = date.getMinutes();
                };

                elDate.datepicker({
                    dateFormat: 'dd.mm.yy',
                    onSelect: function(value, picker) {
                        scope._date = value;
                        scope.$apply();
                    }
                });

                var watchExpr = function() {
                    var res = scope.$eval('_date').split('.');
                    if (res.length == 3) return new Date(res[2], res[1] - 1, res[0], scope.$eval('_hours'), scope.$eval('_minutes'));
                    return 0;
                };
                scope.$watch(watchExpr, function (newValue) {
                    ngModelCtrl.$setViewValue(newValue);
                },...