JSFiddle - React, Tailwind, and code Playground

by suraj mahajan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script>
<link rel="stylesheet" href="http://codeorigin.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css">
<input type="text" ng-model="date" jqdatepicker />
<br/>
{{ date }}

CSS

.ui-datepicker-calendar {
    display: none;
    }

JavaScript

var datePicker = angular.module('app', []);

datePicker.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: ' MM-yy',
                changeMonth:true,
                changeYear:true,
                showButtonPanel: true,
               onClose: function(date, inst) { 
           var month = new Array();
					month[0] = "January";
					month[1] = "February";
					month[2] = "March";
					month[3] = "April";
          month[4] = "May";
          month[5] = "June";
          month[6] = "July";
          month[7] = "August";
          month[8] = "September";
          month[9] = "October";
          month[10] = "November";
          month[11] = "December";
           var _abv=new Date(inst.selectedYear, inst.selectedMonth, 1);
          $(element).val(month[_abv.getMonth()] +'-'+ _abv.getFullYear()  );
           scope.date = month[_abv.getMonth()] +'-'+ _abv.getFullYear() ;
                    scope.$apply();
                }
            });
        }
    };
});