JSFiddle - React, Tailwind, and code Playground

by EMIR MARQUES

HTML

<div class="container col-md-3" ng-app="datepickerDemo" ng-controller="dateTimePicker" ng-init="changeMonth(0);">
    <div class="col-md-12">
        <input type="image" src="http://s15.postimg.org/utzsj55ev/icon_ios7_arrow_right_128.png" style="float:right;" ng-click="changeMonth(1);" />
        <input type="image" src="http://s7.postimg.org/mwp7xtpg7/icon_ios7_arrow_left_128.png" ng-click="changeMonth(-1);" />
        <h3 class="text-center" ng-click="changeShowType(1)"> {{monthName}} {{year}}</h3>
    </div>
    <div class="frame col-md-12">
        <ul class="datepicker text-center" ng-if="showType === 1">
            <li ng-click="selectDate(date)" ng-repeat="date in dateValues">{{date | date:'EEE dd'}}</li>
        </ul>
        <ul class="datepicker text-center" ng-if="showType === 2">
            <li ng-click="selectTime(time)" ng-repeat="time in timeValues">{{time}}</li>
        </ul>
    </div>
</div>

CSS

/* Styles go here */

.frame {
    width: 100%;
    height: 400px;
    /* adjust this according to the main questions box height */
    margin-left: 0%;
    border: 1px solid #777777;
    overflow: auto;
}

.datepicker {
    width: 100%;
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.datepicker li {
    cursor: pointer;
    border-bottom: 1px solid #ededed;
    padding: 10px;
}
.datepicker li:hover {
    background: #EEE;
}
.text-center {
    text-align: center;
}

.border {
    border: 1px solid red;
}

JavaScript

datepicker = angular.module('datepickerDemo', []);

datepicker.controller('dateTimePicker', function($scope, $http, formatDateTime, $filter) {
    $scope.dateValues = [];
    $scope.showType = 1;
    $scope.selected = {};
    $scope.currentDateCalendar = new Date(new Date().getFullYear(), new Date().getMonth(), 0);
    
    $scope.changeShowType = function (type) {
        $scope.showType = type;
        $scope.monthName = $filter('date')($scope.selected.date, 'MMM yyyy');
        $scope.monthIndex = $scope.selected.date.getMonth();
        $scope.changeMonth(0);
    };

    $scope.selectDate = function(date) {
        $scope.showType = 2;
        $scope.selected.date = date;
        $scope.currentDateCalendar.setDate(date.getDate());
        $scope.monthName = $filter('date')(date, 'dd MMM');
    };

    $scope.selectTime = function(time) {
        $scope.selected.time = time;
        $http.post('date/selected', $scope.selected);
    };

    var getTimeValues = function() {
        formatDateTime.getTimeValues();
    };
    getTimeValues();

    var bindScope = function() {
        $scope.timeValues = formatDateTime.timeValues;
    };

    bindScope();

    //Date Picker START

    var date = new Date();
    var months = [],
    monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    $scope.year = 2015;
    $scope.changeMonth = function(steps) {
        if($scope.showType == 2) {
            $scope.currentDateCalendar.setDate($scope.currentDateCalendar.getDate() + steps);
            $scope.selectDate(new Date($scope.selected.date.setDate($scope.selected.date.getDate() + steps)));
        } else {
            $scope.dateValues.splice(0, $scope.dateValues.length);
            $scope.currentDateCalendar.setMonth($scope.currentDateCalendar.getMonth() + steps);
            $scope.nDays = new Date($scope.currentDateCalendar.getFullYear(), $scope.currentDateCalendar.getMonth(), 0).getDate();
            
            for...