bDate - Backend-driven Angularjs datepicker
| Demo |
#What is this?
This is angularjs datepicker (like angular-ui datepicker) but with one serious difference:
bDate Datepicker didn't count any date on client side, it works only with provided (json) data.
##But why?
There are many reasons. Mostly because sometimes you may want to set available ranges of dates from the backend. For example: you may set only aug and sept of 2014, and jan of 2015. There is do nothing with timezones - server say what is today and etc.
#Installation
-
download
with bower:
bower install bdate --save
or with npm:
npm install bdate --save
or download directly (please use latest release version).
-
add .js
and .css
files
<link href=bdate/dist/bdate.css rel=stylesheet media=all>
<script src=bdate/dist/bdate.js type=text/javascript></script>
(don't forget to include angular.js before)
-
add dependency to project:
angular.module('app', [
'bdate'
]);
-
add directive to html:
<bdatepicker b-model="resultModel" b-source="demoData"></bdatepicker>
b-model
and b-source
should be defined in controller's js.
b-source
- is where from we get available data
b-model
- where we save the results of select. Btw, you can use b-model
as initial value
#Features
- 14kb for js (with injected html templates) and 6kb for css;
- No dependencies (only angularjs);
- Date data setup once and strict. If thr data provided through ajax-query, datepicker will wait until it loaded;
- No extra options (just pick a date);
- Easy to custom - you may provide custom id and class (in progress right now) for each element of each directive (if you have multiple ones);
- Able to set date model externally;
#Example
<label for="bdatepicker">Date</label>
<bdatepicker b-input-id="bdatepicker" b-model="resultModel" b-source="demoData"></bdatepicker>
bdatepicker
- name of the directive;
Required:
b-model
- Object where selected date will be stored (also may be used as init value)
b-source
- Object (json) where we take available dates
Optional:
b-input-id
- Provides id for the directive's input element
b-root-id
- Provides id for the directive's root element
b-popup-id
- Provides id for the directive's popup element
Expected json format:
{
"format": "dd-mm-yyyy",
"delimiter": "-",
"today": {
"date": 1432537266825,
"year": 2015,
"month": 5,
"day": 25,
"day_of_week": 1
},
"years": {
"2015": {
"2": {
"days_total": 28,
"start_day": 7
}
}
}
}
format
- Now maintained only simple formats with days, month and years (no EEE
, hh:mm
). Should be only one type of delimiter (here is "-
"), please do not pass mixed-delimiters format (no 'dd-MM-yy hh:mm' ).
format is case sensetive - mm
- is minutes, but MM
- is months (because on angular js politic);
delimiter
- delimiter for format
(in example is "-
")
today
- This is today's date (by server's opinion - in other world - without meaning of timezones). And todat.date is just a timestamp (in ms).
years
- Object with available ranges. You should provide every year, which should be able to be selected.
Each year should contain a list of available monthes (monthes start from 1, not 0, it's clear?).
Each month contains total days count - days_total
(because of february) and day of week for the 1st month day - start_day
(for example 1st of Feb 2015 is Sunday - 7
)
#Localization
Default language is english.
You able to pass month and days names as directives attributes:
<bdatepicker b-month-names="localizedMonth" b-days-names="localizedDays" b-model="resultModel" b-source="demoData"></bdatepicker>
b-month-names
- object of localized month names. Example:
$scope.localizedMonth = {
1: {name: 'Январь', short: 'Янв'},
2: {name: 'Февраль', short: 'Фев'},
3: {name: 'Март', short: 'Март'},
4: {name: 'Апрель', short: 'Май'},
5: {name: 'Май', short: 'Май'},
6: {name: 'Июнь', short: 'Июнь'},
7: {name: 'Июль', short: 'Июль'},
8: {name: 'Август', short: 'Авг'},
9: {name: 'Сентябрь', short: 'Сент'},
10: {name: 'Октябрь', short: 'Окт'},
11: {name: 'Ноябрь', short: 'Ноя'},
12: {name: 'Декабрь', short: 'Дек'}
};
b-days-names
- array of localized days names. Example:
$scope.localizedDays = [
{name: 'Понедельник', short: 'Пн'},
{name: 'Вторник', short: 'Вт'},
{name: 'Среда', short: 'Ср'},
{name: 'Четверг', short: 'Чт'},
{name: 'Пятница', short: 'Пт'},
{name: 'Суббота', short: 'Сб'},
{name: 'Воскресенье', short: 'Вс'}
];
#Developing
Global dependencies: