Semantic UI DatePicker弹窗超出屏幕及日期选择后过滤失效求助

Hey there! No worries at all—let's work through these two issues with your Semantic UI DatePicker step by step.

1. Fixing Calendar Popup Position & RTL Adaptation #

Popup Overflowing Screen #

Semantic UI's Calendar popup uses the .ui.calendar .calendar class for its container. You can target this specific element to adjust its positioning without affecting the input field. Add this custom CSS to your stylesheet:

/* Adjust popup position to avoid screen overflow */
.ui.calendar .calendar {
  /* For RTL, we'll adjust right instead of left */
  right: 0 !important;
  left: auto !important;
  /* Optional: Add max-width to prevent horizontal overflow */
  max-width: 90vw;
}

/* If the popup still overflows on small screens, add this */
@media (max-width: 768px) {
  .ui.calendar .calendar {
    right: 10px !important;
    width: calc(100vw - 20px);
  }
}

This targets only the popup container, leaving your input field styles completely untouched.

RTL Adaptation Fixes #

Since the RTL CDN didn't work well, let's add custom RTL-specific styles to align the calendar properly for Hebrew:

/* Force RTL direction on the calendar */
.ui.calendar .calendar {
  direction: rtl;
  text-align: right;
}

/* Adjust month/year selector alignment */
.ui.calendar .calendar .month.year select {
  direction: rtl;
  text-align: right;
}

/* Fix arrow button positions for RTL */
.ui.calendar .calendar .prev.button,
.ui.calendar .calendar .next.button {
  float: left; /* Reverse default float for RTL */
}

This will flip the calendar's layout to match Hebrew's right-to-left reading direction perfectly.

2. Trigger Filter After Date Selection #

The issue here is that Semantic UI's Calendar component doesn't fire the standard change event on the input field immediately when a date is selected. Instead, we need to use the component's built-in onChange callback to trigger your filterAll function.

Modify your calendar initialization code like this:

$('#rangestart').calendar({
  type: 'date',
  endCalendar: $('#rangeend'),
  // Keep your existing text, minDate, formatter settings here
  text: {
    days: ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ש'],
    months: ['ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני', 'יולי', 'אוגוסט', 'ספטמבר', 'אוקטובר', 'נובמבר', 'דצמבר'],
    monthsShort: ['ינ', 'פב', 'מרץ', 'אפר', 'מאי', 'יונ', 'יול', 'אוג', 'ספט', 'אוק', 'נוב', 'דצמ'],
    today: 'היום',
    now: 'כעת'
  },
  minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
  monthFirst: false,
  formatter: {
    date: function (date, settings) {
      if (!date) return '';
      var day = date.getDate();
      var month = date.getMonth() + 1;
      var year= date.getFullYear().toString().substr(-2);
      return day + '.' + month + '.' + year;
    }
  },
  onChange: function(date, text) {
    // Update the input field value (just to be safe)
    $('#start_date_picker').val(text);
    // Trigger your filter function immediately
    filterAll();
  }
});

$('#rangeend').calendar({
  type: 'date',
  startCalendar: $('#rangestart'),
  // Keep your existing text, formatter settings here
  text: {
    days: ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ש'],
    months: ['ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני', 'יולי', 'אוגוסט', 'ספטמבר', 'אוקטובר', 'נובמבר', 'דצמבר'],
    monthsShort: ['ינ', 'פב', 'מרץ', 'אפר', 'מאי', 'יונ', 'יול', 'אוג', 'ספט', 'אוק', 'נוב', 'דצמ'],
    today: 'היום',
    now: 'כעת'
  },
  monthFirst: false,
  formatter: {
    date: function (date, settings) {
      if (!date) return '';
      var day = date.getDate();
      var month = date.getMonth() + 1;
      var year= date.getFullYear().toString().substr(-2);
      return day + '.' + month + '.' + year;
    }
  },
  onChange: function(date, text) {
    $('#end_date_picker').val(text);
    filterAll();
  }
});

You can keep your existing event bindings for keyup click change on the input fields (for when users type dates manually), but adding the onChange callback covers the calendar selection case perfectly—your filter will run as soon as a date is picked.

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