如何在Tempus Dominus Bootstrap 4及Bootstrap datetimepicker中选择整周？

Great question! Both Tempus Dominus (the modern successor to the Eonasdan Bootstrap Datetimepicker) and the original Bootstrap Datetimepicker support week selection—here's how to implement it for both cases:

Tempus Dominus Bootstrap 4: Selecting an Entire Week #

Tempus Dominus has built-in tools for week selection, but you can tweak it to fit your needs whether you want users to click week numbers or any day in the week to select the full week.

1. Enable Week Selection via Configuration #

First, initialize the picker with weekHighlight (to visually highlight weeks) and selectWeek (to make week numbers clickable for full week selection):

$('#datetimepicker').tempusDominus({
    weekHighlight: true,
    selectWeek: true,
    format: 'YYYY-MM-DD' // Adjust format as needed
});

With this setup, clicking a week number in the picker will automatically select all days in that week.

2. Select the Full Week When Clicking Any Day #

If you want users to select the entire week by clicking any day (not just the week number), add a custom event handler. We'll listen for the change.datetimepicker event, calculate the start/end of the week for the clicked date, and set the picker's selection to that range:

$('#datetimepicker').tempusDominus({
    weekHighlight: true,
    selectWeek: false, // Disable default week number selection if preferred
    format: 'YYYY-MM-DD'
}).on('change.datetimepicker', function(e) {
    const selectedDate = e.date;
    if (selectedDate) {
        // Calculate week start (Monday) and end (Sunday) using Moment.js
        const weekStart = selectedDate.clone().startOf('isoWeek');
        const weekEnd = selectedDate.clone().endOf('isoWeek');
        
        // Update the picker to select the entire week
        $(this).tempusDominus('update', [weekStart, weekEnd]);
    }
});

3. Retrieve the Selected Week Dates #

To get the start and end dates of the selected week later, access the picker's instance:

const pickerInstance = $('#datetimepicker').tempusDominus('getInstance');
const selectedDates = pickerInstance.dates;
if (selectedDates.length === 2) {
    const start = selectedDates[0].format('YYYY-MM-DD');
    const end = selectedDates[1].format('YYYY-MM-DD');
    console.log(`Selected week: ${start} to ${end}`);
}

Bootstrap Datetimepicker (Eonasdan Version): Select the Week of a Specified Date #

Absolutely—you can programmatically select the entire week for any given date, or let users trigger it via clicks. Here's how:

1. Initialize the Picker with Week Support #

First, set up the picker with week highlighting and your preferred week start day:

$('#datetimepicker').datetimepicker({
    weekStart: 1, // 1 = Monday, 0 = Sunday (adjust for your locale)
    weekHighlight: true,
    format: 'YYYY-MM-DD'
});

2. Programmatically Select the Week for a Specific Date #

To select the week containing a target date (e.g., "2024-05-20"), calculate the week's start and end using Moment.js, then set the picker's date range:

// Define your target date (can be a string, Moment object, or Date)
const targetDate = moment('2024-05-20');

// Calculate the start and end of the week
const weekStart = targetDate.clone().startOf('isoWeek');
const weekEnd = targetDate.clone().endOf('isoWeek');

// Set the picker to select this entire week
$('#datetimepicker').datetimepicker('setDates', [weekStart, weekEnd]);

3. Let Users Select the Week by Clicking a Day #

If you want users to select the full week when clicking any day, add a dp.change event listener:

$('#datetimepicker').on('dp.change', function(e) {
    if (e.date) {
        const weekStart = e.date.clone().startOf('isoWeek');
        const weekEnd = e.date.clone().endOf('isoWeek');
        
        // Prevent infinite loops by checking if we already set the range
        if (!e.date.isSame(weekStart) || !e.date.isSame(weekEnd)) {
            $(this).datetimepicker('setDates', [weekStart, weekEnd]);
        }
    }
});

Quick Notes #

• Both libraries depend on Moment.js (for Tempus Dominus v5, which is the Bootstrap 4 compatible version), so make sure it's included in your project.
• If your week starts on Sunday instead of Monday, replace isoWeek with week in the Moment.js methods.
• For Tempus Dominus v6 (Bootstrap 5+), the syntax uses Luxon instead of Moment—adjust the date calculations to use Luxon's startOf('week') and endOf('week') methods accordingly.

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