1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" type="text/css" href="css/datapicker.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/rich-datepicker.js"></script>
2. HTML
<input class="rich-datepicker-input" type="text">
3. JAVASCRIPT
$(function() {
$('.rich-datepicker').richDatepicker();
});
4. OPTIONS
Position
There are 2 built in positions: bottom(default) and top. You can set your own properties via class and proper argument:
// JS
$('.rich-datepicker').richDatepicker({position: 'abc'});
// CSS
.position-abc .rich-datepicker {...}
First day of week
By default sunday is the first day of week. You can change this:
$('.rich-datepicker').richDatepicker({monday: true});
l10n
Localization should be done with taking 'monday' property into account.
$('.rich-datepicker').richDatepicker({
monday: true,
l10n: {
days: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
months: [
'Январь',
'Февраль',
'Март',
'Апрель',
'Май',
'Июнь',
'Июль',
'Август',
'Сентябрь',
'Октябрь',
'Ноябрь',
'Декабрь'
]
}
});
5. METHODS
$('.rich-datepicker').data('date').val(); // [7, 2, 2012]
$('.rich-datepicker').data('date').textVal(); // "7 February 2012"
$('.rich-datepicker').data('date').val(1,1,2011); // $('.rich-datepicker').data('date').val(); -> [1, 1, 2011]
6. EVENTS
Datapicker input emits 'datachanged' event each time day, month or year changed.