Jquery Slider Month/Year日期格式修改求助：改为MM/YYYY格式

Hey there! Let's get that date display sorted for your jQuery slider. The issue is that you're currently relying on the default toString() method for Date objects, which outputs that full verbose date string. Here's exactly how to adjust it to show MM/YYYY format:

Step 1: Locate the date display code #

First, find the part of your code that updates the displayed date range. This is almost always in the slide or change callback of your slider initialization. It might look something like this:

$( "#slider-range" ).slider({
  range: true,
  min: new Date(2013, 0, 1).getTime(),
  max: new Date(2024, 11, 31).getTime(),
  slide: function( event, ui ) {
    const minDate = new Date(ui.values[0]);
    const maxDate = new Date(ui.values[1]);
    // This line is where the default formatting happens
    $( "#date-display" ).text( minDate + " - " + maxDate );
  }
});

Step 2: Add a date formatting helper (or use jQuery UI's built-in method) #

You have two solid options here:

Option 1: Custom helper function #

If you don't want to rely on jQuery UI's Datepicker, create a simple function to format your Date objects:

function formatMMYYYY(date) {
  // Get month (add 1 because getMonth() returns 0-11) and pad with leading zero
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const year = date.getFullYear();
  return `${month}/${year}`;
}

Option 2: Use jQuery UI Datepicker's built-in formatter #

If you're already using jQuery UI Datepicker (common with date sliders), you can use its formatDate method which handles edge cases nicely:

// Make sure jQuery UI Datepicker is included in your project
const formattedMin = $.datepicker.formatDate('mm/yy', minDate);
const formattedMax = $.datepicker.formatDate('mm/yy', maxDate);

Step 3: Update the display logic #

Replace the default date string concatenation with your formatted dates. Using the custom helper, your slide callback would become:

slide: function( event, ui ) {
  const minDate = new Date(ui.values[0]);
  const maxDate = new Date(ui.values[1]);
  $( "#date-display" ).text( `${formatMMYYYY(minDate)} - ${formatMMYYYY(maxDate)}` );
}

That's it! Your slider will now show the clean MM/YYYY format you want instead of the full long date string.

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