refactor: rename date picker component files and references from date_picker to picker across JavaScript and Django bindings.

Author: 4mritGiri

bindings/django/.gitignore

@@ -14,5 +14,5 @@ venv/
 
 # JavaScript build artifacts (copied via sync)
 npdatetime_django/static/npdatetime_django/js/pkg/
-npdatetime_django/static/npdatetime_django/js/date_picker.min.js
-npdatetime_django/static/npdatetime_django/css/date_picker.css
+npdatetime_django/static/npdatetime_django/js/picker.min.js
+npdatetime_django/static/npdatetime_django/css/picker.css

bindings/django/DEVELOPER.md

@@ -10,19 +10,19 @@ The Django package lives in `bindings/django/` but depends on assets from `bindi
 npdatetime/
 ├── bindings/
 │   ├── javascript/              # Source of truth for UI
-│   │   ├── date_picker.js      # Main date picker
-│   │   ├── date_picker.css     # Styles
+│   │   ├── picker.js      # Main date picker
+│   │   ├── picker.css     # Styles
 │   │   └── pkg/                # WASM bindings
 │   │
 │   └── django/                 # Django package
 │       ├── build_assets.py     # Asset sync script ⭐
 │       ├── npdatetime_django/
 │       │   └── static/npdatetime_django/
 │       │       ├── js/
-│       │       │   ├── date_picker.min.js  # Copied from ../javascript/
+│       │       │   ├── picker.min.js  # Copied from ../javascript/
 │       │       │   └── pkg/                # Copied from ../javascript/
 │       │       └── css/
-│       │           └── date_picker.css     # Copied from ../javascript/
+│       │           └── picker.css     # Copied from ../javascript/
 ```
 
 ## Important: Single Source of Truth
@@ -34,8 +34,8 @@ These files are **copied** from `bindings/javascript/`. If you edit them directl
 ### Workflow When Updating JavaScript/CSS
 
 1. **Edit the source files** in `bindings/javascript/`:
-   - `date_picker.js`
-   - `date_picker.css`
+   - `picker.js`
+   - `picker.css`
 
 2. **Run the build script** to sync to Django:
    ```bash
@@ -53,8 +53,8 @@ These files are **copied** from `bindings/javascript/`. If you edit them directl
 
 4. **Commit both locations** if needed:
    ```bash
-   git add bindings/javascript/date_picker.js
-   git add bindings/django/npdatetime_django/static/npdatetime_django/js/date_picker.min.js
+   git add bindings/javascript/picker.js
+   git add bindings/django/npdatetime_django/static/npdatetime_django/js/picker.min.js
    git commit -m "Update date picker UI"
    ```
 
@@ -63,8 +63,8 @@ These files are **copied** from `bindings/javascript/`. If you edit them directl
 ### What It Does
 
 The `build_assets.py` script:
-- Copies `date_picker.js` → `static/npdatetime_django/js/date_picker.min.js`
-- Copies `date_picker.css` → `static/npdatetime_django/css/date_picker.css`
+- Copies `picker.js` → `static/npdatetime_django/js/picker.min.js`
+- Copies `picker.css` → `static/npdatetime_django/css/picker.css`
 - Copies `pkg/` directory → `static/npdatetime_django/js/pkg/`
 
 ### When to Run It
@@ -156,7 +156,7 @@ twine upload dist/*
 ### Update JavaScript Only
 
 ```bash
-# 1. Edit bindings/javascript/date_picker.js
+# 1. Edit bindings/javascript/picker.js
 # 2. Run build script
 cd bindings/django
 python3 build_assets.py
@@ -177,7 +177,7 @@ python3 build_assets.py
 ### Update CSS Styles
 
 ```bash
-# 1. Edit bindings/javascript/date_picker.css
+# 1. Edit bindings/javascript/picker.css
 # 2. Run build script
 cd bindings/django
 python3 build_assets.py

bindings/django/README.md

@@ -34,8 +34,8 @@ python build_assets.py
 ```
 
 This copies:
-- `date_picker.js` → `static/npdatetime_django/js/date_picker.min.js`
-- `date_picker.css` → `static/npdatetime_django/css/date_picker.css`
+- `picker.js` → `static/npdatetime_django/js/picker.min.js`
+- `picker.css` → `static/npdatetime_django/css/picker.css`
 - `pkg/` → `static/npdatetime_django/js/pkg/`
 
 ## Installation

bindings/django/WORKFLOW.md

@@ -3,19 +3,19 @@
 ## The Key Point
 
 **JavaScript/CSS files have ONE source location:**
-- ✅ Source: `bindings/javascript/date_picker.js` 
-- ✅ Source: `bindings/javascript/date_picker.css`
-- ❌ Copy: `bindings/django/npdatetime_django/static/.../date_picker.min.js`
-- ❌ Copy: `bindings/django/npdatetime_django/static/.../date_picker.css`
+- ✅ Source: `bindings/javascript/picker.js` 
+- ✅ Source: `bindings/javascript/picker.css`
+- ❌ Copy: `bindings/django/npdatetime_django/static/.../picker.min.js`
+- ❌ Copy: `bindings/django/npdatetime_django/static/.../picker.css`
 
 ## Your Workflow
 
 ### When You Update JavaScript/CSS:
 
 ```bash
 # 1. Edit the source files
-vim bindings/javascript/date_picker.js
-vim bindings/javascript/date_picker.css
+vim bindings/javascript/picker.js
+vim bindings/javascript/picker.css
 
 # 2. Sync to Django package
 cd bindings/django
@@ -25,7 +25,7 @@ python3 build_assets.py
 # Changes are automatically reflected
 
 # 4. Commit (if satisfied)
-git add bindings/javascript/date_picker.js
+git add bindings/javascript/picker.js
 git add bindings/django/npdatetime_django/static/...
 git commit -m "Update date picker"
 ```
@@ -34,8 +34,8 @@ git commit -m "Update date picker"
 
 ```python
 # Copies these files:
-../javascript/date_picker.js    → static/.../js/date_picker.min.js
-../javascript/date_picker.css   → static/.../css/date_picker.css
+../javascript/picker.js    → static/.../js/picker.min.js
+../javascript/picker.css   → static/.../css/picker.css
 ../javascript/pkg/*             → static/.../js/pkg/*
 ```
 
@@ -50,8 +50,8 @@ git commit -m "Update date picker"
 
 | Task | Command |
 |------|---------|
-| Update JavaScript | Edit `bindings/javascript/date_picker.js` |
-| Update CSS | Edit `bindings/javascript/date_picker.css` |
+| Update JavaScript | Edit `bindings/javascript/picker.js` |
+| Update CSS | Edit `bindings/javascript/picker.css` |
 | Sync to Django | `python3 build_assets.py` |
 | Install for dev | `pip install -e .` |
 | Build package | `python setup.py sdist bdist_wheel` |

bindings/django/build_assets.py

@@ -26,19 +26,19 @@ def main():
 
     # Copy JavaScript files
     print("   Copying JavaScript files...")
-    js_file = js_source / "date_picker.js"
+    js_file = js_source / "picker.js"
     if js_file.exists():
-        shutil.copy2(js_file, django_static / "js" / "date_picker.min.js")
-        print(f"   ✓ {js_file.name} → date_picker.min.js")
+        shutil.copy2(js_file, django_static / "js" / "picker.min.js")
+        print(f"   ✓ {js_file.name} → picker.min.js")
     else:
         print(f"   ⚠ Warning: {js_file} not found")
 
     # Copy CSS files
     print("   Copying CSS files...")
-    css_file = js_source / "date_picker.css"
+    css_file = js_source / "picker.css"
     if css_file.exists():
-        shutil.copy2(css_file, django_static / "css" / "date_picker.css")
-        print(f"   ✓ {css_file.name} → date_picker.css")
+        shutil.copy2(css_file, django_static / "css" / "picker.css")
+        print(f"   ✓ {css_file.name} → picker.css")
     else:
         print(f"   ⚠ Warning: {css_file} not found")
 
@@ -56,8 +56,8 @@ def main():
 
     print("\n✅ Assets built successfully!")
     print("\n📝 Summary:")
-    print("   - date_picker.js → date_picker.min.js")
-    print("   - date_picker.css → date_picker.css")
+    print("   - picker.js → picker.min.js")
+    print("   - picker.css → picker.css")
     print("   - pkg/ → js/pkg/")
     print("\n💡 Tip: Run 'python build_assets.py' whenever you update the JavaScript/CSS files")
 

bindings/django/build_assets.sh

@@ -17,11 +17,11 @@ mkdir -p "$DJANGO_STATIC/css"
 
 # Copy JavaScript files
 echo "   Copying JavaScript files..."
-cp "$JS_SOURCE/date_picker.js" "$DJANGO_STATIC/js/date_picker.min.js"
+cp "$JS_SOURCE/picker.js" "$DJANGO_STATIC/js/picker.min.js"
 
 # Copy CSS files
 echo "   Copying CSS files..."
-cp "$JS_SOURCE/date_picker.css" "$DJANGO_STATIC/css/date_picker.css"
+cp "$JS_SOURCE/picker.css" "$DJANGO_STATIC/css/picker.css"
 
 # Copy WASM package
 echo "   Copying WASM bindings..."
@@ -35,8 +35,8 @@ fi
 echo "✅ Assets built successfully!"
 echo ""
 echo "📝 Summary:"
-echo "   - date_picker.js → date_picker.min.js"
-echo "   - date_picker.css → date_picker.css"
+echo "   - picker.js → picker.min.js"
+echo "   - picker.css → picker.css"
 echo "   - pkg/ → js/pkg/"
 echo ""
 echo "💡 Tip: Run './build_assets.sh' whenever you update the JavaScript/CSS files"

bindings/django/npdatetime_django/static/npdatetime_django/js/date_picker.min.js

@@ -707,7 +707,7 @@ export class NepaliDatePicker {
 
         const dayText =
           this.options.language === "np" ? this.toNepaliNum(day) : day;
-        html += `<button type="button" class="npd-day npd-overflow ${isHoliday ? "holiday" : ""}" data-day="${day}" data-month-offset="-1">${dayText}</button>`;
+        html += `<div role="button" tabindex="0" class="npd-day npd-overflow ${isHoliday ? "holiday" : ""}" data-day="${day}" data-month-offset="-1">${dayText}</div>`;
       }
 
       const todayBS = NepaliDate.today();
@@ -771,7 +771,7 @@ export class NepaliDatePicker {
           // Tithi calculation failed or feature disabled
         }
 
-        html += `<button type="button" class="${classes}" data-day="${day}" data-month-offset="0" data-details="${details}">${dayText}</button>`;
+        html += `<div role="button" tabindex="0" class="${classes}" data-day="${day}" data-month-offset="0" data-details="${details}">${dayText}</div>`;
       }
 
       // Next month overflow
@@ -783,7 +783,7 @@ export class NepaliDatePicker {
 
         const dayText =
           this.options.language === "np" ? this.toNepaliNum(day) : day;
-        html += `<button type="button" class="npd-day npd-overflow ${isHoliday ? "holiday" : ""}" data-day="${day}" data-month-offset="1">${dayText}</button>`;
+        html += `<div role="button" tabindex="0" class="npd-day npd-overflow ${isHoliday ? "holiday" : ""}" data-day="${day}" data-month-offset="1">${dayText}</div>`;
       }
     } else {
       const date = new Date(this.viewDate.year, this.viewDate.month - 1, 1);
@@ -804,7 +804,7 @@ export class NepaliDatePicker {
         const cellIndex = startWeekday - 1 - i;
         const isHoliday = cellIndex % 7 === 0; // Sunday logic for AD
         const day = daysInPrevMonth - i;
-        html += `<button type="button" class="npd-day npd-overflow ${isHoliday ? "holiday" : ""}" data-day="${day}" data-month-offset="-1">${day}</button>`;
+        html += `<div role="button" tabindex="0" class="npd-day npd-overflow ${isHoliday ? "holiday" : ""}" data-day="${day}" data-month-offset="-1">${day}</div>`;
       }
 
       const [selY, selM, selD] = this.selectedDate
@@ -863,7 +863,7 @@ export class NepaliDatePicker {
           if (isInRange) classes += " in-range";
         }
 
-        html += `<button type="button" class="${classes}" data-day="${day}" data-month-offset="0">${day}</button>`;
+        html += `<div role="button" tabindex="0" class="${classes}" data-day="${day}" data-month-offset="0">${day}</div>`;
       }
 
       // Next month overflow
@@ -872,7 +872,7 @@ export class NepaliDatePicker {
       for (let day = 1; day <= totalCells - currentCells; day++) {
         const cellIndex = currentCells + day - 1;
         const isHoliday = cellIndex % 7 === 0; // Sunday for AD
-        html += `<button type="button" class="npd-day npd-overflow ${isHoliday ? "holiday" : ""}" data-day="${day}" data-month-offset="1">${day}</button>`;
+        html += `<div role="button" tabindex="0" class="npd-day npd-overflow ${isHoliday ? "holiday" : ""}" data-day="${day}" data-month-offset="1">${day}</div>`;
       }
     }
 
@@ -907,6 +907,14 @@ export class NepaliDatePicker {
           }
         });
 
+        // Keyboard accessibility for div elements
+        btn.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            btn.click();
+          }
+        });
+
         // Tooltip Events
         this.elements.daysView
           .querySelectorAll(".npd-day[data-details]")
@@ -1006,7 +1014,7 @@ export class NepaliDatePicker {
       const isSelected =
         this.selectedDate?.year === this.viewDate.year &&
         this.selectedDate?.month === index + 1;
-      html += `<button type="button" class="npd-month ${isSelected ? "selected" : ""}" data-month="${index + 1}">${month}</button>`;
+      html += `<div role="button" tabindex="0" class="npd-month ${isSelected ? "selected" : ""}" data-month="${index + 1}">${month}</div>`;
     });
     html += "</div>";
 
@@ -1019,6 +1027,14 @@ export class NepaliDatePicker {
         this.viewMode = "days";
         this.render();
       });
+
+      // Keyboard accessibility
+      btn.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          btn.click();
+        }
+      });
     });
   }
 
@@ -1032,7 +1048,7 @@ export class NepaliDatePicker {
       const isSelected = this.selectedDate?.year === year;
       const yearText =
         this.options.language === "np" ? this.toNepaliNum(year) : year;
-      html += `<button type="button" class="npd-year ${isSelected ? "selected" : ""}" data-year="${year}">${yearText}</button>`;
+      html += `<div role="button" tabindex="0" class="npd-year ${isSelected ? "selected" : ""}" data-year="${year}">${yearText}</div>`;
     }
     html += "</div>";
 
@@ -1045,6 +1061,14 @@ export class NepaliDatePicker {
         this.viewMode = "months";
         this.render();
       });
+
+      // Keyboard accessibility
+      btn.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          btn.click();
+        }
+      });
     });
   }
 

…datetime_django/widgets/date_picker.html …es/npdatetime_django/widgets/picker.htmlbindings/django/npdatetime_django/templates/npdatetime_django/widgets/date_picker.html renamed to bindings/django/npdatetime_django/templates/npdatetime_django/widgets/picker.html bindings/django/npdatetime_django/templates/npdatetime_django/widgets/date_picker.html renamed to bindings/django/npdatetime_django/templates/npdatetime_django/widgets/picker.html

@@ -1,5 +1,7 @@
 {% load static %}
 
+<link rel="stylesheet" href="{% static 'npdatetime_django/css/picker.css' %}">
+
 <input 
    type="{{ widget.type }}" 
    name="{{ widget.name }}"
@@ -10,7 +12,7 @@
 >
 
 <script type="module">
-  import { NepaliDatePicker } from '{% static "npdatetime_django/js/date_picker.min.js" %}';
+  import { NepaliDatePicker } from '{% static "npdatetime_django/js/picker.min.js" %}';
 
   document.addEventListener('DOMContentLoaded', function() {
     const input = document.querySelector('input[name="{{ widget.name }}"]');

bindings/django/npdatetime_django/widgets.py

@@ -35,14 +35,14 @@ class PersonForm(forms.Form):
     """
 
     input_type = 'text'
-    template_name = 'npdatetime_django/widgets/date_picker.html'
+    template_name = 'npdatetime_django/widgets/picker.html'
 
     class Media:
         css = {
-            'all': ('npdatetime_django/css/date_picker.css',)
+            'all': ('npdatetime_django/css/picker.css',)
         }
         js = (
-            'npdatetime_django/js/date_picker.min.js',
+            'npdatetime_django/js/picker.min.js',
         )
 
     def __init__(self, attrs=None, mode='BS', language='en', include_time=False,