new option: dropdowns

wakirin · Mar 25, 2019 · 5ca5731 · 5ca5731
1 parent 09eea6c
commit 5ca5731
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+[1.3.2] - 2019-03-22
+* New option: `dropdowns` 
+
 [1.3.1] - 2019-03-22
 * New option: `inline` (default is `false`)
 

diff --git a/README.md b/README.md
@@ -215,6 +215,23 @@ Disable Saturday and Sunday.
 
 Show calendar inline. If `true` and `parentEl` is not provided then will use `parentNode` of field.
 
+### dropdowns
+- Type: `Object|Boolean`
+- Default: 
+```
+{ 
+    years: { 
+        min: 1900, 
+        max: null, 
+    }, 
+    months: true, 
+}
+```
+Dropdown selections for years, months. Can be `false` for disable both dropdowns. 
+`years` _(Object|Boolean)_ - Object must contains `min` and `max` range of years or can be `false` for disable dropdown of years. 
+`months` _(Boolean)_ - `true/false` for enable/disable dropdown of months. 
+
+
 ### locale
 - Type: `Object`
 - Default: 
@@ -242,10 +259,10 @@ Show calendar inline. If `true` and `parentEl` is not provided then will use `pa
     }
 }
 ```
-`buttons` - Text for buttons
-`tooltip` - Text for tooltip (one, few, many, other)
-`tooltipOnDisabled` (String) - Show tooltip text on disabled dates. (Eg. «Already booked»)
-`pluralize` (function) - Function for calc plural text. More examples for another locales on [betsol/numerous](https://github.com/betsol/numerous/tree/master/locales)
+`buttons` - Text for buttons 
+`tooltip` - Text for tooltip (one, few, many, other) 
+`tooltipOnDisabled` (String) - Show tooltip text on disabled dates. (Eg. «Already booked») 
+`pluralize` (function) - Function for calc plural text. More examples for another locales on [betsol/numerous](https://github.com/betsol/numerous/tree/master/locales) 
 
 ### onSelect
 - Type: `Function`

diff --git a/css/lightpick.css b/css/lightpick.css
@@ -82,6 +82,9 @@
     -webkit-appearance: none;
     appearance: none;
 }
+.lightpick__month-title > .lightpick__select:disabled {
+    color: #333;
+}
 
 .lightpick__month-title > .lightpick__select-months {
     font-weight: bold;

diff --git a/docs/index.html b/docs/index.html
@@ -7,7 +7,7 @@
     <meta name="google-site-verification" content="nERiBNqxg1sFpetHtzwMVydsumihA9YnyytsjfzYEGI" />
     <meta name="description" content="Javascript date range picker - lightweight, no jQuery. Date Range Picker can be attached to input element to pop up one or more calendars for selecting dates.">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="https://unpkg.com/lightpick@1.3.1/css/lightpick.css">
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/lightpick@latest/css/lightpick.css">
 </head>
 <body>
     <div class="container">
@@ -496,6 +496,26 @@ <h2><span class="text-secondary">#</span> <a href="#configuration">Configuration
                     </ul>
                     <p>Show calendar inline. If <code>true</code> and <code>parentEl</code> is not provided then will use <code>parentNode</code> of field.</p>
 
+                    <p class="lead"><code>dropdowns</code></p>
+                    <ul>
+                        <li>Type: <code>Object|Boolean</code></li>
+                        <li>
+                            Default: <br>
+                            <code>
+                                { <br>
+                                &nbsp;&nbsp;years: { <br>
+                                &nbsp;&nbsp;&nbsp;&nbsp;min: 1900, <br>
+                                &nbsp;&nbsp;&nbsp;&nbsp;max: null, <br>
+                                &nbsp;&nbsp;}, <br>
+                                &nbsp;&nbsp;months: true, <br>
+                                }
+                            </code>
+                        </li>
+                    </ul>
+                    <p>Dropdown selections for years, months. Can be <code>false</code> for disable both dropdowns. <br>
+                        <code>years</code> <i>(Object|Boolean)</i> - Object must contains <code>min</code> and <code>max</code> range of years or can be <code>false</code> for disable dropdown of years. <br>
+                        <code>months</code> <i>(Boolean)</i> - <code>true/false</code> for enable/disable dropdown of months. </p>
+
                     <p class="lead"><code>locale</code></p>
                     <ul>
                         <li>Type: <code>Object</code></li>
@@ -651,7 +671,7 @@ <h2><span class="text-secondary">#</span> <a href="#license">License</a></h2>
 
     <script async src="https://buttons.github.io/buttons.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
-    <script type="text/javascript" src="https://unpkg.com/lightpick@1.3.1/lightpick.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/lightpick@latest/lightpick.js"></script>
     <script type="text/javascript" src="demo.js"></script>
 </body>
 </html>
diff --git a/lightpick.js b/lightpick.js
@@ -46,10 +46,6 @@
         selectBackward: false,
         minDays: null,
         maxDays: null,
-        onSelect: null,
-        onOpen: null,
-        onClose: null,
-        onError: null,
         hoveringTooltip: true,
         hideOnBodyClick: true,
         footer: false,
@@ -58,9 +54,12 @@
         orientation: 'auto',
         disableWeekends: false,
         inline: false,
-        years: {
-            min: 1900,
-            max: null,
+        dropdowns: {
+            years: {
+                min: 1900,
+                max: null,
+            },
+            months: true,
         },
         locale: {
             buttons: {
@@ -82,8 +81,13 @@
                 if ('other' in locale) return locale.other;
 
                 return '';
-            }
+            },
         },
+
+        onSelect: null,
+        onOpen: null,
+        onClose: null,
+        onError: null,
     },
 
     renderTopButtons = function(opts)
@@ -279,6 +283,10 @@
 
         // for text align to right
         select.dir = 'rtl';
+
+        if (!opts.dropdowns || !opts.dropdowns.months) {
+            select.disabled = true;
+        }
 
         return select.outerHTML;
     },
@@ -287,8 +295,9 @@
     {
         var d = moment(date),
             select = document.createElement('select'),
-            minYear = opts.years.min ? opts.years.min : 1900,
-            maxYear = opts.years.max ? opts.years.max : Number.parseInt(moment().format('YYYY'));
+            years = opts.dropdowns && opts.dropdowns.years ? opts.dropdowns.years : null,
+            minYear = years && years.min ? years.min : 1900,
+            maxYear = years && years.max ? years.max : Number.parseInt(moment().format('YYYY'));
 
         if (Number.parseInt(date.format('YYYY')) < minYear) {
             minYear = Number.parseInt(date.format('YYYY'));
@@ -314,6 +323,10 @@
 
         select.className = 'lightpick__select lightpick__select-years';
 
+        if (!opts.dropdowns || !opts.dropdowns.years) {
+            select.disabled = true;
+        }
+
         return select.outerHTML;
     },
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lightpick",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Javascript date range picker - lightweight, no jQuery",
   "main": "lightpick.js",
   "scripts": {