feat(datepickerPopup): split off popup from datepicker

src/datepicker/datepicker.css

@@ -6,16 +6,6 @@
   min-width: 100%;
 }
 
-.uib-datepicker-popup.dropdown-menu {
-  display: block;
-  float: none;
-  margin: 0;
-}
-
-.uib-button-bar {
-  padding: 10px 9px 2px;
-}
-
 .uib-left, .uib-right {
   width: 100%
 }

src/datepicker/docs/readme.md

@@ -2,8 +2,6 @@ Our datepicker is flexible and fully customizable.
 
 You can navigate through days, months and years.
 
-It comes in two formats, an inline `uib-datepicker` and an `uib-datepicker-popup` to be embedded in an input.
-
 The datepicker has 3 modes:
 
 * `day` - In this mode you're presented with a 6-week calendar for a specified month.
@@ -24,11 +22,11 @@ The datepicker has 3 modes:
   Supported [angular ngModelOptions](https://docs.angularjs.org/api/ng/directive/ngModelOptions):
   * allowInvalid
   * timezone
-  
+
 * `template-url`
   _(Default: `uib/template/datepicker/datepicker.html`)_ -
   Add the ability to override the template used on the component.
-  
+
 Apart from the previous settings, to configure the uib-datepicker you need to create an object in Javascript with all the options and use it on the `datepicker-options` attribute:
 
 * `datepicker-options`
@@ -37,85 +35,85 @@ Apart from the previous settings, to configure the uib-datepicker you need to cr
 
   * `customClass (date, mode)` -
     An optional expression to add classes based on passing a date and current mode.
-  
+
   * `dateDisabled (date, mode)` -
     An optional expression to disable visible options based on passing a date and current mode.
-  
+
   * `datepickerMode`
     <small class="badge">C</small>
     <i class="glyphicon glyphicon-eye-open"></i>
     _(Default: `day`)_ -
     Current mode of the datepicker _(day|month|year)_. Can be used to initialize the datepicker in a specific mode.
-  
+
   * `formatDay`
     <small class="badge">C</small>
     _(Default: `dd`)_ -
     Format of day in month.
-  
+
   * `formatMonth`
     <small class="badge">C</small>
     _(Default: `MMMM`)_ -
     Format of month in year.
-  
+
   * `formatYear`
     <small class="badge">C</small>
     _(Default: `yyyy`)_ -
     Format of year in year range.
-  
+
   * `formatDayHeader`
     <small class="badge">C</small>
     _(Default: `EEE`)_ -
     Format of day in week header.
-  
+
   * `formatDayTitle`
     <small class="badge">C</small>
     _(Default: `MMMM yyyy`)_ -
     Format of title when selecting day.
-  
+
   * `formatMonthTitle`
     <small class="badge">C</small>
     _(Default: `yyyy`)_ -
     Format of title when selecting month.
-  
+
   * `initDate`
     <i class="glyphicon glyphicon-eye-open"></i>
     _(Default: `null`)_ -
     The initial date view when no model value is specified.
-  
+
   * `maxDate`
     <small class="badge">C</small>
     <i class="glyphicon glyphicon-eye-open"></i>
     _(Default: `null`)_ -
     Defines the maximum available date.
-  
+
   * `maxMode`
     <small class="badge">C</small>
       <i class="glyphicon glyphicon-eye-open"></i>
     _(Default: `year`)_ -
     Sets an upper limit for mode.
-  
+
   * `minDate`
     <small class="badge">C</small>
     <i class="glyphicon glyphicon-eye-open"></i>
     _(Default: `null`)_ -
     Defines the minimum available date.
-  
+
   * `minMode`
     <small class="badge">C</small>
     <i class="glyphicon glyphicon-eye-open"></i>
     _(Default: `day`)_ -
     Sets a lower limit for mode.
-  
+
   * `shortcutPropagation`
     <small class="badge">C</small>
     _(Default: `false`)_ -
     An option to disable the propagation of the keydown event.
-  
+
   * `showWeeks`
     <small class="badge">C</small>
     _(Default: `true`)_ -
     Whether to display week numbers.
-  
+
   * `startingDay`
     <small class="badge">C</small>
     *(Default: `$locale.DATETIME_FORMATS.FIRSTDAYOFWEEK`)* -
@@ -125,109 +123,12 @@ Apart from the previous settings, to configure the uib-datepicker you need to cr
     <small class="badge">C</small>
     _(Default: `4`)_ -
     Number of rows displayed in year selection.
-  
+
   * `yearColumns`
     <small class="badge">C</small>
     _(Default: `5`)_ -
   Number of columns displayed in year selection.
 
-### uib-datepicker-popup settings
-
-The popup is a wrapper that you can use in an input to toggle a datepicker. To configure the datepicker, use `datepicker-options`.
-
-* `alt-input-formats`
-  <small class="badge">$</small>
-  <small class="badge">C</small>
-  _(Default: `[]`)_ -
-  A list of alternate formats acceptable for manual entry.
-
-* `clear-text`
-  <small class="badge">C</small>
-  _(Default: `Clear`)_ -
-  The text to display for the clear button.
-
-* `close-on-date-selection`
-  <small class="badge">$</small>
-  <small class="badge">C</small>
-  _(Default: `true`)_ -
-  Whether to close calendar when a date is chosen.
-
-* `close-text`
-  <small class="badge">C</small>
-  _(Default: `Done`)_ -
-  The text to display for the close button.
-
-* `current-text`
-  <small class="badge">C</small>
-  _(Default: `Today`)_ -
-  The text to display for the current day button.
-
-* `datepicker-append-to-body`
-  <small class="badge">$</small>
-  <small class="badge">C</small>
-  _(Default: `false`, Config: `appendToBody`)_ -
-  Append the datepicker popup element to `body`, rather than inserting after `datepicker-popup`.
-
-* `datepicker-options`
-  <small class="badge">$</small> -
-  An object with any combination of the datepicker settings (in camelCase) used to configure the wrapped datepicker.
-
-* `datepicker-popup-template-url`
-  <small class="badge">C</small>
-  _(Default: `uib/template/datepicker/popup.html`)_ -
-  Add the ability to override the template used on the component.
-
-* `datepicker-template-url`
-  <small class="badge">C</small>
-  _(Default: `uib/template/datepicker/datepicker.html`)_ -
-  Add the ability to override the template used on the component (inner uib-datepicker).
-
-* `is-open`
-  <small class="badge">$</small>
-  <i class="glyphicon glyphicon-eye-open"></i>
-  _(Default: `false`)_ -
-  Whether or not to show the datepicker.
-
-* `on-open-focus`
-  <small class="badge">$</small>
-  <small class="badge">C</small>
-  _(Default: `true`)_ -
-  Whether or not to focus the datepicker popup upon opening.
-
-* `show-button-bar`
-  <small class="badge">$</small>
-  <small class="badge">C</small>
-  _(Default: `true`)_ -
-  Whether or not to display a button bar underneath the uib-datepicker.
-
-* `type`
-  <small class="badge">C</small>
-  _(Default: `text`, Config: `html5Types`)_ -
-  You can override the input type to be _(date|datetime-local|month)_. That will change the date format of the popup.
-
-* `popup-placement`
-   <small class="badge">C</small>
-   _(Default: `auto bottom-left`, Config: 'placement')_ -
-  Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The popup will attempt to position where it fits in the closest scrollable ancestor. Accepts:
-
-   * `top` - popup on top, horizontally centered on input element.
-   * `top-left` - popup on top, left edge aligned with input element left edge.
-   * `top-right` - popup on top, right edge aligned with input element right edge.
-   * `bottom` - popup on bottom, horizontally centered on input element.
-   * `bottom-left` - popup on bottom, left edge aligned with input element left edge.
-   * `bottom-right` - popup on bottom, right edge aligned with input element right edge.
-   * `left` - popup on left, vertically centered on input element.
-   * `left-top` - popup on left, top edge aligned with input element top edge.
-   * `left-bottom` - popup on left, bottom edge aligned with input element bottom edge.
-   * `right` - popup on right, vertically centered on input element.
-   * `right-top` - popup on right, top edge aligned with input element top edge.
-   * `right-bottom` - popup on right, bottom edge aligned with input element bottom edge.
-
-* `uib-datepicker-popup`
-  <small class="badge">C</small>
-  _(Default: `yyyy-MM-dd`, Config: `datepickerConfig`)_ -
-  The format for displayed dates. This string can take string literals by surrounding the value with single quotes, i.e. `yyyy-MM-dd h 'o\'clock'`.
-
 ### Keyboard support
 
 Depending on datepicker's current mode, the date may refer either to day, month or year. Accordingly, the term view refers either to a month, year or year range.
@@ -248,5 +149,3 @@ Depending on datepicker's current mode, the date may refer either to day, month
 **Notes**
 
 If the date a user enters falls outside of the min-/max-date range, a `dateDisabled` validation error will show on the form.
-
-If using this directive on input type date, a native browser datepicker could also appear.

src/datepicker/index.js

@@ -1,17 +1,15 @@
 require('../dateparser');
 require('../isClass');
-require('../position');
 require('../../template/datepicker/datepicker.html.js');
 require('../../template/datepicker/day.html.js');
 require('../../template/datepicker/month.html.js');
 require('../../template/datepicker/year.html.js');
-require('../../template/datepicker/popup.html.js');
 require('./datepicker');
 
 require('./datepicker.css');
 
 var MODULE_NAME = 'ui.bootstrap.module.datepicker';
 
-angular.module(MODULE_NAME, ['ui.bootstrap.datepicker', 'uib/template/datepicker/datepicker.html', 'uib/template/datepicker/day.html', 'uib/template/datepicker/month.html', 'uib/template/datepicker/year.html', 'uib/template/datepicker/popup.html']);
+angular.module(MODULE_NAME, ['ui.bootstrap.datepicker', 'uib/template/datepicker/datepicker.html', 'uib/template/datepicker/day.html', 'uib/template/datepicker/month.html', 'uib/template/datepicker/year.html']);
 
 module.exports = MODULE_NAME;

src/datepickerPopup/docs/demo.html

@@ -0,0 +1,47 @@
+<style>
+  .full button span {
+    background-color: limegreen;
+    border-radius: 32px;
+    color: black;
+  }
+  .partially button span {
+    background-color: orange;
+    border-radius: 32px;
+    color: black;
+  }
+</style>
+<div ng-controller="DatepickerPopupDemoCtrl">
+    <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
+
+    <h4>Popup</h4>
+    <div class="row">
+      <div class="col-md-6">
+        <p class="input-group">
+          <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
+          <span class="input-group-btn">
+            <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
+          </span>
+        </p>
+      </div>
+
+      <div class="col-md-6">
+        <p class="input-group">
+          <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
+          <span class="input-group-btn">
+            <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
+          </span>
+        </p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
+      </div>
+    </div>
+
+    <hr />
+    <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
+    <button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
+    <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
+    <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
+</div>

src/datepickerPopup/docs/demo.js

@@ -0,0 +1,95 @@
+angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
+  $scope.today = function() {
+    $scope.dt = new Date();
+  };
+  $scope.today();
+
+  $scope.clear = function() {
+    $scope.dt = null;
+  };
+
+  $scope.inlineOptions = {
+    customClass: getDayClass,
+    minDate: new Date(),
+    showWeeks: true
+  };
+
+  $scope.dateOptions = {
+    dateDisabled: disabled,
+    formatYear: 'yy',
+    maxDate: new Date(2020, 5, 22),
+    minDate: new Date(),
+    startingDay: 1
+  };
+
+  // Disable weekend selection
+  function disabled(data) {
+    var date = data.date,
+      mode = data.mode;
+    return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
+  }
+
+  $scope.toggleMin = function() {
+    $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
+    $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
+  };
+
+  $scope.toggleMin();
+
+  $scope.open1 = function() {
+    $scope.popup1.opened = true;
+  };
+
+  $scope.open2 = function() {
+    $scope.popup2.opened = true;
+  };
+
+  $scope.setDate = function(year, month, day) {
+    $scope.dt = new Date(year, month, day);
+  };
+
+  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
+  $scope.format = $scope.formats[0];
+  $scope.altInputFormats = ['M!/d!/yyyy'];
+
+  $scope.popup1 = {
+    opened: false
+  };
+
+  $scope.popup2 = {
+    opened: false
+  };
+
+  var tomorrow = new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  var afterTomorrow = new Date();
+  afterTomorrow.setDate(tomorrow.getDate() + 1);
+  $scope.events = [
+    {
+      date: tomorrow,
+      status: 'full'
+    },
+    {
+      date: afterTomorrow,
+      status: 'partially'
+    }
+  ];
+
+  function getDayClass(data) {
+    var date = data.date,
+      mode = data.mode;
+    if (mode === 'day') {
+      var dayToCheck = new Date(date).setHours(0,0,0,0);
+
+      for (var i = 0; i < $scope.events.length; i++) {
+        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
+
+        if (dayToCheck === currentDay) {
+          return $scope.events[i].status;
+        }
+      }
+    }
+
+    return '';
+  }
+});

src/datepickerPopup/docs/readme.md

@@ -0,0 +1,102 @@
+The datepicker popup is meant to be used with an input element. To understand usage of the datepicker, please refer to its documentation [here](https://angular-ui.github.io/bootstrap/#/datepicker).
+
+### uib-datepicker-popup settings
+
+The popup is a wrapper that you can use in an input to toggle a datepicker. To configure the datepicker, use `datepicker-options` as documented in the [inline datepicker](https://angular-ui.github.io/bootstrap/#/datepicker).
+
+* `alt-input-formats`
+<small class="badge">$</small>
+<small class="badge">C</small>
+_(Default: `[]`)_ -
+A list of alternate formats acceptable for manual entry.
+
+* `clear-text`
+<small class="badge">C</small>
+_(Default: `Clear`)_ -
+The text to display for the clear button.
+
+* `close-on-date-selection`
+<small class="badge">$</small>
+<small class="badge">C</small>
+_(Default: `true`)_ -
+Whether to close calendar when a date is chosen.
+
+* `close-text`
+<small class="badge">C</small>
+_(Default: `Done`)_ -
+The text to display for the close button.
+
+* `current-text`
+<small class="badge">C</small>
+_(Default: `Today`)_ -
+The text to display for the current day button.
+
+* `datepicker-append-to-body`
+<small class="badge">$</small>
+<small class="badge">C</small>
+_(Default: `false`, Config: `appendToBody`)_ -
+Append the datepicker popup element to `body`, rather than inserting after `datepicker-popup`.
+
+* `datepicker-options`
+<small class="badge">$</small> -
+An object with any combination of the datepicker settings (in camelCase) used to configure the wrapped datepicker.
+
+* `datepicker-popup-template-url`
+<small class="badge">C</small>
+_(Default: `uib/template/datepickerPopup/popup.html`)_ -
+Add the ability to override the template used on the component.
+
+* `datepicker-template-url`
+<small class="badge">C</small>
+_(Default: `uib/template/datepicker/datepicker.html`)_ -
+Add the ability to override the template used on the component (inner uib-datepicker).
+
+* `is-open`
+<small class="badge">$</small>
+<i class="glyphicon glyphicon-eye-open"></i>
+_(Default: `false`)_ -
+Whether or not to show the datepicker.
+
+* `on-open-focus`
+<small class="badge">$</small>
+<small class="badge">C</small>
+_(Default: `true`)_ -
+Whether or not to focus the datepicker popup upon opening.
+
+* `show-button-bar`
+<small class="badge">$</small>
+<small class="badge">C</small>
+_(Default: `true`)_ -
+Whether or not to display a button bar underneath the uib-datepicker.
+
+* `type`
+<small class="badge">C</small>
+_(Default: `text`, Config: `html5Types`)_ -
+You can override the input type to be _(date|datetime-local|month)_. That will change the date format of the popup.
+
+* `popup-placement`
+ <small class="badge">C</small>
+ _(Default: `auto bottom-left`, Config: 'placement')_ -
+Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The popup will attempt to position where it fits in the closest scrollable ancestor. Accepts:
+
+ * `top` - popup on top, horizontally centered on input element.
+ * `top-left` - popup on top, left edge aligned with input element left edge.
+ * `top-right` - popup on top, right edge aligned with input element right edge.
+ * `bottom` - popup on bottom, horizontally centered on input element.
+ * `bottom-left` - popup on bottom, left edge aligned with input element left edge.
+ * `bottom-right` - popup on bottom, right edge aligned with input element right edge.
+ * `left` - popup on left, vertically centered on input element.
+ * `left-top` - popup on left, top edge aligned with input element top edge.
+ * `left-bottom` - popup on left, bottom edge aligned with input element bottom edge.
+ * `right` - popup on right, vertically centered on input element.
+ * `right-top` - popup on right, top edge aligned with input element top edge.
+ * `right-bottom` - popup on right, bottom edge aligned with input element bottom edge.
+
+* `uib-datepicker-popup`
+<small class="badge">C</small>
+_(Default: `yyyy-MM-dd`, Config: `datepickerConfig`)_ -
+The format for displayed dates. This string can take string literals by surrounding the value with single quotes, i.e. `yyyy-MM-dd h 'o\'clock'`.
+
+**Notes**
+
+If using this directive on input type date, a native browser datepicker could also appear.

src/datepickerPopup/index.js

@@ -0,0 +1,11 @@
+require('../datepicker');
+require('../position');
+require('../../template/datepickerPopup/popup.html.js');
+
+require('./popup.css');
+
+var MODULE_NAME = 'ui.bootstrap.module.datepickerPopup';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.datepickerPopup', 'uib/template/datepickerPopup/popup.html']);
+
+module.exports = MODULE_NAME;

src/datepickerPopup/popup.css

@@ -0,0 +1,9 @@
+.uib-datepicker-popup.dropdown-menu {
+  display: block;
+  float: none;
+  margin: 0;
+}
+
+.uib-button-bar {
+  padding: 10px 9px 2px;
+}