No hover interaction if disableYearOverlay (#132)

qodesmith · Nov 29, 2022 · 252a4c9 · 252a4c9
1 parent a47301f
commit 252a4c9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/cypress/integration/options.js b/cypress/integration/options.js
@@ -680,6 +680,7 @@ describe('User options', function() {
 
         cy.get(singleDatepickerInput).click()
         cy.get(single.overlay).should('have.class', 'qs-hidden')
+        cy.get(`${single.controls} .qs-month-year`).should('have.class', 'qs-disabled-year-overlay')
         cy.get(`${single.controls} .qs-month-year`).click()
         cy.get(single.overlay).should('have.class', 'qs-hidden')
       })

diff --git a/src/datepicker.js b/src/datepicker.js
@@ -742,7 +742,7 @@ function createControls(date, instance, overlayOpen) {
   return [
     '<div class="qs-controls' + (overlayOpen ? ' qs-blur' : '') + '">',
     '<div class="qs-arrow qs-left"></div>',
-    '<div class="qs-month-year">',
+    '<div class="qs-month-year' + (instance.disableYearOverlay ? ' qs-disabled-year-overlay' : '') + '">',
     '<span class="qs-month">' + instance.months[date.getMonth()] + '</span>',
     '<span class="qs-year">' + date.getFullYear() + '</span>',
     '</div>',

diff --git a/src/datepicker.scss b/src/datepicker.scss
@@ -187,10 +187,13 @@ $lightblue: lightblue;
   font-weight: bold;
   transition: border .2s;
   border-bottom: 1px solid transparent;
-  cursor: pointer;
 
-  &:hover {
-    border-bottom: 1px solid gray;
+  &:not(.qs-disabled-year-overlay) {
+    cursor: pointer;
+
+    &:hover {
+      border-bottom: 1px solid gray;
+    }
   }
 
   &:focus,