Bootstrap date range picker view month and year only

ONLINECAST

2 min read

·

07-10-2024

7

0

Share

Displaying Only Month and Year in Bootstrap Date Range Picker

The Bootstrap Date Range Picker is a powerful tool for allowing users to select date ranges. However, there are times when you only need the user to choose a month and year, not specific days. This article will guide you through customizing the picker to achieve this functionality.

The Problem: By default, Bootstrap Date Range Picker shows a calendar interface with days, weeks, and months.

The Solution: We need to modify the picker's behavior to only display months and years, allowing users to select a period without specifying the exact day.

Scenario: Imagine a website for a business that wants customers to select their preferred vacation month and year for booking. The website uses Bootstrap Date Range Picker for date selection, but only needs the month and year, not the specific days.

Original Code:

<input type="text" id="daterange" name="daterange" />

<script>
  $(function() {
    $('#daterange').daterangepicker();
  });
</script>

Solution:

We can achieve the desired functionality by utilizing the "singleDatePicker" and "showDropdowns" options, and setting the "minDate" and "maxDate" to limit the selection to months and years.

<input type="text" id="daterange" name="daterange" />

<script>
  $(function() {
    $('#daterange').daterangepicker({
      singleDatePicker: true,
      showDropdowns: true,
      minDate: moment().startOf('year'),
      maxDate: moment().add(10, 'years').endOf('year'),
      locale: {
        format: 'MMMM YYYY' // Display month and year
      }
    });
  });
</script>

Explanation:

• singleDatePicker: true: This option tells the picker to only allow selecting one date, which will represent the chosen month and year.
• showDropdowns: true: This displays dropdowns for selecting the month and year instead of the default calendar view.
• minDate and maxDate: These options set the minimum and maximum dates for the picker. In this example, the minimum date is the start of the current year, and the maximum date is 10 years from now.
• locale.format: 'MMMM YYYY': This configures the date format for the picker to display the selected month and year in a human-readable format.

Additional Considerations:

• Customizing the Dropdown: You can modify the locale option to include custom labels for months and years in your desired language.
• Date Range Functionality: While we use singleDatePicker for month and year selection, you can still implement date range selection with this configuration, simply by removing the singleDatePicker option.

Conclusion:

By utilizing these options, you can easily customize Bootstrap Date Range Picker to allow your users to select a month and year without showing the calendar interface. This provides a more intuitive experience for situations where specific days are not relevant.

Remember: You can find more information about Bootstrap Date Range Picker options and customization in the official documentation https://www.daterangepicker.com/.

This article aims to help you understand how to modify Bootstrap Date Range Picker to meet your specific needs. If you encounter any issues or have further questions, feel free to refer to the official documentation or seek support from the community. Happy coding!