| 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. But mostly it's made for people who want to take a control for datepicker from the backend.
#Installation
-
download
with bower:
bower install bdate --save
or with npm:
npm install bdate --save
or download directly (please use latest release version).
-
add
.jsand.cssfiles<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" b-settings="settings" b-refresh="refreshData(m, y)" placeholder="Enter the date" ></bdatepicker>
b-model- is the result of date selection;b-source- Data with dates (may come from backend);b-settings- Var with params (format, month and day names, etc);b-refresh- Function wich calls every time, when you should update source (for example go to next month in popup). Should define with two args -mfor month andyfor year;
#Features
- Date ranges aviable
- 20kb minified;
- No dependencies (only angularjs);
- 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;
#Date Raanges
<bdatepicker
b-model="resultModel"
b-start-source="startSource"
b-end-source="endSource"
b-settings="settings"
b-start-refresh="refreshStartData(m, y)"
b-end-refresh="refreshEndData(m, y)"
b-range="true"
placeholder="Enter the date"b-range - define ranges mode;
b-start-source and b-end-source work as b-source (and insteado of them). Each work for start range and end range popups;
b-start-refresh and b-end-refresh - all the same as b-refresh function, but wotks separately for start and end popup;
#Settings format
{
"week": ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"],
"today": {
"day": 3,
"month": 1,
"year": 2010
},
"format": "dd-MM-yyyy",
"range_delimiter": "--"
}#Data format
{
"id": "1-2010",
"years": [
2015,
2014,
2013,
2012,
2011,
2010
],
"month": {
"num": 1,
"name": "Январь",
"isStart": true,
"isEnd": false
},
"year": {
"num": 2010,
"isStart": true,
"isEnd": false
},
"dates": [
{
"day": 28,
"month": 12,
"year": 2009,
"isDisabled": true
},
{
"day": 29,
"month": 12,
"year": 2009,
"isDisabled": true
},
{
"day": 30,
"month": 12,
"year": 2009,
"isDisabled": true
},
{
"day": 31,
"month": 12,
"year": 2009,
"isDisabled": true
},
{
"day": 1,
"month": 1,
"year": 2010
},
{
"day": 2,
"month": 1,
"year": 2010
},
{
"day": 3,
"month": 1,
"year": 2010,
"isToday": true
},
{
"day": 4,
"month": 1,
"year": 2010
},
{
"day": 5,
"month": 1,
"year": 2010
},
{
"day": 6,
"month": 1,
"year": 2010
},
{
"day": 7,
"month": 1,
"year": 2010
},
{
"day": 8,
"month": 1,
"year": 2010
},
{
"day": 9,
"month": 1,
"year": 2010
},
{
"day": 10,
"month": 1,
"year": 2010
},
{
"day": 11,
"month": 1,
"year": 2010
},
{
"day": 12,
"month": 1,
"year": 2010
},
{
"day": 13,
"month": 1,
"year": 2010
},
{
"day": 14,
"month": 1,
"year": 2010
},
{
"day": 15,
"month": 1,
"year": 2010
},
{
"day": 16,
"month": 1,
"year": 2010
},
{
"day": 17,
"month": 1,
"year": 2010
},
{
"day": 18,
"month": 1,
"year": 2010
},
{
"day": 19,
"month": 1,
"year": 2010
},
{
"day": 20,
"month": 1,
"year": 2010
},
{
"day": 21,
"month": 1,
"year": 2010
},
{
"day": 22,
"month": 1,
"year": 2010
},
{
"day": 23,
"month": 1,
"year": 2010
},
{
"day": 24,
"month": 1,
"year": 2010
},
{
"day": 25,
"month": 1,
"year": 2010
},
{
"day": 26,
"month": 1,
"year": 2010
},
{
"day": 27,
"month": 1,
"year": 2010
},
{
"day": 28,
"month": 1,
"year": 2010
},
{
"day": 29,
"month": 1,
"year": 2010
},
{
"day": 30,
"month": 1,
"year": 2010
},
{
"day": 31,
"month": 1,
"year": 2010
},
{
"day": 1,
"month": 2,
"year": 2010
},
{
"day": 2,
"month": 2,
"year": 2010
},
{
"day": 3,
"month": 2,
"year": 2010
},
{
"day": 4,
"month": 2,
"year": 2010
},
{
"day": 5,
"month": 2,
"year": 2010
},
{
"day": 6,
"month": 2,
"year": 2010
},
{
"day": 7,
"month": 2,
"year": 2010
}
]
}#Developing
Global dependencies:
