diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..de019e1 --- /dev/null +++ b/CHANGELOG.md @@ -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 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..7056940 --- /dev/null +++ b/CONTRIBUTING.md @@ -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/`, where `` 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/`. +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/`. +2. Add your documentation fixes (no tests required). +3. Push to your fork and submit the pull request! diff --git a/README.md b/README.md index fc40304..c498b02 100644 --- a/README.md +++ b/README.md @@ -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 - + ``` ```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 - + ``` ```javascript -$('#datepicker').datepicker(); +$('.datepicker').datepicker(); ``` As component: ```html -
- - +
+
``` ```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 -
+
``` ```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 -
- - +
+
``` @@ -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 ``` + +```javascript +$('.datepicker').datepicker({ + language: XX //as you defined in bootstrap-datepicker.XX.js +}); +``` diff --git a/component.json b/component.json new file mode 100644 index 0000000..9ed6914 --- /dev/null +++ b/component.json @@ -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" + } +} diff --git a/css/datepicker.css b/css/datepicker.css index 2b3124d..64fd432 100644 --- a/css/datepicker.css +++ b/css/datepicker.css @@ -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, diff --git a/js/bootstrap-datepicker.js b/js/bootstrap-datepicker.js index 739af65..9b81209 100644 --- a/js/bootstrap-datepicker.js +++ b/js/bootstrap-datepicker.js @@ -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 + */ +;(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)); diff --git a/js/locales/bootstrap-datepicker.ja.js b/js/locales/bootstrap-datepicker.ja.js index cf0ea20..ed0bc0f 100644 --- a/js/locales/bootstrap-datepicker.ja.js +++ b/js/locales/bootstrap-datepicker.ja.js @@ -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)); diff --git a/less/datepicker.less b/less/datepicker.less index 7096a77..091fc2f 100644 --- a/less/datepicker.less +++ b/less/datepicker.less @@ -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, diff --git a/tests/suites/component.js b/tests/suites/component.js index ea91a27..6cf366a 100644 --- a/tests/suites/component.js +++ b/tests/suites/component.js @@ -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 -}); \ No newline at end of file +}); + +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); +});