JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="demoApp" ng-controller="MainController as mainCtrl" class="container-fluid">
    <form class="form-inline">
        <div ng-repeat="(key, array) in mainCtrl.dateSelect" class="form-group">
            <label>{{key}}</label><select class="form-control" ng-change="mainCtrl.checkHour(key, array[mainCtrl.selected[key]])" ng-model="mainCtrl.selected[key]" ng-options="value as mainCtrl.displayLabel(key, value) for value in mainCtrl.dateSelect[key]" ng-disabled="key === 'meridiem'">
            </select>
        </div>
    </form>
    selected: <pre>{{mainCtrl.selected|json}}</pre>
    raw date (unformatted, UTC): {{mainCtrl.selected | momentUTC}}<br/>
    date formatted (meridiem locale): {{mainCtrl.selected | momentUTC : 'LLLL' }}<br/> 
    
    
    now (momentjs) {{mainCtrl.now}}
</div>

JavaScript

// for this SO 
// http://stackoverflow.com/questions/32802780/how-to-get-the-meridian-am-pm-with-momentsjs-and-angularjs
angular.module('demoApp', [])
	.filter('momentDate', MomentDateFilter)
	.filter('momentUTC', MomentUTCFilter)
	.controller('MainController', MainController);

function MomentDateFilter() {
	return function(input, format) {
        return moment(input).format(format);
    };
}

function MomentUTCFilter() {
	return function(input, format) {
        return moment.utc(input).format(format);
    };
}

function MainController($scope, $log) {
    var vm = this,
        now = moment();
    
    vm.checkHour = checkHour;
    vm.dateSelect = dateSelection();
    vm.displayLabel = displayLabel;
    vm.now = now;
    vm.selected = {
        "day": 27,
        "month": 8,
        "year": 2015,
        "hour": 18,
        "meridiem": "PM",
        "minutes": 6,
        "seconds": 20
    };
    
    function dateSelection() {
        return { // generated on every page load for demo
           	// better store the generate object as json and load it
            day: createRange(1,31),
            month: createRange(0,11),
            year: createRange(1900, 2100),
            hour: createRange(0,24),
            minutes: createRange(0,59),
            seconds: createRange(0,59),
            meridiem: 'AM_PM'.split('_')
        };
	}
    
    function displayLabel(key, value) {
    	if (key === 'month') {
        	value++; // increment month for correct month value 1 to 12
        }
        return value;
    }
    
    function checkHour(key, hour) { // updates meridiem (AM/PM)
        if (key === 'hour') {
            var curDate = moment().hour(hour);
            //console.log('check hour', hour, curDate.hour(), curDate.localeData());
            vm.selected.meridiem = curDate
                .localeData().meridiem(hour);
            //console.log(curDate
            //    .localeData().isPM(vm.selected.meridiem));
        }
        //console.log('changed',...