JSFiddle - React, Tailwind, and code Playground

by Mirosław Ciastek

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
<div>
    <form name="simpleForm" action="/" ng-submit="(submitted=true) && simpleForm.$invalid && $event.preventDefault()" novalidate>
        <div>
            <button type="submit">Submit</button>
        </div>
        <p>
            Type into textarea "date" (without quotes of course) to append datepicker field to preview
        </p>
        <textarea class="text" ng-model="simpleForm.text" marker-preview></textarea>
        <p>Preview:</p>
        <div class="preview" ng-form="subForm"></div>
        <p class="validation-status">
            <span ng-class="{ 'is-valid': simpleForm.subForm.$valid }">valid: {{simpleForm.subForm.$valid}}</span><br/>
            <span ng-class="{ 'is-invalid': simpleForm.subForm.$invalid }">invalid: {{simpleForm.subForm.$invalid}}</span>
        </p>
    </form>
</div>

CSS

.text {
    width: 500px;
    height: 200px;
}
.preview {
    padding: 15px;
    border: 1px solid #eee;
}
input.ng-invalid {
    border: 1px solid red;
}

.validation-status span {
    display: inline-block;
    padding: 5px;
}

.validation-status span.is-valid {
    color: green;
}

.validation-status span.is-invalid {
    color: red;
}

JavaScript

(function (window, $, angular) {

    var DatepickerController = function ($rootScope, $scope, $filter) {
        // init values
        $scope.isOpened = false;
        $scope.date = new Date();

        // datepicker options
        $scope.datepickerSettings = {
            startingDay: 1,
            showWeeks: false,
            formatDay: 'd',
            formatDayTitle: 'MMMM'
        };

        // set date format
        $scope.format = 'dd.MM.yyyy';

        // open datepicker popup
        $scope.open = function ($event) {
            $event.preventDefault();
            $event.stopPropagation();
            $scope.isOpened = !$scope.isOpened;
        }
    };

    var previewDirective = function ($compile) {

        var link = function ($scope, $el, $attrs) {
            var previewField = $('.preview');

            var fields = {
                date: '<div class="datepicker-wrap" ng-controller="DatepickerCtrl"><button type="button" class="svg--center svg__calendar-gray ngapp-svg" ng-click="open($event)" ng-class="{true: \'is-active\'}[isOpened]"></button><input type="text" class="ngapp-datepicker" ng-model="date" is-open="isOpened" datepicker-options="datepickerSettings" datepicker-popup="{{format}}" ng-focus="open($event)" ng-class="{true: \'is-active\'}[isOpened]" required></div>'
            };

            var timer = null;

            function appendInputs() {
                var $this = $(this);
                var value = this.value;

                var replaced = function () {
                    var output;
                    for (var prop in fields) {
                        output = value.replace(prop, fields[prop]);
                    }
                    return output;
                };

                clearTimeout(timer);

                timer = setTimeout(function () {
                    previewField.html(replaced());
                    $compile(previewField.contents())($scope);
                }, 300);
            };

    ...