Last changes to upgrade to 2.0 bootstrap daterangepicker

mtraynham · mtraynham · commit 2981ac263cbc · 2015-10-05T18:00:49.000-04:00
diff --git a/bower.json b/bower.json
@@ -20,6 +20,7 @@
   ],
   "dependencies": {
     "angular": "^1.2.17",
+    "angular-messages": "^1.2.17",
     "bootstrap": "^3.0.0",
     "bootstrap-daterangepicker": "^2.0.0"
   },
diff --git a/coffee/angular-daterangepicker.coffee b/coffee/angular-daterangepicker.coffee
@@ -13,7 +13,7 @@ picker.directive 'dateRangePicker', ($compile, $timeout, $parse, dateRangePicker
   scope:
     min: '='
     max: '='
-    model: '=ngmodel'
+    model: '=ngModel'
     opts: '=options'
     clearable: '='
   link: ($scope, element, attrs, modelCtrl) ->
@@ -22,16 +22,14 @@ picker.directive 'dateRangePicker', ($compile, $timeout, $parse, dateRangePicker
     opts = angular.merge({}, dateRangePickerConfig, customOpts)
     _picker = null
 
-    clear = ->
+    _clear = ->
       _picker.setStartDate()
       _picker.setEndDate()
 
     _setDatePoint = (setter) ->
       (newValue) ->
-        if (_picker)
-          if not newValue
-          then clear()
-          else setter(moment(newValue))
+        if _picker and newValue
+          setter(moment(newValue))
 
     _setStartDate = _setDatePoint (m) ->
       if (_picker.endDate < m)
@@ -43,27 +41,27 @@ picker.directive 'dateRangePicker', ($compile, $timeout, $parse, dateRangePicker
         _picker.setStartDate(m)
       _picker.setEndDate(m)
 
-    #Watchers enable resetting of start and end dates
-    $scope.$watch 'model.startDate', _setStartDate
-    $scope.$watch 'model.endDate', _setEndDate
-
-    _format = (viewVal) ->
+    # Formats the obj into the string for the element input
+    _format = (objValue) ->
       f = (date) ->
         if not moment.isMoment(date)
         then moment(date).format(opts.locale.format)
         else date.format(opts.locale.format)
 
-      if opts.singleDatePicker
-      then f(viewVal.startDate)
-      else [f(viewVal.startDate), f(viewVal.endDate)].join(opts.locale.separator)
+      if objValue and objValue.startDate
+        if opts.singleDatePicker
+        then f(objValue.startDate)
+        else [f(objValue.startDate), f(objValue.endDate)].join(opts.locale.separator)
+      else ''
 
-    _parse = (value) ->
-      f = (val) ->
-        moment(val, opts.locale.format)
-      if opts.singleDatePicker
-      then f(value)
-      else value.split(opts.locale.separator).map(f)
+    # Sets the viewValue as well as updating the input element's value
+    # Note: This is necessary as we don't allow the date picker to update the text (using autoUpdateInput: false)
+    _setViewValue = (objValue) ->
+      value = _format(objValue)
+      el.val(value)
+      modelCtrl.$setViewValue(value)
 
+    # Validation for our min/max
     _validate = (validator) ->
       (boundary, actual) ->
         if boundary and actual
@@ -73,57 +71,74 @@ picker.directive 'dateRangePicker', ($compile, $timeout, $parse, dateRangePicker
     _validateMin = _validate (min, start) -> min.isBefore(start) or min.isSame(start, 'day')
     _validateMax = _validate (max, end) -> max.isAfter(end) or max.isSame(end, 'day')
 
+    # Formatter should return just the string value of the input
+    # It is used for comparison of if we should re-render
     modelCtrl.$formatters.push (val) ->
       if val and val.startDate
       then _format(val)
       else ''
 
+    # Render should update the date picker start/end dates as necessary
+    # It should also set the input element's val with $viewValue as we don't let the rangepicker do this
+    modelCtrl.$render = () ->
+      # Update the calendars
+      if modelCtrl.$modelValue and modelCtrl.$modelValue.startDate
+        _setStartDate(modelCtrl.$modelValue.startDate)
+        _setEndDate(modelCtrl.$modelValue.endDate)
+      else
+        _clear()
+      # Update the input
+      el.val(modelCtrl.$viewValue)
+
+    # This should parse the string input into an updated model object
     modelCtrl.$parsers.push (val) ->
-      # Check if input is valid.
-      value =
+      # Parse the string value
+      f = (value) ->
+        moment(value, opts.locale.format)
+      objValue =
         startDate: null
         endDate: null
       if angular.isString(val) and val.length > 0
-        x = _parse(val)
-        value.startDate = x[0]
-        value.endDate = x[1]
-      value
+        if opts.singleDatePicker
+          objValue.startDate = f(val)
+        else
+          x = val.split(opts.locale.separator).map(f)
+          objValue.startDate = x[0]
+          objValue.endDate = x[1]
+      objValue
 
     modelCtrl.$isEmpty = (val) ->
-      # modelCtrl is empty if val is invalid or any of the ranges are not set.
-      not val or val.startDate == null or val.endDate == null
-
-    modelCtrl.$render = ->
-      if modelCtrl.$modelValue and modelCtrl.$modelValue.startDate != null
-        _setStartDate(modelCtrl.$modelValue.startDate)
-        _setEndDate(modelCtrl.$modelValue.endDate)
-      else
-        clear()
+      # modelCtrl is empty if val is empty string
+      not val and val.length > 0
 
+    # _init has to be called anytime we make changes to the date picker options
     _init = ->
-      el.daterangepicker opts
+      # disable autoUpdateInput, can't handle empty values without it.  Our callback here will
+      # update our $viewValue, which triggers the $parsers
+      el.daterangepicker angular.extend(opts, {autoUpdateInput: false}), (start, end) ->
+        _setViewValue({startDate: start, endDate: end})
 
       # Needs to be after daterangerpicker has been created, otherwise
       # watchers that reinit will be attached to old daterangepicker instance.
       _picker = el.data('daterangepicker')
 
-      #Ability to attach event handlers. See https://github.com/fragaria/angular-daterangepicker/pull/62
+      # Ability to attach event handlers. See https://github.com/fragaria/angular-daterangepicker/pull/62
       for eventType, callbackFunction of opts.eventHandlers
         el.on eventType, () ->
           $scope.$evalAsync(callbackFunction)
 
-      if attrs.clearable
-        locale = opts.locale || {}
-        locale.cancelLabel = opts.clearLabel
-        opts.locale = locale
-
-        el.on 'cancel.daterangepicker', () ->
-          modelCtrl.$setViewValue({startDate: null, endDate: null})
-          modelCtrl.$render()
-          return el.trigger 'change'
-
     _init()
 
+    # Watchers enable resetting of start and end dates
+    # Update the date picker, and set a new viewValue of the model
+    $scope.$watch 'model.startDate', (n) ->
+      _setStartDate(n)
+      _setViewValue($scope.model)
+    $scope.$watch 'model.endDate', (n) ->
+      _setEndDate(n)
+      _setViewValue($scope.model)
+
+    # Add validation/watchers for our min/max fields
     _initBoundaryField = (field, validator, modelField, optName) ->
       if attrs[field]
         modelCtrl.$validators[field] = (value) ->
@@ -135,11 +150,23 @@ picker.directive 'dateRangePicker', ($compile, $timeout, $parse, dateRangePicker
     _initBoundaryField('min', _validateMin, 'startDate', 'minDate')
     _initBoundaryField('max', _validateMax, 'endDate', 'maxDate')
 
+    # Watch our options
     if attrs.options
       $scope.$watch 'opts', (newOpts) ->
-        opts = angular.merge(opts, newOpts, {autoUpdateInput: false})
+        opts = angular.merge(opts, newOpts)
         _init()
       , true
 
+    # Watch clearable flag
+    if attrs.clearable
+      $scope.$watch 'clearable', (newClearable) ->
+        if newClearable
+          opts = angular.merge(opts, {locale: {cancelLabel: opts.clearLabel}})
+        _init()
+        el.on 'cancel.daterangepicker', (
+          if newClearable
+          then _setViewValue.bind(this, {startDate: null, endDate: null})
+          else null)
+
     $scope.$on '$destroy', ->
       _picker?.remove()
diff --git a/example.html b/example.html
@@ -16,6 +16,7 @@
     <!-- bower:js -->
     <script src="lib/jquery/dist/jquery.js"></script>
     <script src="lib/angular/angular.js"></script>
+    <script src="lib/angular-messages/angular-messages.js"></script>
     <script src="lib/bootstrap/dist/js/bootstrap.js"></script>
     <script src="lib/moment/moment.js"></script>
     <script src="lib/bootstrap-daterangepicker/daterangepicker.js"></script>
@@ -28,37 +29,44 @@ <h1>Daterange picker example</h1>
 
     <div class="row">
         <div class="col-md-6" ng-controller="TestCtrl">
-            <form class="form-horizontal">
+            <form name="dateForm" class="form-horizontal">
                 <div class="form-group">
                     <label for="daterange1" class="control-label">Simple picker</label>
-                    <input date-range-picker id="daterange1" class="form-control date-picker" type="text"
-                           name="date" ng-model="date" required/>
+                    <input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text"
+                           ng-model="date" required/>
                 </div>
-                <div class="form-group">
+                <div class="form-group" ng-class="{'has-error': dateForm.daterange2.$invalid}">
                     <label for="daterange2" class="control-label">Picker with min and max date</label>
-                    <input date-range-picker id="daterange2" class="form-control date-picker" type="text"
-                           min="'2014-02-23'" max="'2015-02-25'" name="date" ng-model="date"
+                    <input date-range-picker id="daterange2" name="daterange2" class="form-control date-picker" type="text"
+                           min="'2015-01-23'" max="'2015-08-25'" ng-model="date"
                            required/>
+                    <div class="help-block" ng-messages="dateForm.daterange2.$error">
+                        <p ng-message="min">Start date is too far in the past.</p>
+                        <p ng-message="max">End date is too far in the future.</p>
+                        <p ng-message="required">Range is required.</p>
+                    </div>
                 </div>
                 <div class="form-group">
                     <label for="daterange3" class="control-label">Picker with custom locale</label>
-                    <input date-range-picker id="daterange3" class="form-control date-picker" type="text"
-                           name="date" ng-model="date" options="opts" required/>
+                    <input date-range-picker id="daterange3" name="daterange3" class="form-control date-picker" type="text"
+                           ng-model="date" options="opts" required/>
                 </div>
                 <div class="form-group">
                     <label for="daterange4" class="control-label">Clearable picker</label>
-                    <input date-range-picker id="daterange4" class="form-control date-picker" type="text"
-                           name="date" ng-model="date" clearable="true" required/>
+                    <input date-range-picker id="daterange4" name="daterange4" class="form-control date-picker" type="text"
+                           ng-model="date" clearable="true" required/>
                 </div>
                 <div class="form-group">
                     <label for="daterange5" class="control-label">Picker with custom format</label>
                     <div class="input-group col-md-6" id="daterange5">
                         <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
-                        <input date-range-picker class="form-control date-picker" type="text"
-                           name="date2" ng-model="date2" options="{locale: {format: 'MMMM D, YYYY'}}" required/>
+                        <input date-range-picker name="daterange5" class="form-control date-picker" type="text"
+                           ng-model="date2" options="{locale: {format: 'MMMM D, YYYY'}}" required/>
                         <span class="input-group-addon"><span class="glyphicon glyphicon-chevron-down"></span></span>
                     </div>
                 </div>
+                <button type="button" class="btn" ng-click="setStartDate()">Set Start Date</button>
+                <button type="button" class="btn" ng-click="setRange()">Set Range</button>
             </form>
 
             <div class="row">
@@ -75,7 +83,7 @@ <h4>Dates:</h4>
 
 
 <script>
-exampleApp = angular.module('example', ['daterangepicker']);
+exampleApp = angular.module('example', ['ngMessages', 'daterangepicker']);
 exampleApp.controller('TestCtrl', function($scope) {
     $scope.date = {
         startDate: moment().subtract(1, "days"),
@@ -106,6 +114,17 @@ <h4>Dates:</h4>
         }
     };
 
+    $scope.setStartDate = function () {
+        $scope.date.startDate = moment().subtract(4, "days");
+    };
+
+    $scope.setRange = function () {
+        $scope.date = {
+            startDate: moment().subtract(5, "days"),
+            endDate: moment()
+        };
+    };
+
     //Watch for date changes
     $scope.$watch('date', function(newDate) {
         console.log('New date set: ', newDate);
