├── .gitignore
├── Makefile
├── datepicker.css
├── Readme.md
├── component.json
├── example.html
├── package.json
├── History.md
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | components
2 | build
3 | node_modules
4 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 |
2 | build: components index.js datepicker.css
3 | @component build --dev
4 |
5 | components: component.json
6 | @component install --dev
7 |
8 | clean:
9 | rm -fr build components template.js
10 |
11 | .PHONY: clean
12 |
--------------------------------------------------------------------------------
/datepicker.css:
--------------------------------------------------------------------------------
1 |
2 | .datepicker-calendar {
3 | font: 10px "Helvetica Neue", Helvetica, Arial, sans-serif;
4 | }
5 |
6 | .datepicker-popover .tip-arrow {
7 | top: auto;
8 | }
9 |
10 | .datepicker-popover .tip-inner {
11 | border: none;
12 | }
--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
1 | # datepicker
2 |
3 | Example date picker ui component built on component/calendar.
4 |
5 | Not yet feature-rich, just a blog post example.
6 |
7 | 
8 |
9 |
10 | ## Installation
11 |
12 | $ component install component/datepicker
13 |
14 | ## License
15 |
16 | MIT
17 |
--------------------------------------------------------------------------------
/component.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "datepicker",
3 | "repo": "gvilarino/datepicker",
4 | "description": "Datepicker ui component built on component/calendar",
5 | "version": "1.0.2",
6 | "keywords": ["date", "picker", "calendar"],
7 | "dependencies": {
8 | "component/bind": "1.0.0",
9 | "component/calendar": "0.1.0",
10 | "component/popover": "1.1.0",
11 | "component/aurora": "*",
12 | "component/event": "0.1.4"
13 | },
14 | "development": {},
15 | "license": "MIT",
16 | "scripts": [
17 | "index.js"
18 | ],
19 | "styles": [
20 | "datepicker.css"
21 | ]
22 | }
23 |
--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Datepicker
5 |
6 |
7 |
8 |
13 |
14 |
15 |
16 |
17 |
22 |
23 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "democracyos-datepicker",
3 | "repo": "https://github.com/DemocracyOS/datepicker",
4 | "description": "Datepicker ui component built on component/calendar",
5 | "version": "1.0.3",
6 | "keywords": ["date", "picker", "calendar"],
7 | "dependencies": {
8 | "component-bind": "1.0.0",
9 | "democracyos-calendar": "^1.0.0",
10 | "democracyos-popover": "^1.1.0",
11 | "component-event": "0.1.4",
12 | "democracyos-aurora": "^0.0.1"
13 | },
14 | "style": "datepicker.css",
15 | "browser": {
16 | "bind": "component-bind",
17 | "calendar": "democracyos-calendar",
18 | "popover": "democracyos-popover",
19 | "event": "component-event"
20 | },
21 | "license": "MIT"
22 | }
23 |
--------------------------------------------------------------------------------
/History.md:
--------------------------------------------------------------------------------
1 |
2 | 1.0.2 / 2014-09-17
3 | ==================
4 |
5 | * Pin deps to latest versions except component/aurora since it has no tags
6 |
7 | 1.0.1 / 2014-09-10
8 | ==================
9 |
10 | * Merge pull request #11 from component/ie8_compat
11 | * upstream changes for calendar/popover merged
12 | * using component/bind for Function#bind and updating to ie8_compat branches for deps
13 | * Merge pull request #10 from mhubig/extra-el-fix
14 | * Removes the extra 'el' and fixes issue #9.
15 | * Merge pull request #8 from micky2be/master
16 | * Bug Fix: getMonth return an index not the month number
17 | * Merge pull request #4 from paulmillr/patch-1
18 | * Add screenshot
19 |
20 | 1.0.0 / 2013-05-17
21 | ==================
22 |
23 | * fix double-display on subsequent clicks when a picker is already displayed
24 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Module dependencies.
3 | */
4 |
5 | var bind = require('bind')
6 | , Calendar = require('calendar')
7 | , Popover = require('popover')
8 | , event = require('event')
9 |
10 | /**
11 | * Expose `Datepicker`.
12 | */
13 |
14 | module.exports = Datepicker;
15 |
16 | /**
17 | * Initialize a new date picker with the given input `el`.
18 | *
19 | * @param {Element} el
20 | * @api public
21 | */
22 |
23 | function Datepicker(el) {
24 | if (!(this instanceof Datepicker)) return new Datepicker(el);
25 | this.el = el;
26 | this.cal = new Calendar;
27 | this.cal.addClass('datepicker-calendar');
28 | event.bind(el, 'click', bind(this, this.onclick));
29 | }
30 |
31 | /**
32 | * Handle input clicks.
33 | */
34 |
35 | Datepicker.prototype.onclick = function(e){
36 | if (this.popover) return;
37 | this.cal.once('change', bind(this, this.onchange));
38 | this.popover = new Popover(this.cal.el);
39 | this.popover.classname = 'datepicker-popover popover';
40 | this.popover.show(this.el);
41 | };
42 |
43 | /**
44 | * Handle date changes.
45 | */
46 |
47 | Datepicker.prototype.onchange = function(date){
48 | this.el.value = date.getFullYear()
49 | + '/'
50 | + (date.getMonth() + 1)
51 | + '/'
52 | + date.getDate();
53 |
54 | this.popover.remove();
55 | this.popover = null;
56 | };
57 |
--------------------------------------------------------------------------------