JSFiddle - React, Tailwind, and code Playground

by techgeeek

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular-route.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/datetimepicker/latest/DateTimePicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/datetimepicker/latest/DateTimePicker.min.css" />

<body ng-app="AppDTP" ng-controller="CtrlDTP">
    
    <input type="text" data-field="date" id="ipDate1" ng-model="datestring1" ng-change="setValue()" readonly />
       
    <div class="DateSet">Date 1 : {{ datestring1 }}</div>
        
    <div class="dtBox"></div>
        
</body>

JavaScript

var oInput, oDTP;

$(document).ready(function()
{
    $(".dtBox").DateTimePicker(
    {
        init: function()
        {
            oDTP = this;
        },
        
    	buttonClicked: function(sButtonType, oInputElement)
        {
        	if(sButtonType === "SET")
        	{
        		oInput = document.getElementById('ipDate1');
    			angular.element(oInput).triggerHandler('change');
    		}
    	}
    });
});


function setValue()
{
    $scope.date1 = oDTP.parseDateTimeString($scope.datestring1, "date", $("#ipDate1"));
	console.log("Date is : " + $scope.date1);
}
/*

<body ng-app="AppDTP" ng-controller="CtrlDTP">

 <input type="date" id="Date1" ng-model="date1" ng-change="setValue()" readonly />
 
 <div class="DateSet">Date 1 : {{ date1 }}</div>
 */
 
angular.module("AppDTP", []).controller('CtrlDTP', function($scope) 
{
    $scope.date1 = new Date();
    $scope.datestring1 = oDTP.formatDateTimeString(new Date(), "date", document.getElementById('ipDate1'));
});