archive-gh-me/bootstrap-datepicker
1
0
Fork 0
mirror of https://github.com/uxsolutions/bootstrap-datepicker.git synced 2026-02-01 17:27:05 +00:00
Code Issues Projects Releases Wiki Activity

Merge latest master into range branch

Browse Source
This commit is contained in:
Andrew Rowls 2013-04-02 15:33:14 -04:00
commit 2b1b3f951f
10 changed files with 245 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
CHANGELOG.md Normal file
View File

@ -0,0 +1,30 @@
Changelog
=========
v1.0.1
------
* Support for [Bower](http://twitter.github.com/bower/)
* Component pickers are now aligned under the input, not the add-on element.
* Japanese locale now has "today" and "format".
* "remove" method removes `.data().date` if the datepicker is on a non-input.
* Events on initialized elements are no longer blocked from bubbling up the DOM (jQuery.live et al can now catch the events).
* Component triggers now include `.btn` in addition to `.add-on`.
* Updates to README contents.
v1.0.0
------
Initial release:
* format option
* weekStart option
* calendarWeeks option
* startDate / endDate options
* daysOfWeekDisabled option
* autoclose option
* startView / mnViewMode options
* todayBtn / todayHighlight options
* keyboardNavigation option
* language option
* forceParse option

40
CONTRIBUTING.md Normal file
View File

@ -0,0 +1,40 @@
# Contributing
## Support requests
The issue tracker is not the place for support requests. If you get stuck with bootstrap-datepicker, it's very likely that the fine folks at [StackOverflow](http://stackoverflow.com/) will be able to help you; simply describe the problem you're having and provide them a link to the repo (so they know what code you're using). Another option is to post to the [bootstrap-datepicker google group](https://groups.google.com/group/bootstrap-datepicker).
## Issues
If you've found a bug in bootstrap-datepicker, we want to know about it! However, please keep the following in mind:
* This is not the bootstrap-datepicker from [eyecon.ro](http://www.eyecon.ro/bootstrap-datepicker/). Stefan provided the initial code for bootstrap-datepicker, but this repo is divergent from his codebase. Please make sure you're using either the latest tagged version or the latest master from https://github.com/eternicode/bootstrap-datepicker/ .
* A working example of the bug you've found is *much* easier to work with than a description alone. If possible, please provide a link to a demonstration of the bug, perhaps using http://jsfiddle.net/ .
* Finally, it's possible someone else has already reported the same bug you have. Please search the issue tracker for similar issues before posting your own. Thanks!
## Pull Requests
Patches welcome!
For all cases, you should have your own fork of the repo.
To submit a pull request for a **new feature**:
1. Run the tests. Every pull request for a new feature should have an accompanying unit test. See the README in the `tests/` directory for details.
2. Create a new branch off of the `master` branch for your feature, with a name following the pattern `feature/<description>`, where `<description>` is a short description of the new feature. This is particularly helpful when you want to submit multiple pull requests.
3. Add a test (or multiple tests) for your feature. Again, see `tests/README.md`.
4. Add your new feature, making the test pass.
5. Push to your fork and submit the pull request!
To submit a **bug fix**:
1. Create a new branch off of the `master` branch, with a name following the pattern `bug/<description>`.
2. Add a test that demonstrates the bug.
3. Make the test pass.
4. Push to your fork and submit the pll request!
To submit a **documentation fix**:
1. Create a new branch off of the `master` branch, with a name following the pattern `docs/<description>`.
2. Add your documentation fixes (no tests required).
3. Push to your fork and submit the pull request!

75
README.md
View File

@ -1,4 +1,4 @@
# bootstrap-datepicker [![Build Status](https://travis-ci.org/eternicode/bootstrap-datepicker.png?branch=master)](https://travis-ci.org/eternicode/bootstrap-datepicker)
# [bootstrap-datepicker](http://eternicode.github.com/bootstrap-datepicker/) [![Build Status](https://travis-ci.org/eternicode/bootstrap-datepicker.png?branch=master)](https://travis-ci.org/eternicode/bootstrap-datepicker)
This is a fork of Stefan Petre's [original code](http://www.eyecon.ro/bootstrap-datepicker/);
thanks go to him for getting this thing started!
@ -6,15 +6,24 @@ thanks go to him for getting this thing started!
Please note that this fork is not used on Stefan's page at this time, nor is it maintained or
contributed to by him (yet?)
Versions are incremented according to [semver](http://semver.org/).
# Requirements
* [Bootstrap](http://twitter.github.com/bootstrap/) 2.0.4+
* [jQuery](http://jquery.com/) 1.7.1+
These are the specific versions bootstrap-datpicker is tested against (`js` files) and built against (`css` files). Use other versions at your own risk.
# Example
Attached to a field with the format specified via options:
```html
<input type="text" value="02-16-2012" id="datepicker">
<input type="text" value="02-16-2012" class="datepicker">
```
```javascript
$('#datepicker').datepicker({
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
```
@ -22,22 +31,21 @@ $('#datepicker').datepicker({
Attached to a field with the format specified via data tag:
```html
<input type="text" value="02/16/12" data-date-format="mm/dd/yy" id="datepicker" >
<input type="text" value="02/16/12" data-date-format="mm/dd/yy" class="datepicker" >
```
```javascript
$('#datepicker').datepicker();
$('.datepicker').datepicker();
```
As component:
```html
<div class="input-append date" id="datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input size="16" type="text" value="12-02-2012" readonly>
<span class="add-on"><i class="icon-th"></i></span>
<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input size="16" type="text" value="12-02-2012" readonly><span class="add-on"><i class="icon-th"></i></span>
</div>
```
```javascript
$('#datepicker').datepicker();
$('.datepicker').datepicker();
```
Attached to non-field element, using events to work with the date values.
@ -99,10 +107,10 @@ $('#date-end')
As inline datepicker:
```html
<div id="datepicker"></div>
<div class="datepicker"></div>
```
```javascript
$('#datepicker').datepicker();
$('.datepicker').datepicker();
```
@ -111,7 +119,7 @@ $('#datepicker').datepicker();
Call the datepicker via javascript:
```javascript
$('#datepicker').datepicker()
$('.datepicker').datepicker()
```
## Dependencies
@ -224,9 +232,8 @@ Whether or not to force parsing of the input value when the picker is closed. T
Format a component.
```html
<div class="input-append date" id="datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012">
<span class="add-on"><i class="icon-th"></i></span>
<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012"><span class="add-on"><i class="icon-th"></i></span>
</div>
```
@ -254,7 +261,7 @@ Remove the datepicker. Removes attached events, internal attached objects, and
added HTML elements.
```javascript
$('#datepicker').datepicker('remove');
$('.datepicker').datepicker('remove');
```
### show
@ -264,7 +271,7 @@ Arguments: None
Show the datepicker.
```javascript
$('#datepicker').datepicker('show');
$('.datepicker').datepicker('show');
```
### hide
@ -274,17 +281,19 @@ Arguments: None
Hide the datepicker.
```javascript
$('#datepicker').datepicker('hide');
$('.datepicker').datepicker('hide');
```
### update
Arguments: None
Arguments:
Update the datepicker with the current input value.
* date (String|Date)
Update the datepicker with given argument or the current input value.
```javascript
$('#datepicker').datepicker('update');
$('.datepicker').datepicker('update');
```
### setStartDate
@ -296,14 +305,14 @@ Arguments:
Sets a new lower date limit on the datepicker.
```javascript
$('#datepicker').datepicker('setStartDate', '2012-01-01');
$('.datepicker').datepicker('setStartDate', '2012-01-01');
```
Omit startDate (or provide an otherwise falsey value) to unset the limit.
```javascript
$('#datepicker').datepicker('setStartDate');
$('#datepicker').datepicker('setStartDate', null);
$('.datepicker').datepicker('setStartDate');
$('.datepicker').datepicker('setStartDate', null);
```
### setEndDate
@ -315,14 +324,14 @@ Arguments:
Sets a new upper date limit on the datepicker.
```javascript
$('#datepicker').datepicker('setEndDate', '2012-12-31');
$('.datepicker').datepicker('setEndDate', '2012-12-31');
```
Omit endDate (or provide an otherwise falsey value) to unset the limit.
```javascript
$('#datepicker').datepicker('setEndDate');
$('#datepicker').datepicker('setEndDate', null);
$('.datepicker').datepicker('setEndDate');
$('.datepicker').datepicker('setEndDate', null);
```
### setDaysOfWeekDisabled
@ -334,14 +343,14 @@ Arguments:
Sets the days of week that should be disabled.
```javascript
$('#datepicker').datepicker('setDaysOfWeekDisabled', [0,6]);
$('.datepicker').datepicker('setDaysOfWeekDisabled', [0,6]);
```
Omit daysOfWeekDisabled (or provide an otherwise falsey value) to unset the disabled days.
```javascript
$('#datepicker').datepicker('setDaysOfWeekDisabled');
$('#datepicker').datepicker('setDaysOfWeekDisabled', null);
$('.datepicker').datepicker('setDaysOfWeekDisabled');
$('.datepicker').datepicker('setDaysOfWeekDisabled', null);
```
## Events
@ -422,3 +431,9 @@ If your browser (or those of your users) is displaying characters wrong, chances
```html
<script type="text/javascript" src="bootstrap-datepicker.XX.js" charset="UTF-8"></script>
```
```javascript
$('.datepicker').datepicker({
language: XX //as you defined in bootstrap-datepicker.XX.js
});
```

9
component.json Normal file
View File

@ -0,0 +1,9 @@
{
"name": "bootstrap-datepicker",
"version": "1.0.0",
"main": ["js/bootstrap-datepicker.js","css/datepicker.css"],
"dependencies": {
"jquery" : ">=1.7.1",
"bootstrap" : ">=2.0.4 <3.0"
}
}

2
css/datepicker.css
View File

@ -9,7 +9,6 @@
*/
.datepicker {
padding: 4px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
@ -112,6 +111,7 @@
border-color: #fdf59a #fdf59a #fbed50;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #000 !important;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,

124
js/bootstrap-datepicker.js vendored
View File

@ -41,13 +41,11 @@
this.format = DPGlobal.parseFormat(options.format||this.element.data('date-format')||dates[this.language].format||'mm/dd/yyyy');
this.isInline = false;
this.isInput = this.element.is('input');
this.component = this.element.is('.date') ? this.element.find('.add-on') : false;
this.component = this.element.is('.date') ? this.element.find('.add-on, .btn') : false;
this.hasInput = this.component && this.element.find('input').length;
if(this.component && this.component.length === 0)
this.component = false;
this._attachEvents();
this.forceParse = true;
if ('forceParse' in options) {
this.forceParse = options.forceParse;
@ -55,16 +53,12 @@
this.forceParse = this.element.data('date-force-parse');
}
this.picker = $(DPGlobal.template)
.appendTo(this.isInline ? this.element : 'body')
.on({
click: $.proxy(this.click, this),
mousedown: $.proxy(this.mousedown, this)
});
this.picker = $(DPGlobal.template);
this._buildEvents();
this._attachEvents();
if(this.isInline) {
this.picker.addClass('datepicker-inline');
this.picker.addClass('datepicker-inline').appendTo(this.element);
} else {
this.picker.addClass('datepicker-dropdown dropdown-menu');
}
@ -73,12 +67,6 @@
this.picker.find('.prev i, .next i')
.toggleClass('icon-arrow-left icon-arrow-right');
}
$(document).on('mousedown', function (e) {
// Clicked outside the datepicker, hide it
if ($(e.target).closest('.datepicker.datepicker-inline, .datepicker.datepicker-dropdown').length === 0) {
that.hide();
}
});
this.autoclose = false;
if ('autoclose' in options) {
@ -138,6 +126,8 @@
return parseInt(val) + 1;
});
this._allow_update = false;
this.weekStart = ((options.weekStart||this.element.data('date-weekstart')||dates[this.language].weekStart||0) % 7);
this.weekEnd = ((this.weekStart + 6) % 7);
this.startDate = -Infinity;
@ -149,6 +139,9 @@
this.fillDow();
this.fillMonths();
this.setRange(options.range);
this._allow_update = true;
this.update();
this.showMode();
@ -161,8 +154,22 @@
constructor: Datepicker,
_events: [],
_attachEvents: function(){
this._detachEvents();
_secondaryEvents: [],
_applyEvents: function(evs){
for (var i=0, el, ev; i<evs.length; i++){
el = evs[i][0];
ev = evs[i][1];
el.on(ev);
}
},
_unapplyEvents: function(evs){
for (var i=0, el, ev; i<evs.length; i++){
el = evs[i][0];
ev = evs[i][1];
el.off(ev);
}
},
_buildEvents: function(){
if (this.isInput) { // single input
this._events = [
[this.element, {
@ -185,9 +192,9 @@
}]
];
}
else if (this.element.is('div')) { // inline datepicker
this.isInline = true;
}
else if (this.element.is('div')) { // inline datepicker
this.isInline = true;
}
else {
this._events = [
[this.element, {
@ -195,29 +202,47 @@
}]
];
}
for (var i=0, el, ev; i<this._events.length; i++){
el = this._events[i][0];
ev = this._events[i][1];
el.on(ev);
}
this._secondaryEvents = [
[this.picker, {
click: $.proxy(this.click, this)
}],
[$(window), {
resize: $.proxy(this.place, this)
}],
[$(document), {
mousedown: $.proxy(function (e) {
// Clicked outside the datepicker, hide it
if ($(e.target).closest('.datepicker.datepicker-inline, .datepicker.datepicker-dropdown').length === 0) {
this.hide();
}
}, this)
}]
];
},
_attachEvents: function(){
this._detachEvents();
this._applyEvents(this._events);
},
_detachEvents: function(){
for (var i=0, el, ev; i<this._events.length; i++){
el = this._events[i][0];
ev = this._events[i][1];
el.off(ev);
}
this._events = [];
this._unapplyEvents(this._events);
},
_attachSecondaryEvents: function(){
this._detachSecondaryEvents();
this._applyEvents(this._secondaryEvents);
},
_detachSecondaryEvents: function(){
this._unapplyEvents(this._secondaryEvents);
},
show: function(e) {
if (!this.isInline)
this.picker.appendTo('body');
this.picker.show();
this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
this.update();
this.place();
$(window).on('resize', $.proxy(this.place, this));
if (e ) {
e.stopPropagation();
this._attachSecondaryEvents();
if (e) {
e.preventDefault();
}
this.element.trigger({
@ -229,13 +254,10 @@
hide: function(e){
if(this.isInline) return;
if (!this.picker.is(':visible')) return;
this.picker.hide();
$(window).off('resize', this.place);
this.picker.hide().detach();
this._detachSecondaryEvents();
this.viewMode = this.startViewMode;
this.showMode();
if (!this.isInput) {
$(document).off('mousedown', this.hide);
}
if (
this.forceParse &&
@ -252,9 +274,14 @@
},
remove: function() {
this.hide();
this._detachEvents();
this._detachSecondaryEvents();
this.picker.remove();
delete this.element.data().datepicker;
if (!this.isInput) {
delete this.element.data().date;
}
},
getDate: function() {
@ -277,7 +304,6 @@
setValue: function() {
var formatted = this.getFormattedDate();
if (!this.isInput) {
if (this.component){
this.element.find('input').val(formatted);
@ -329,7 +355,7 @@
var zIndex = parseInt(this.element.parents().filter(function() {
return $(this).css('z-index') != 'auto';
}).first().css('z-index'))+10;
var offset = this.component ? this.component.offset() : this.element.offset();
var offset = this.component ? this.component.parent().offset() : this.element.offset();
var height = this.component ? this.component.outerHeight(true) : this.element.outerHeight(true);
this.picker.css({
top: offset.top + height,
@ -338,7 +364,10 @@
});
},
_allow_update: true,
update: function(){
if (!this._allow_update) return;
var date, fromArgs = false;
if(arguments && arguments.length && (typeof arguments[0] === 'string' || arguments[0] instanceof Date)) {
date = arguments[0];
@ -518,6 +547,8 @@
},
updateNavArrows: function() {
if (!this._allow_update) return;
var d = new Date(this.viewDate),
year = d.getUTCFullYear(),
month = d.getUTCMonth();
@ -551,7 +582,6 @@
},
click: function(e) {
e.stopPropagation();
e.preventDefault();
var target = $(e.target).closest('span, td, th');
if (target.length == 1) {
@ -879,8 +909,8 @@
if (!data) {
if ($this.is('.input-daterange')){
var opts = {
inputs: $this.find('input').toArray()
};
inputs: $this.find('input').toArray()
};
$this.data('datepicker', (data = new DateRangePicker($.extend(opts, $.fn.datepicker.defaults,options))));
}
else{

16
js/locales/bootstrap-datepicker.hu.js vendored Normal file
View File

@ -0,0 +1,16 @@
/**
* Hungarian translation for bootstrap-datepicker
* Sotus László <lacisan@gmail.com>
*/
;(function($){
$.fn.datepicker.dates['hu'] = {
days: ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat", "Vasárnap"],
daysShort: ["Vas", "Hét", "Ked", "Sze", "Csü", "Pén", "Szo", "Vas"],
daysMin: ["Va", "Hé", "Ke", "Sz", "Cs", "Pé", "Sz", "Va"],
months: ["Január", "Február", "Március", "Április", "Május", "Június", "Július", "Augusztus", "Szeptember", "Október", "November", "December"],
monthsShort: ["Jan", "Feb", "Már", "Ápr", "Máj", "Jún", "Júl", "Aug", "Sze", "Okt", "Nov", "Dec"],
today: "Ma",
weekStart: 1,
format: "yyyy.mm.dd"
};
}(jQuery));

4
js/locales/bootstrap-datepicker.ja.js vendored
View File

@ -8,6 +8,8 @@
daysShort: ["日", "月", "火", "水", "木", "金", "土", "日"],
daysMin: ["日", "月", "火", "水", "木", "金", "土", "日"],
months: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
today: "今日",
format: "yyyy/mm/dd"
};
}(jQuery));

2
less/datepicker.less
View File

@ -10,7 +10,6 @@
.datepicker {
padding: 4px;
margin-top: 1px;
.border-radius(4px);
&-inline {
width: 220px;
@ -99,6 +98,7 @@
&.today.disabled:hover {
@todayBackground: lighten(@orange, 30%);
.buttonBackground(@todayBackground, spin(@todayBackground, 20));
color: #000 !important;
}
&.range,
&.range:hover,

24
tests/suites/component.js
View File

@ -154,4 +154,26 @@ test('Selecting date resets viewDate and date', function(){
// Re-rendered on click
target = this.picker.find('.datepicker-days tbody td:first');
equal(target.text(), '29'); // Should be Jan 29
});
});
test('"remove" removes associated HTML', function(){
var datepickerDivSelector = '.datepicker';
$('#datepicker').datepicker('show');
//there should be one datepicker initiated so that means one hidden .datepicker div
equal($(datepickerDivSelector).length, 1);
this.component.datepicker('remove');
equal($(datepickerDivSelector).length, 0);//hidden HTML should be gone
});
test('Does not block events', function(){
var clicks = 0;
function handler(){
clicks++;
}
$('#qunit-fixture').on('click', '.add-on', handler);
this.addon.click();
equal(clicks, 1);
$('#qunit-fixture').off('click', '.add-on', handler);
});