如何在不修改picker.date.js的前提下重写DatePicker的createYearLabel原型函数

Hey there! Great question—tweaking a library's behavior without editing its source code is such a smart move (it saves you from merge conflicts or lost changes when the library gets updated). Let me walk you through exactly how to do this, step by step.

First: Do you need to import the original picker.date.js file? #

Absolutely. Your custom code needs to run after the original DatePicker class has been loaded and defined. Otherwise, your script won't find the DatePicker prototype to modify.

Override Structure (Two Common Scenarios) #

Scenario 1: Traditional Browser Scripts (No ES Modules) #

If you're loading scripts via <script> tags in an HTML file:

1. Load the original picker.date.js first
2. Load your custom override script right after it

Here's what your custom script (e.g., custom-datepicker-overrides.js) would look like:

// Make sure the original DatePicker exists before modifying it
if (typeof DatePicker !== 'undefined' && DatePicker.prototype?.nodes?.createYearLabel) {
  // Option 1: Completely replace the method with your own logic
  DatePicker.prototype.nodes.createYearLabel = function() {
    // Your custom implementation here
    const yearLabel = document.createElement('div');
    yearLabel.textContent = `Selected Year: ${this.year}`;
    yearLabel.classList.add('custom-year-label');
    return yearLabel;
  };

  // Option 2: Keep the original logic and modify its output
  // const originalMethod = DatePicker.prototype.nodes.createYearLabel;
  // DatePicker.prototype.nodes.createYearLabel = function() {
  //   // Call the original method to get the default label
  //   const originalLabel = originalMethod.call(this);
  //   // Tweak the label however you want
  //   originalLabel.style.fontWeight = 'bold';
  //   originalLabel.textContent = `Year: ${this.year}`;
  //   return originalLabel;
  // };
}

And your HTML would load scripts in this order:

<script src="path/to/picker.date.js"></script>
<script src="path/to/custom-datepicker-overrides.js"></script>

Scenario 2: ES Modules (Modern Projects with import/export) #

If your project uses ES modules (e.g., with Webpack, Vite, or plain browser modules):

1. Import the original DatePicker class into your override file
2. Modify its prototype directly
3. Import this override file before you create any DatePicker instances

Example override file (custom-datepicker-overrides.js):

import DatePicker from './path/to/picker.date.js';

// Check if the method exists to avoid errors
if (DatePicker.prototype.nodes.createYearLabel) {
  // Save the original method if you want to reuse it
  const originalCreateYearLabel = DatePicker.prototype.nodes.createYearLabel;

  DatePicker.prototype.nodes.createYearLabel = function() {
    // Either use the original logic and modify it...
    const label = originalCreateYearLabel.call(this);
    label.innerHTML = `<span class="year-highlight">${this.year}</span>`;

    // ...or write a completely custom implementation
    // const yearLabel = document.createElement('span');
    // yearLabel.textContent = `Year ${this.year}`;
    // return yearLabel;

    return label;
  };
}

Then, in your main application code, import the override first:

// Import the override to apply changes
import './custom-datepicker-overrides.js';
// Now import and use DatePicker as usual
import DatePicker from './path/to/picker.date.js';

const picker = new DatePicker('#date-input');
// This picker will use your overridden createYearLabel method!

Key Notes #

• Check for existence: Always verify that DatePicker and the target method exist before modifying them—this prevents runtime errors if the library's structure changes or fails to load.
• Preserve this context: When calling the original method (if you reuse it), use call(this) to ensure the correct context is passed to the original function.
• Load order matters: Your override must run after the original library is loaded (whether via script tag order or module import order).

内容的提问来源于stack exchange，提问作者nimrod