Add possibility to show/hide the calendar (fix #46)

README.md

@@ -97,3 +97,19 @@ still in 1999. This is technically correct, but may not be what you want.
 
 If you want to have easy-to-compare date strings in your JSON, set `utc` to `true`
 and you will get `"2000-01-01T00:00:00.000Z"` as expected.
+
+#### visible
+Type: `Boolean`
+Default: `false`
+
+The visibility state of the calendar.
+ * If you set this property to `true`, the calendar will be shown
+ * If you set this property to `false`, the calendar will be hidden
+ * If you close the calendar (by clicking outside for example), this property will be set to `false`
+ * If you open the calendar (by clicking on the input for example), this property will be set to `true`
+
+An example is available in this application.
+
+## Contributors
+
+ * [Brendan Rius](https://github.com/brendan-rius)

addon/components/date-picker.js

@@ -13,6 +13,7 @@ export default Em.TextField.extend({
     var cy = window.moment().year();
     return "%@,%@".fmt(cy-3, cy+4);
   }.property(), // default yearRange from -3 to +4 years
+  visible: false,             // true is visible, false otherwise
   // A private method which returns the year range in absolute terms
   _yearRange: function() {
     var yr = this.get('yearRange');
@@ -48,6 +49,10 @@ export default Em.TextField.extend({
            * the `date` binding will be set to `null` or to the current date.
            *
            * Format the "outgoing" date with respect to the given `format`.
+           *
+           * Also allows the "visible" property to stay synchronized with the real
+           * state of the calendar by updating the state to false when the calender
+           * closes.
            */
           onClose: function() {
             // use `moment` or `moment.utc` depending on `utc` flag
@@ -66,6 +71,16 @@ export default Em.TextField.extend({
             }
 
             that._setControllerDate(d);
+
+            that.set('visible', false); // We update the "visible" state when the calendar is hidden.
+          },
+
+          /**
+           * Allows the "visible" property to stay synchronized with the real state
+           * of the calendar by updating the state to true when the calendar opens.
+           */
+          onOpen: function () {
+            that.set('visible', true); // we update the "visible" state when the calendar is shown
           }
         },
         picker = null;
@@ -143,5 +158,22 @@ export default Em.TextField.extend({
       }
     }
     this.get('_picker').setDate(d.format());
-  }.observes('date')
+  }.observes('date'),
+
+  /**
+   * Show/hide the calendar depending on the "visible" property.
+   * Is "visible" is set to true, show the calendar, otherwise
+   * hide it.
+   */
+  onVisibleChanged: function () {
+    var picker = this.get('_picker');
+    var visible = this.get('visible');
+
+    if (visible === true) {
+      picker.show();
+    }
+    else {
+      picker.hide();
+    }
+  }.observes('visible')
 });

tests/dummy/app/controllers/index.js

@@ -1,5 +1,6 @@
 import Em from 'ember';
 export default Em.Controller.extend({
+  visible: false,
   date: '2014-02-01',
   formattedDate: function() {
     return window.moment(this.get('date'), 'YYYY-MM-DD').format('DD/MM/YYYY');
@@ -10,5 +11,11 @@ export default Em.Controller.extend({
   jsDate: new Date(),
   jsUTCString: function() {
     return this.get('jsDate').toUTCString();
-  }.property('jsDate')
+  }.property('jsDate'),
+
+  actions: {
+    'toggleVisibility': function () {
+      this.set('visible', !this.get('visible'));
+    }
+  }
 });

tests/dummy/app/templates/index.hbs

@@ -22,3 +22,13 @@
     <dt>UTC String</dt><dd>{{jsUTCString}}</dd>
   </dl>
 </div>
+
+<div style="clear: both"></div>
+<hr/>
+
+<div>
+    <h6>Visibility toggling</h6>
+    <button {{action 'toggleVisibility'}}>Toggle visibility</button>
+    {{date-picker visible=visible}}<br/>
+    Current visibility is set to "{{visible}}"
+</div>