refactor(datepicker)

src/datepicker/docs/demo.html

@@ -3,16 +3,14 @@
 
     <h4>Inline</h4>
     <div style="display:inline-block; min-height:290px;">
-      <div class="well well-sm" ng-model="dt">
-          <datepicker min="minDate" show-weeks="showWeeks"></datepicker>
-      </div>
+        <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>
     </div>
 
     <h4>Popup</h4>
     <div class="row">
         <div class="col-md-6">
             <p class="input-group">
-              <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
+              <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
               <span class="input-group-btn">
                 <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
               </span>
@@ -28,7 +26,6 @@ <h4>Popup</h4>
     <hr />
     <button class="btn btn-sm btn-info" ng-click="today()">Today</button>
     <button class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
-    <button class="btn btn-sm btn-success" ng-click="toggleWeeks()" tooltip="For inline datepicker">Toggle Weeks</button>
     <button class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
     <button class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
 </div>

src/datepicker/docs/demo.js

@@ -4,11 +4,6 @@ var DatepickerDemoCtrl = function ($scope) {
   };
   $scope.today();
 
-  $scope.showWeeks = true;
-  $scope.toggleWeeks = function () {
-    $scope.showWeeks = ! $scope.showWeeks;
-  };
-
   $scope.clear = function () {
     $scope.dt = null;
   };
@@ -19,7 +14,7 @@ var DatepickerDemoCtrl = function ($scope) {
   };
 
   $scope.toggleMin = function() {
-    $scope.minDate = ( $scope.minDate ) ? null : new Date();
+    $scope.minDate = $scope.minDate ? null : new Date();
   };
   $scope.toggleMin();
 
@@ -31,10 +26,11 @@ var DatepickerDemoCtrl = function ($scope) {
   };
 
   $scope.dateOptions = {
-    'year-format': '\'yy\'',
-    'starting-day': 1
+    formatYear: 'yy',
+    startingDay: 1
   };
 
+  $scope.initDate = new Date('2016-15-20');
   $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
   $scope.format = $scope.formats[0];
 };

src/datepicker/docs/readme.md

@@ -13,54 +13,70 @@ All settings can be provided as attributes in the `<datepicker>` or globally con
  	:
  	The date object.
 
- * `show-weeks` <i class="glyphicon glyphicon-eye-open"></i>
- 	_(Defaults: true)_ :
- 	Whether to display week numbers.
+ * `datepicker-mode` <i class="glyphicon glyphicon-eye-open"></i>
+   _(Defaults: 'day')_ :
+   Current mode of the datepicker _(day|month|year)_. Can be used to initialize datepicker to specific mode.
 
- * `starting-day`
- 	_(Defaults: 0)_ :
- 	Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).
-
- * `min` <i class="glyphicon glyphicon-eye-open"></i>
+ * `min-date` <i class="glyphicon glyphicon-eye-open"></i>
  	_(Default: null)_ :
  	Defines the minimum available date.
 
- * `max` <i class="glyphicon glyphicon-eye-open"></i>
+ * `max-date` <i class="glyphicon glyphicon-eye-open"></i>
  	_(Default: null)_ :
  	Defines the maximum available date.
 
  * `date-disabled (date, mode)`
  	_(Default: null)_ :
  	An optional expression to disable visible options based on passing date and current mode _(day|month|year)_.
 
- * `day-format`
+ * `show-weeks`
+ 	_(Defaults: true)_ :
+ 	Whether to display week numbers.
+
+ * `starting-day`
+ 	_(Defaults: 0)_ :
+ 	Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).
+
+ * `init-date`
+ 	:
+ 	The initial date view when no model value is not specified.
+
+ * `min-mode`
+   _(Defaults: 'day')_ :
+   Set a lower limit for mode.
+
+ * `max-mode`
+   _(Defaults: 'year')_ :
+   Set an upper limit for mode.
+
+ * `format-day`
  	_(Default: 'dd')_ :
  	Format of day in month.
 
- * `month-format`
+ * `format-month`
  	_(Default: 'MMMM')_ :
  	Format of month in year.
 
- * `year-format`
+ * `format-year`
  	_(Default: 'yyyy')_ :
  	Format of year in year range.
 
- * `year-range`
- 	_(Default: 20)_ :
- 	Number of years displayed in year selection.
-
- * `day-header-format`
+ * `format-day-header`
  	_(Default: 'EEE')_ :
  	Format of day in week header.
 
- * `day-title-format`
+ * `format-day-title-`
  	_(Default: 'MMMM yyyy')_ :
  	Format of title when selecting day.
 
- * `month-title-format`
+ * `format-month-title`
  	_(Default: 'yyyy')_ :
  	Format of title when selecting month.
 
+ * `year-range`
+ 	_(Default: 20)_ :
+ 	Number of years displayed in year selection.
+
 
 ### Popup Settings ###
 
@@ -79,10 +95,6 @@ Specific settings for the `datepicker-popup`, that can globally configured throu
  	_(Default: 'Today')_ :
  	The text to display for the current day button.
 
- * `toggle-weeks-text`
- 	_(Default: 'Weeks')_ :
- 	The text to display for the toggling week numbers button.
-
  * `clear-text`
  	_(Default: 'Clear')_ :
  	The text to display for the clear button.