JSFiddle - React, Tailwind, and code Playground

by stiucsib86

HTML

<!-- AngularJS jQuery Timepicker Demo -->

JavaScript

angular.module('tackthis.directives')
	.directive('uiDatetime', ['ui.config', function (uiConfig) {
		'use strict';
		var options;
		options = {};
		if (angular.isObject(uiConfig.date)) {
			angular.extend(options, uiConfig.date);
		}
		return {
			require:'?ngModel',
			link:function (scope, element, attrs, controller) {
				var getOptions = function () {
					return angular.extend({}, uiConfig.date, scope.$eval(attrs.uiDatetime));
				};

				var initDateWidget = function () {
					var opts = getOptions();
					opts = angular.extend(opts, {
						dateFormat: "yy-mm-dd",
						timeFormat: "HH:mm"
					})

					// If we have a controller (i.e. ngModelController) then wire it up
					if (controller) {
						var updateModel = function () {
							if(!scope.$$phase) {
								scope.$apply(function () {
									var date = jQuery(element).val();
									if (date) {
										controller.$setViewValue(date);
									}
								});
							}
						};
						if (opts.onSelect) {
							// Caller has specified onSelect, so call this as well as updating the model
							var userHandler = opts.onSelect;
							opts.onSelect = function (value, picker) {
								updateModel();
								return userHandler(value, picker);
							};
						} else {
							// No onSelect already specified so just update the model
							opts.onSelect = updateModel;
						}
						// In case the user changes the text directly in the input box
						element.bind('change', updateModel);

						// Update the date picker when the model changes
						controller.$render = function () {
							var date = controller.$viewValue;
							if ( angular.isDefined(date) && date !== null && !angular.isDate(date) ) {
								throw new Error('ng-Model value must be a Date object - currently it is a ' + typeof date + ' - use ui-date-format to convert it from a string');
							}
							element.datetimepicker("setDate", date);
						};
					}
					// If we don't destroy the old one it doesn't update properly when the...