JSFiddle - React, Tailwind, and code Playground

by Osama Qassar

HTML

<body ng-app="MyApp">    
    <div ng-controller="MainCtrl">
        <input date-input ng-model="date" type="datetime-local" />
        <br/>{{ date }}
        <br/>{{ date | date: 'yyyy-MM-dd hh:mm a'  }}
    </div>
</body>

CSS

input[type=datetime-local]{
  width: 20px;
}

JavaScript

angular
    .module('MyApp', [])
    .controller('MainCtrl', function ($scope, dateFilter) {
        $scope.date = '2024-11-26 10:10:10';
    })
    .directive( 'dateInput', function(dateFilter) {
      return {
        require: 'ngModel',
        replace: true,
        link: function(scope, elm, attrs, ngModelCtrl) {
          ngModelCtrl.$formatters.unshift(function (modelValue) {
            return dateFilter(modelValue, 'yyyy-MM-dd hh:mm');
          });
          ngModelCtrl.$parsers.unshift(function(viewValue) {
            return new Date(viewValue);
          });
        },
      };
    });