Make the library more 'featureful'

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

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",

index.js

@@ -5,6 +5,18 @@
 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',
+    bindClick: true
+};
 
 /**
  * Expose `Datepicker`.
@@ -19,38 +31,69 @@ 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));
+  this.cal.el.classList.add('datepicker-calendar');
+  if (this.options.bindClick) {
+    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();
 };
 
 /**
  * Handle date changes.
  */
 
 Datepicker.prototype.onchange = function(date){
-  this.el.value = date.getFullYear()
-    + '/'
-    + (date.getMonth() + 1)
-    + '/'
-    + 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
+  });
 };