JSFiddle - React, Tailwind, and code Playground
by Osama Qassar
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.2.0/ng-tags-input.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.2.0/ng-tags-input.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.2.0/ng-tags-input.bootstrap.min.css">
<body>
<div ng-app="app" ng-controller="ctrl">
<tags-input class="wb-ele-dashboard"
on-tag-added="doSearch()"
on-tag-removed="doSearch()"
tag-class="{even: $index % 2 == 0, odd: $index % 2 != 0}"
ng-model="rec.search.client_tags"
add-from-autocomplete-only="false"
placeholder="<?= __('client_tags') ?>" >
<auto-complete
highlightMatchedText="true"
load-on-empty="true"
load-on-focus="true"
source="loadTags($query, 'pmscategories', 8)">
</auto-complete>
</tags-input>{{rec.search.client_tags}}
<br>
<tags-input class="wb-ele-dashboard"
on-tag-added="doSearch()"
on-tag-removed="doSearch()"
tag-class="{even: $index % 2 == 0, odd: $index % 2 != 0}"
ng-model="rec.search.adrs_country"
add-from-autocomplete-only="false"
placeholder="<?= __('adrs_country') ?>" >
<auto-complete
highlightMatchedText="true"
load-on-empty="true"
load-on-focus="true"
source="loadTags($query, 'configs/getcountries')">
</auto-complete>
</tags-input>{{rec.search.adrs_country}}
</div>
<div>
<center><input type="datetime-local" name="start date"
ng-model="endDate" id="from_date"></center>
</div>
</body>
JavaScript
(function () {
var app = angular.module('app', ['ngTagsInput'] );
app.controller('ctrl', function ($scope, $http ) {
$scope.endDateTime=new Date();
var h = $scope.endDateTime.getHours();
var m = $scope.endDateTime.getMinutes();
$scope.endDateTime.setHours(h,m,0,0);
$scope.endtDate=new Date(new Date().getTime()).toLocaleString();
});
})()