JSFiddle - React, Tailwind, and code Playground

by Arthur Wang

HTML

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        Author:{{author}} <br>
        Year:{{year}}<br>
        Month:{{month}}<br>
        Day:{{day}}<br>
    </div>
    <div qb-date year-model="year" month-model="month" day-model="day"><div>
   
</div>

JavaScript

angular.module('myApp', [])
    .directive('myDirective', function() {
      return {
        restrict: 'A',
        template: 'Inside myDirective, isolate scope: {{ myProperty }}',
        scope: {}
      };
    })
.directive('qbDate', function(){
    return{
        restrict: 'A',
        replace: true,
        scope: {
            year: '=yearModel',
            month: '=monthModel',
            day: '=dayModel'
        },
        controller: function($scope,$element){
            console.log($scope.year,$scope.month,$scope.day);
            $scope.yearList = [];
            for(var i = 1900;i<=2030;i++){
                $scope.yearList.push(i);
            }
            $scope.monthList = [];
            $scope.dayList = [];
            for(var i = 1;i<=12;i++){
                $scope.monthList.push(i);
            }
            $scope.$watch('year',function(newValue,oldValue){
                if(newValue){
                    if(newValue.length > 4){
                        $scope.year = oldValue;
                    }
                    $scope.dayList = [];
                    $scope.month = '';
                    $scope.day = '';
                    
                }
                
            });
            $scope.$watch('month',function(newValue,oldValue){
                var months31 = [1,3,5,7,8,10,12];
                var months30 = [4,6,9,11];
                var month = parseInt(newValue);
                var maxDay = 31;
                if(months31.indexOf(month) > 0){
                    maxDay = 31;
                } else if (months30.indexOf(month) > 0){
                    maxDay = 30;    
                } else{
                    var year = parseInt($scope.year);
                    if((year%4==0 && year%100!=0)||(year%100==0 && year%400==0)){
                        maxDay=29;
                    }else{
                        maxDay=28;
                    }
                }
                for(var i = 1;i<=maxDay;i++){
            ...