为指定类/ID输入框生成的JavaScript日期选择器添加类及顶部箭头

Hey Helen, no stress about not being deep into JavaScript—let’s work through your two date picker needs clearly, using common libraries (I’ll start with jQuery UI since it’s widely used, and add a quick note for Flatpickr too if that’s what you’re using).

1. Add a Custom Class to Date Pickers for Specific Inputs #

To add a class to the date picker generated from inputs with a specific class (like picker-open) or ID, we can hook into the date picker’s initialization event to modify its widget element.

Example with jQuery UI: #

First, make sure you’ve included jQuery and jQuery UI in your page. Then add this script:

$(document).ready(function() {
  // Target inputs with class "picker-open" (or replace with your ID, e.g., "#your-input-id")
  $('.picker-open').datepicker({
    dateFormat: 'YYYY-MM-DD', // Match your input's data-date-format
    // This event runs when the date picker is created
    create: function() {
      // Get the date picker widget element and add your custom class
      $(this).datepicker('widget').addClass('your-custom-datepicker-class');
    }
  });
});

• Replace your-custom-datepicker-class with whatever class name you want to use.
• If targeting an ID instead of a class, swap .picker-open with #your-input-id.

2. Add a Top Arrow to Date Pickers from "Inline" Inputs #

For inputs marked with class="inline-calendar", we’ll first add a unique class to their associated date picker, then use CSS to create the top arrow (using pseudo-elements).

Step 1: Add a Unique Class to the Inline Date Picker #

Using jQuery UI again:

$(document).ready(function() {
  $('.inline-calendar').datepicker({
    dateFormat: 'YYYY-MM-DD',
    create: function() {
      $(this).datepicker('widget').addClass('datepicker-with-top-arrow');
    }
  });
});

Step 2: Add CSS for the Top Arrow #

Add this to your stylesheet to create the arrow (adjust colors to match your date picker’s design):

/* Make sure the date picker widget is positioned relative for the arrow */
.datepicker-with-top-arrow {
  position: relative;
}

/* White inner arrow */
.datepicker-with-top-arrow::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
  z-index: 10;
}

/* Border arrow (match your date picker's border color) */
.datepicker-with-top-arrow::after {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent #cccccc transparent;
}

This creates a two-layer arrow (white fill + gray border) that sits centered at the top of the date picker.

Note for Flatpickr Users #

If you’re using Flatpickr instead of jQuery UI, the approach is similar but uses different events:

// Add class to picker for specific inputs
$('.picker-open').flatpickr({
  dateFormat: 'Y-m-d',
  onReady: function(selectedDates, dateStr, instance) {
    instance.calendarContainer.classList.add('your-custom-datepicker-class');
  }
});

// Add arrow class for inline inputs
$('.inline-calendar').flatpickr({
  dateFormat: 'Y-m-d',
  onReady: function(selectedDates, dateStr, instance) {
    instance.calendarContainer.classList.add('datepicker-with-top-arrow');
  }
});

The CSS for the arrow will work the same way as above.

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