基于Bootstrap Datepicker实现工作日天数计算的技术问询

Alright, let's get this sorted! You want to show the count of weekdays (no Saturdays or Sundays) between two dates selected via Bootstrap Datepicker, and display that number in your third input field. Here's how to extend your existing code to make this happen:

1. Add a Weekday Count Calculation Function #

First, we need a helper function that takes two date objects and returns the number of weekdays between them. This function will loop through each day in the range, skip Saturdays (day 6) and Sundays (day 0), and count the valid days:

function countWeekdays(startDate, endDate) {
    let count = 0;
    const currentDate = new Date(startDate);
    
    while (currentDate <= endDate) {
        const dayOfWeek = currentDate.getDay();
        // Skip Saturday (6) and Sunday (0)
        if (dayOfWeek !== 0 && dayOfWeek !== 6) {
            count++;
        }
        currentDate.setDate(currentDate.getDate() + 1);
    }
    return count;
}

2. Update Datepicker Event Handlers #

Next, we need to update your existing datepicker code to:

• Keep setting the end date's minimum value when the start date changes (your existing ConfigureToDate() function stays)
• Trigger the weekday calculation whenever either date is modified
• Convert the dd-mm-yyyy formatted dates from the picker into valid JavaScript Date objects (since the Date constructor expects yyyy-mm-dd and uses 0-indexed months)

Here's the modified full code:

$(function() {
    // Configure from-date picker
    $('#from-date').datepicker({
        autoclose: true,
        format: "dd-mm-yyyy",
    }).on('changeDate', function(ev) {
        // Set min date for to-date
        ConfigureToDate();
        // Calculate weekdays when from-date changes
        updateWeekdayCount();
    });

    // Configure to-date picker
    $('#to-date').datepicker({
        autoclose: true,
        format: "dd-mm-yyyy",
        startDate: $('#from-date').val()
    }).on('changeDate', function(ev) {
        // Calculate weekdays when to-date changes
        updateWeekdayCount();
    });

    // Function to set min date for to-date
    function ConfigureToDate() {
        const fromDateVal = $('#from-date').val();
        if (fromDateVal) {
            $('#to-date').datepicker('setStartDate', fromDateVal);
        }
    }

    // Function to update the weekday count in the third input
    function updateWeekdayCount() {
        const fromVal = $('#from-date').val();
        const toVal = $('#to-date').val();

        // Only calculate if both dates are selected
        if (fromVal && toVal) {
            // Convert dd-mm-yyyy to yyyy-mm-dd for Date constructor
            const [fromDay, fromMonth, fromYear] = fromVal.split('-');
            const [toDay, toMonth, toYear] = toVal.split('-');
            
            const startDate = new Date(fromYear, fromMonth - 1, fromDay);
            const endDate = new Date(toYear, toMonth - 1, toDay);

            const weekdayCount = countWeekdays(startDate, endDate);
            // Replace #weekday-count with your third input's actual ID
            $('#weekday-count').val(weekdayCount);
        } else {
            // Clear the count if either date is missing
            $('#weekday-count').val('');
        }
    }

    // Helper function to count weekdays
    function countWeekdays(startDate, endDate) {
        let count = 0;
        const currentDate = new Date(startDate);
        
        while (currentDate <= endDate) {
            const dayOfWeek = currentDate.getDay();
            if (dayOfWeek !== 0 && dayOfWeek !== 6) {
                count++;
            }
            currentDate.setDate(currentDate.getDate() + 1);
        }
        return count;
    }
});

3. Set Up Your HTML Correctly #

Make sure your third input field has the matching ID we used in the code (we went with weekday-count here):

<input type="text" id="from-date" placeholder="From Date">
<input type="text" id="to-date" placeholder="To Date">
<input type="number" id="weekday-count" placeholder="Weekday Count" readonly>

Quick Tips: #

• The readonly attribute on the third input stops users from manually editing the count
• The calculation includes both the start and end dates (e.g., selecting Monday to Monday will count 5 weekdays, skipping the weekend in between)

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