From 23e3bcdcbfc722706188bf6a415c107cfc13f525 Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Wed, 28 Aug 2013 18:20:42 -0700 Subject: [PATCH 1/4] Allows an initial value to be specified. Adds a change event that's emitted when the date is changed. Adds the ability to format the date. --- component.json | 7 ++++-- index.js | 66 ++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 58 insertions(+), 15 deletions(-) diff --git a/component.json b/component.json index 3b4cb43..022468f 100644 --- a/component.json +++ b/component.json @@ -2,13 +2,16 @@ "name": "datepicker", "repo": "component/datepicker", "description": "Datepicker ui component built on component/calendar", - "version": "1.0.0", + "version": "1.0.1", "keywords": ["date", "picker", "calendar"], "dependencies": { "component/calendar": "*", "component/popover": "*", "component/aurora": "*", - "component/event": "*" + "component/event": "*", + "component/emitter": "*", + "samsonjs/strftime": "*", + "gorillatron/extend": "*" }, "development": {}, "license": "MIT", diff --git a/index.js b/index.js index c72ac95..dd6211b 100644 --- a/index.js +++ b/index.js @@ -6,6 +6,17 @@ var Calendar = require('calendar') , Popover = require('popover') , event = require('event') + , strftime = require('strftime') + , extend = require('extend') + , Emitter = require('emitter') + +/** + * Defaults + */ + +var defaults = { + format: '%Y/%m/%d' +}; /** * Expose `Datepicker`. @@ -20,24 +31,52 @@ module.exports = Datepicker; * @api public */ -function Datepicker(el) { - if (!(this instanceof Datepicker)) return new Datepicker(el); +function Datepicker(el, opts) { + if (!(this instanceof Datepicker)) return new Datepicker(el, opts); + Emitter( this ); this.el = el; + this.options = extend( {}, defaults, opts ); this.cal = new Calendar; this.cal.el.addClass('datepicker-calendar'); event.bind(el, 'click', this.onclick.bind(this)); + if (this.options.value) { + this.onchange(this.options.value); + } + return this; } /** - * Handle input clicks. + * Show the datepicker. */ - -Datepicker.prototype.onclick = function(e){ +Datepicker.prototype.show = function(){ if (this.popover) return; this.cal.once('change', this.onchange.bind(this)); this.popover = new Popover(this.cal.el); this.popover.classname = 'datepicker-popover popover'; this.popover.show(this.el); +} + +/** + * Hide the datepicker. + */ +Datepicker.prototype.hide = function(){ + this.cal.off('change', this.onchange.bind(this)); + if (this.popover) { + this.popover.remove(); + this.popover = null; + } +} + +/** + * Handle input clicks. + */ + +Datepicker.prototype.onclick = function(e){ + if (this.popover) { + this.hide(); + return; + } + this.show(); }; /** @@ -45,13 +84,14 @@ Datepicker.prototype.onclick = function(e){ */ Datepicker.prototype.onchange = function(date){ - this.el.value = date.getFullYear() - + '/' - + date.getMonth() - + '/' - + date.getDate(); - - this.popover.remove(); - this.popover = null; + var previous = this.el.value; + this.el.value = strftime(this.options.format, date); + this.cal.select( date ); + this.hide(); + this.emit( 'change', { + previous: previous, + value: this.el.value, + date: date + }); }; From 9a124de0e600854b16472d3327d3111a03ac3f6f Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Wed, 28 Aug 2013 18:27:32 -0700 Subject: [PATCH 2/4] Update readme. --- Readme.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/Readme.md b/Readme.md index 2aa426f..d55022a 100644 --- a/Readme.md +++ b/Readme.md @@ -11,6 +11,29 @@ $ component install component/datepicker +## Example + +```javascript + + var datepicker = datepicker( document.getElementById("datepick"), { + value: new Date(), // initialize it to now + format: '%B %d, %Y' // format it like: August 28, 2013 + }); + + // listen for a change event and print out the values we get + datepicker.on( 'change', function( event ) { + console.log( 'old value:' + event.previous ); + console.log( 'new value:' + event.value ); + console.log( 'date object: ' + event.date ); + }); + + // show our datepicker by hand (by default, it will show when the element it's bound to is clicked) + datepicker.show(); + + // or we can hide it by hand + datepicker.hide(); +``` + ## License MIT From cf6136fe88b0f3f54e686cd603c63997bc7c5355 Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Fri, 17 Jan 2014 10:18:35 -0800 Subject: [PATCH 3/4] Add click binding. --- index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index dd6211b..35a09b5 100644 --- a/index.js +++ b/index.js @@ -15,7 +15,8 @@ var Calendar = require('calendar') */ var defaults = { - format: '%Y/%m/%d' + format: '%Y/%m/%d', + bindClick: true }; /** @@ -38,7 +39,9 @@ function Datepicker(el, opts) { this.options = extend( {}, defaults, opts ); this.cal = new Calendar; this.cal.el.addClass('datepicker-calendar'); - event.bind(el, 'click', this.onclick.bind(this)); + if (this.options.bindClick) { + event.bind(el, 'click', this.onclick.bind(this)); + } if (this.options.value) { this.onchange(this.options.value); } From 68ed5dfdfb3ac341f35336f7e71ee4203da190e7 Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Fri, 17 Jan 2014 10:40:13 -0800 Subject: [PATCH 4/4] Use classList interface. --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 2b513f4..613cb18 100644 --- a/index.js +++ b/index.js @@ -37,7 +37,7 @@ function Datepicker(el, opts) { this.el = el; this.options = extend( {}, defaults, opts ); this.cal = new Calendar; - this.cal.el.addClass('datepicker-calendar'); + this.cal.el.classList.add('datepicker-calendar'); if (this.options.bindClick) { event.bind(el, 'click', this.onclick.bind(this)); }