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.
There is 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.
bower install bdate --save
or with npm:
npm install bdate --save
or download directly (please use latest release version).
add dependency to project:
angular.module('app', [ 'bdate' ]);
add directive to html:
<bdatepicker b-model="resultModel" b-source="demoData"></bdatepicker>
b-sourceshould 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-modelas initial value
- 14kb for js (with injected html templates) and 6kb for css;
- No dependencies (only angularjs);
- Date data setup once and strict. If data provided throug 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;
<bdatepicker b-input-id="bdatepicker" b-model="resultModel" b-source="demoData"></bdatepicker>
bdatepicker - name of the directive;
b-model - Object where selected date will be store (also may be used as init value)
b-source - Object (json) where we take available dates
b-input-id - Provides id for directive's input element
b-root-id - Provides id for directive's root element
b-popup-id - Provides id for directive's popup element
Expected json format:
format - Now maintained only simple formats with days, month and years (**no**
hh:mm). Should be only one type of delimiter (here is "
-"), please do not pass mixed-delimiters format (**no** 'dd-MM-yy hh:mm' );
delimiter - delimiter for
format (in example is "
today - This is today date (by server's opinion - in other world - without meaning of timezones). And todat.date is just a timestamp (in seconds).
years - Object with aviabe ranges. You should provide every year which should be able to be selected.
Each year should contain list of available monthes (**monthes start from 1**, not 0, it's clear?).
Each month contain 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 -