<!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="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.default.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container well" ng-controller="MainController as app">
<formly-form model="app.user" fields="app.fields" class="register"></formly-form>
</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/api-check/7.5.5/api-check.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-formly/7.3.2/formly.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-formly-templates-bootstrap/6.1.5/angular-formly-templates-bootstrap.js"></script>
<script src="app.js"></script>
</body>
</html>
(function (ng, doc, lodash) {
"use strict";
var deps, config, lcDateRange, moduleName, MainController;
moduleName = "app";
deps = [
"formly",
'ui.select',
'ngSanitize',
"ui.bootstrap",
"formlyBootstrap"
];
config = function configF(formlyConfigProvider) {
formlyConfigProvider.setType([
{
extends: "select",
name: "ui-select-single",
templateUrl: "ui-select-single.html"
},
{
name: "lcDateField",
extends: "ui-select-single",
defaultOptions: {
templateOptions: {
labelProp: "viewValue",
valueProp: "modelValue",
optionsAttr: "bs-options",
placeholder: "Select option",
ngOptions: "option[to.valueProp] as option in to.options | filter: $select.search"
}
}
}
]);
};
lcDateRange = function lcDateRangeF($locale) {
var getRange, makeObject, 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);
};
makeObject = function makeObjectF(item) {
return {
viewValue: item,
modelValue: item
};
};
getDaysRange = function getDaysRangeF(month, year) {
var numberOfDaysInMonth = new Date(year, month, 0).getDate();
return getRange(1, numberOfDaysInMonth).map(makeObject);
};
getYearsRange = function getYearsRangeF(min, max) {
return getRange(min, max).map(makeObject);
};
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 {
modelValue: monthNumber + 1,
viewValue: IntlDateTimeFormater.format(new Date(new Date().getFullYear(), monthNumber, 1))
};
});
};
return {
getDaysRange: getDaysRange,
getYearsRange: getYearsRange,
getMonthsRange: getMonthsRange
};
};
MainController = function MainControllerF(lcDateRange) {
var app, today, testData, daysRange, yearsRange, monthsRange, updateOptions;
app = this;
app.minYear = 1900;
today = new Date();
app.maxYear = today.getFullYear();
monthsRange = lcDateRange.getMonthsRange();
daysRange = lcDateRange.getDaysRange(2, 2012);
yearsRange = lcDateRange.getYearsRange(app.minYear, app.maxYear);
updateOptions = function updateOptionsF(viewValue, modelValue, fieldScope) {
var value, maxValue, newDaysRange;
value = viewValue || modelValue;
if (app.user.month && app.user.year) {
newDaysRange = lcDateRange.getDaysRange(app.user.month, app.user.year);
maxValue = newDaysRange[newDaysRange.length - 1].modelValue;
app.user.day = (maxValue < app.user.day) ? maxValue : app.user.day;
return newDaysRange;
}
};
app.fields = [
{
key: 'day',
type: 'ui-select-single',
templateOptions: {
placeholder: 'DD',
label: 'Day',
options: daysRange,
labelProp: 'viewValue',
valueProp: 'modelValue',
optionsAttr: 'bs-options',
ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search'
},
expressionProperties: {
"templateOptions.options": updateOptions,
"templateOptions.disabled": "!model.month && !model.year"
}
},
{
key: 'month',
type: 'ui-select-single',
templateOptions: {
placeholder: 'MM',
label: 'Month',
options: monthsRange,
labelProp: 'viewValue',
valueProp: 'modelValue',
optionsAttr: 'bs-options',
onChange: updateOptions,
ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search'
}
},
{
key: 'year',
type: 'ui-select-single',
templateOptions: {
label: 'Year',
placeholder: 'YYYY',
options: yearsRange,
labelProp: 'viewValue',
valueProp: 'modelValue',
optionsAttr: 'bs-options',
onChange: updateOptions,
ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search'
}
}
];
};
ng.module(moduleName, deps, config)
.factory("lcDateRange", lcDateRange)
.controller("MainController", MainController);
ng.bootstrap(doc, [moduleName]);
}(angular, document, _));
/*(function (ng, doc, lodash) {
"use strict";
var run, deps, lcDateRange, moduleName, MainController;
moduleName = "app";
deps = [
"formly",
'ui.select',
'ngSanitize',
"ui.bootstrap",
"formlyBootstrap"
];
lcDateRange = function lcDateRangeF($locale) {
var getRange, makeObject, 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);
};
makeObject = function makeObjectF(item) {
return {
viewValue: item,
modelValue: item
};
};
getDaysRange = function getDaysRangeF(month, year) {
var numberOfDaysInMonth = new Date(year, month, 0).getDate();
return getRange(1, numberOfDaysInMonth).map(makeObject);
};
getYearsRange = function getYearsRangeF(min, max) {
return getRange(min, max).map(makeObject);
};
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 {
modelValue: monthNumber + 1,
viewValue: IntlDateTimeFormater.format(new Date(new Date().getFullYear(), monthNumber, 1))
};
});
};
return {
getDaysRange: getDaysRange,
getYearsRange: getYearsRange,
getMonthsRange: getMonthsRange
};
};
run = function runF(formlyConfig, lcDateRange) {
var today, minYear, maxYear, updateDay, daysRange;
minYear = 1900;
today = new Date();
maxYear = today.getFullYear();
daysRange = lcDateRange.getDaysRange(2, 2012);
updateDay = function onChangeF(viewValue, modelValue, fieldScope) {
var value = modelValue || viewValue;
daysRange = lcDateRange.getDaysRange(fieldScope.model.month.modelValue, fieldScope.model.year.modelValue);
};
formlyConfig.setType([
{
overwriteOk: true,
extends: 'select',
name: 'ui-select-single',
templateUrl: 'ui-select-single.html'
},
{
overwriteOk: true,
name: "lcDateField",
extends: 'ui-select-single',
defaultOptions: {
templateOptions: {
labelProp: 'viewValue',
valueProp: 'modelValue',
optionsAttr: 'bs-options',
ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search'
}
}
},
{
name: 'dayPicker',
overwriteOk: true,
extends: 'lcDateField',
defaultOptions: {
templateOptions: {
label: 'Day',
placeholder: 'DD',
options: daysRange
}
}
},
{
name: 'monthPicker',
overwriteOk: true,
extends: 'lcDateField',
defaultOptions: {
templateOptions: {
label: 'Month',
placeholder: 'MM',
onChange: updateDay,
options: lcDateRange.getMonthsRange()
}
}
},
{
name: 'yearPicker',
overwriteOk: true,
extends: 'lcDateField',
defaultOptions: {
templateOptions: {
label: 'Year',
placeholder: 'YYYY',
onChange: updateDay,
options: lcDateRange.getYearsRange(minYear, maxYear)
}
}
}
]);
};
MainController = function MainControllerF(lcDateRange) {
var app;
app = this;
app.fields = [
{
key: 'day',
type: 'dayPicker'
},
{
key: 'month',
type: 'monthPicker'
},
{
key: 'year',
type: 'yearPicker'
}
];
};
ng.module(moduleName, deps)
.run(run)
.factory("lcDateRange", lcDateRange)
.controller("MainController", MainController);
ng.bootstrap(doc, [moduleName]);
}(angular, document, _));
*/
body {
padding: 15px;
background: #8A0707;
}
.container.well {
margin-top: 100px;
}
.select2 > .select2-choice.ui-select-match {
/* Because of the inclusion of Bootstrap */
height: 29px;
}
.selectize-control > .selectize-dropdown {
top: 36px;
}
.selectize-control.single .selectize-input:after {
display: none;
}
<ui-select
theme="selectize"
disabled="{{to.disabled}}"
required="{{to.required}}"
ng-model="model[options.key]"
>
<ui-select-match placeholder="{{to.placeholder}}">
{{$select.selected[to.labelProp]}}
</ui-select-match>
<ui-select-choices data-repeat="{{to.ngOptions}}">
<div ng-bind-html="option[to.labelProp] | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>