Bootstrap Datepicker需求：选中日期展示与周末高亮解决方案

Got you covered! Here's a complete implementation that handles both your requirements—showing the selected date in a target div and highlighting weekends:

1. Full Working Code #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Datepicker with Weekend Highlight</title>
    <!-- Include required CSS files (ensure these are in your project directory) -->
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-datepicker.min.css">
    
    <!-- Custom styling for weekend highlight and date display -->
    <style>
        /* Highlight weekend days with a yellow background */
        .weekend-highlight {
            background-color: #ffeb3b !important;
            color: #333 !important;
            font-weight: 500;
        }
        
        /* Style for the date display div */
        #date-display-container {
            margin-top: 20px;
            padding: 12px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h4>Choose a Date</h4>
        <!-- Datepicker input field -->
        <input type="text" id="datepicker" class="form-control w-25" placeholder="Select date">
        
        <!-- Div to show the selected date -->
        <div id="date-display-container">
            Selected Date: <span id="selected-date-text" class="font-weight-bold"></span>
        </div>
    </div>

    <!-- Include required JS files (place these at the end of body for better performance) -->
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="bootstrap-datepicker.min.js"></script>

    <script>
        $(document).ready(function() {
            // Initialize the Bootstrap Datepicker
            $('#datepicker').datepicker({
                format: 'dd/mm/yyyy', // Customize your desired date format here
                autoclose: true, // Close the picker automatically after selection
                beforeShowDay: function(date) {
                    // Check if the day is a weekend (Sunday = 0, Saturday = 6)
                    const dayOfWeek = date.getDay();
                    // Return [enabled, class-name] to apply styling
                    return [true, (dayOfWeek === 0 || dayOfWeek === 6) ? 'weekend-highlight' : ''];
                }
            });

            // Update the display div when a date is selected
            $('#datepicker').on('changeDate', function(event) {
                // Get the formatted date from the picker
                const selectedDate = $('#datepicker').datepicker('getFormattedDate');
                // Insert the date into the target span
                $('#selected-date-text').text(selectedDate);
            });
        });
    </script>
</body>
</html>

2. Breakdown of Key Features #

Weekend Highlighting #

• We use the beforeShowDay callback function, which runs for every day rendered in the datepicker.
• For each date, we check if it's a Saturday (6) or Sunday (0) using date.getDay().
• If it's a weekend, we apply the custom weekend-highlight CSS class to give it a distinct look.

Displaying Selected Date #

• The changeDate event triggers whenever a user picks a date.
• We fetch the formatted date using datepicker('getFormattedDate') (matches the format you set in the initialization).
• We then update the text content of your target div/span with this date.

3. Quick Customization Tips #

• Change Date Format: Adjust the format option (e.g., 'yyyy-mm-dd' for ISO format, 'MM dd, yyyy' for "January 01, 2024").
• Modify Weekend Style: Tweak the weekend-highlight CSS class to change colors, add borders, or adjust font styles.
• Target a Different Div: Replace #selected-date-text with the ID of your specific element where you want to show the date.

Just make sure you have the Bootstrap CSS/JS and Bootstrap Datepicker CSS/JS files downloaded and placed in your project directory (or adjust the file paths to match your setup).

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