如何通过jQuery Datepicker选择日期展示对应命名格式的图片？

Got it, let's walk through how to finish this up step by step—super straightforward once you hook up the date selection to your image display!

Step 1: Update Your jQuery UI Datepicker Initialization #

First, we'll configure the date range restriction and add a callback to handle date selection. Here's the code to add (or integrate into your existing script):

$(function() {
  // Calculate the date range: past 3 months to today
  const today = new Date();
  const threeMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 3, today.getDate());

  $("#datepicker").datepicker({
    minDate: threeMonthsAgo, // Lock selection to no earlier than 3 months ago
    maxDate: 0, // Lock selection to no later than today (0 = current date)
    onSelect: function(dateText, inst) {
      // Get the selected date object (more reliable than parsing the text string)
      const selectedDate = $(this).datepicker('getDate');
      
      // Format the date to YYMMDD to match your image filename pattern
      const formattedDate = $.datepicker.formatDate('yymmdd', selectedDate);
      
      // Build the full image path (adjust the directory to match your setup!)
      const imagePath = `your-image-directory/${formattedDate}_file.png`;
      
      // Update the image element to display the selected date's image
      $("#selected-image").attr('src', imagePath)
        // Handle cases where no image exists for the selected date
        .on('error', function() {
          $(this).attr('src', 'your-image-directory/placeholder.png'); // Replace with a placeholder image path
          $(this).next('.image-error').text('No image available for this date.');
        })
        .on('load', function() {
          // Clear error message if image loads successfully
          $(this).next('.image-error').text('');
        });
    }
  });
});

Step 2: Add HTML for Image Display #

Next, add an area in your HTML where the selected image will appear. Include a placeholder for error cases if you want:

<!-- Your existing datepicker input -->
<input type="text" id="datepicker">

<!-- Image display container -->
<div class="image-display">
  <img id="selected-image" src="" alt="Daily Image" style="max-width: 100%; height: auto;">
  <p class="image-error" style="color: #dc3545; margin-top: 0.5rem;"></p>
</div>

Key Details to Note: #

• Date Formatting: The 'yymmdd' format string in $.datepicker.formatDate ensures we get exactly the YYMMDD pattern your filenames use (e.g., 180303 for March 3, 2018).
• Path Adjustment: Replace your-image-directory/ with the actual path to your image folder (like images/ or photos/).
• Error Handling: The error event listener catches cases where an image doesn’t exist for a selected date, so you can show a placeholder or message instead of a broken image icon.

Quick Checks: #

• Make sure you’ve included jQuery and jQuery UI’s CSS/JS files in your document (since you already have partial code, you probably have this, but double-check!).
• Verify your image filenames exactly match the YYMMDD_file.png pattern—even a single character mismatch will break the image load.

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