<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Basic HTTP Authentication Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container well" ng-controller="MainController as app">
<lc-date-picker
max="app.maxYear"
min="app.minYear"
selected="app.user"
class="lc-date-picker"
placeholders="app.placeholders"
>
</lc-date-picker>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js"></script>
<script src="lc_date_picker/lc_date_picker.js"></script>
<script src="app.js"></script>
</body>
</html>
(function (ng, doc) {
"use strict";
var moduleName, MainController;
moduleName = "app";
MainController = function MainControllerF() {
var app, today;
app = this;
app.minYear = 1900;
today = new Date();
app.maxYear = today.getFullYear();
app.user = {day: 12, year: 1986, month: "February"};
app.placeholders = {month: "September", year: app.maxYear, day: today.getDate()};
};
ng.module(moduleName, ["lcDatePicker"]).controller("MainController", MainController);
ng.bootstrap(doc, [moduleName]);
}(angular, document));
body {
background: #FF1493;
}
.container.well {
margin-top: 100px;
}
.lc-date-picker,
.lc-date-picker .lc-range-picker {
display: block;
}
.lc-date-picker {
width: 161px;
}
.lc-date-picker .lc-range-picker {
padding: 0;
margin: 0 5px;
text-align: center;
}
.lc-date-picker .lc-range-picker.lc-day-picker .lc-range-picker-value {
width: 21px;
}
.lc-date-picker .lc-range-picker.lc-year-picker .lc-range-picker-value {
width: 35px;
}
.lc-date-picker .lc-range-picker.lc-month-picker .lc-range-picker-value {
width: 75px;
}
.lc-date-picker .lc-range-picker .lc-range-picker-value {
border: 0;
outline: none;
text-align: center;
box-shadow: 0px 0px 7px 000;
}
.lc-date-picker .lc-range-picker .lc-range-picker-button {
display: block;
cursor: pointer;
font-size: 20px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
/*jslint nomen: true, maxlen: 110*/
(function (ng, lodash) {
"use strict";
var
lcDateRange, lcDatePickerDirective, lcRangePickerDirective,
lcDatePickerController, lcRangePickerController;
lcDateRange = function lcDateRangeF($locale) {
var getRange, getDaysRange, getYearsRange, getMonthsRange;
getRange = function getRangeF(min, max) {
// add +1 to numberOfDaysInMonth because the lodash.range's
// creates a range from start(including start) to end(excluding end)
// https://lodash.com/docs#range
return lodash.range(min, max + 1);
};
getDaysRange = function getDaysRangeF(month, year) {
var numberOfDaysInMonth = new Date(year, month, 0).getDate();
return getRange(1, numberOfDaysInMonth);
};
getYearsRange = function getYearsRangeF(min, max) {
return getRange(min, max);
};
getMonthsRange = function getMonthsRangeF(userOptions, localFormat) {
var options, IntlDateTimeFormater;
// for user options see:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
localFormat = $locale.id || localFormat;
options = ng.extend({month: "long"}, userOptions);
IntlDateTimeFormater = new Intl.DateTimeFormat(localFormat, options);
return getRange(0, 11).map(function getMonthNameF(monthNumber) {
return IntlDateTimeFormater.format(new Date(new Date().getFullYear(), monthNumber, 1));
});
};
return {
getDaysRange: getDaysRange,
getYearsRange: getYearsRange,
getMonthsRange: getMonthsRange
};
};
lcDatePickerController = function lcDatePickerControllerF(lcDateRange) {
var today, defaults, lcDatePicker;
lcDatePicker = this;
today = new Date();
lcDatePicker.monthsRange = lcDateRange.getMonthsRange();
lcDatePicker.dayRange = lcDateRange.getDaysRange(2, 2012);
lcDatePicker.yearRange = lcDateRange.getYearsRange(lcDatePicker.min, lcDatePicker.max);
lcDatePicker.selected.dayIndex = lcDatePicker.dayRange.indexOf(lcDatePicker.selected.day);
lcDatePicker.selected.yearIndex = lcDatePicker.yearRange.indexOf(lcDatePicker.selected.year);
lcDatePicker.selected.monthIndex = lcDatePicker.monthsRange.indexOf(lcDatePicker.selected.month);
defaults = {
placeholders: {
day: today.getDate(),
year: today.getFullYear(),
month: lcDatePicker.monthsRange[today.getMonth()]
}
};
lcDatePicker.placeholders = ng.extend(defaults.placeholders, lcDatePicker.placeholders);
};
lcDatePickerDirective = function lcDatePickerDirectiveF() {
return {
scope: {},
restrict: "EA",
controllerAs: "lcDatePicker",
controller: "lcDatePickerController",
templateUrl: "lc_date_picker/lc_date_picker.min.html",
bindToController: {
min: "=",
max: "=",
selected: "=",
placeholders: "="
}
};
};
lcRangePickerController = function lcRangePickerControllerF() {
var lcRangePicker;
lcRangePicker = this;
lcRangePicker.increment = function incrementF() {
if (lcRangePicker.current <= (lcRangePicker.lcRange.length - 1)) {
lcRangePicker.current += 1;
} else {
lcRangePicker.current = 0;
}
};
lcRangePicker.decrement = function decrementF() {
if (lcRangePicker.current >= 1) {
lcRangePicker.current -= 1;
} else {
lcRangePicker.current = lcRangePicker.lcRange.length - 1;
}
};
};
lcRangePickerDirective = function lcRangePickerDirectiveF() {
return {
scope: {},
restrict: "EA",
controllerAs: "lcRangePicker",
controller: "lcRangePickerController",
templateUrl: "lc_date_picker/lc_range_picker.min.html",
bindToController: {
type: "@",
current: "=",
lcRange: "=",
placeholder: "@?"
}
};
};
ng.module("lcDatePicker", [])
.factory("lcDateRange", lcDateRange)
.directive("lcDatePicker", lcDatePickerDirective)
.directive("lcRangePicker", lcRangePickerDirective)
.controller("lcDatePickerController", lcDatePickerController)
.controller("lcRangePickerController", lcRangePickerController);
}(angular, _));
<a
ng-click="lcRangePicker.increment()"
class="lc-range-picker-button lc-range-picker-increment"
>
<i class="glyphicon glyphicon-chevron-up"></i>
</a>
<input
type="number"
min="{{lcRangePicker.min}}"
max="{{lcRangePicker.max}}"
ng-if="!lcRangePicker.type"
class="lc-range-picker-value"
placeholder="{{lcRangePicker.placeholder}}"
ng-model="lcRangePicker.lcRange[lcRangePicker.current]"
>
<input
type="text"
maxlength="9"
minlength="3"
ng-if="lcRangePicker.type"
class="lc-range-picker-value"
placeholder="{{lcRangePicker.placeholder}}"
ng-model="lcRangePicker.lcRange[lcRangePicker.current]"
>
<a
ng-click="lcRangePicker.decrement()"
class="lc-range-picker-button lc-range-picker-decrement"
>
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
<lc-range-picker
lc-range="lcDatePicker.dayRange"
current="lcDatePicker.selected.dayIndex"
class="lc-range-picker lc-day-picker pull-left"
placeholder="{{lcDatePicker.placeholders.day}}"
>
</lc-range-picker>
<lc-range-picker
type="text"
lc-range="lcDatePicker.monthsRange"
current="lcDatePicker.selected.monthIndex"
class="lc-range-picker lc-month-picker pull-left"
placeholder="{{lcDatePicker.placeholders.month}}"
>
</lc-range-picker>
<lc-range-picker
lc-range="lcDatePicker.yearRange"
current="lcDatePicker.selected.yearIndex"
class="lc-range-picker lc-year-picker pull-left"
placeholder="{{lcDatePicker.placeholders.year}}"
>
</lc-range-picker>