daterangepickerwidget

Integrates the "jQuery UI DateRangePicker" widget as a module. Provides a field type, form element and integration with the Better Exposed Filters module for date fields.
Uses library http://tamble.github.io/jquery-ui-daterangepicker/.

Features

• Adds a new JQuery UI Date Range Picker field type.
• Adds a form element: daterangepicker
• Integrates with Better Exposed Filters for date fields.
• Allows customisation of Javascript API options - e.g. Custom presetRanges.

Dependencies

• jQuery UI DateRangePicker

Installation

1. This module uses Asset Packagist to install the Javascript dependencies. Please setup your project's composer.json to integrate with Asset Packagist.
   More information:
   • https://github.com/drupal-composer/drupal-project/issues/278
   • https://www.drupal.org/project/daterangepickerwidget/issues/3385284#comm...
2. Install with composer. Installing with composer will also install the required dependencies.

Code examples

Custom form element

// feature available in ver 2+
$preset_ranges = [
  [
     'text' => 'Today',
     'dateStart' => "function() { return moment().startOf('day') }",
     'dateEnd' => "function() { return moment() }",
  ],
  [
    'text' => 'Tomorrow',
    'dateStart' => "function() { return moment().add('day', 1).startOf('day') }",
    'dateEnd' => "function() { return moment().add('day', 1).endOf('day') }",
  ],
  [
    'text' => '1 week',
    'dateStart' => "function() { return moment() }",
    'dateEnd' => "function() { return moment().add('days', 6).endOf('day') }",
  ],
];

$form['booking_dates'] = [
  '#type' => 'daterangepicker',
  '#title' => $this->t('Booking Dates'),
  '#description' => $this->t('Please select your booking dates from the date range picker above.'),
  '#required' => TRUE,
  // date range picker options
  '#initial_text' => $this->t('Please choose your dates...'),
  '#range_splitter' => " ".$this->t('to')." ",
  '#number_of_months' => 2,
  // options available in ver 2+
  '#preset_ranges' => $preset_ranges,
  // empty value will hide preset ranges
  // '#preset_ranges' => [],
  // or you can also hide present ranges with option: 
  // '#disable_preset_ranges' => TRUE,
  // disable past dates
  '#min_date' => '+0d',
  // allow booking upto 1 year in the future
  '#max_date' => '+1y',
  // show a dropdown selector for months
  '#month_dropdown' => TRUE,
  // show a dropdown selector for years
  '#year_dropdown' => TRUE,
  // step through the calendars by 2 months
  '#step_months' => 2,
  '#show_week' => TRUE,
  // set a default range
  // '#default_value' => ['start' => '2025-06-01', 'end' => '2025-06-15'],
 '#attributes' => [
    'class' => ['widget-booking-dates'],
  ],
];

Add custom preset ranges to the widget

Consider a view to list articles (views name: articles). The view exposes the Authored on date field with operator Is between. We applied the JQuery UI Date Range Picker widget to this field in Better Exposed Filters settings.
Now we want to customise the preset ranges. We can do this with hook_form_alter:

use Drupal\Core\Form\FormStateInterface;
use Drupal\Component\Serialization\Json;

/**
 * Implements hook_form_FORM_ID_alter().
 */
function HOOK_form_views_exposed_form_alter(array &$form, FormStateInterface $form_state, $form_id) {
    if ($form_id == 'views_exposed_form' && $form_state->get('view')->id() === 'articles') {
        // alter the exposed filter to add more options for the date range picker widget.
        $daterangepicker_element = &$form['created_wrapper']['created_daterangepicker'];
        $presetRanges = [
            [
                'text' => 'Last Week Till Date',
                'dateStart' => "function() { return moment().subtract('week', 1).startOf('week') }",
                'dateEnd' => "function() { return moment() }",
            ],
            [
                'text' => 'Last Month Till Date',
                'dateStart' => "function() { return moment().subtract('month', 1).startOf('month') }",
                'dateEnd' => "function() { return moment() }",
            ],
            [
                'text' => 'Last 3 Months Till Date',
                'dateStart' => "function() { return moment().subtract('months', 3).startOf('month') }",
                'dateEnd' => "function() { return moment() }",
            ],
            [
                'text' => 'Last Year Till Date',
                'dateStart' => "function() { return moment().subtract('year', 1).startOf('year') }",
                'dateEnd' => "function() { return moment() }",
            ],
        ];
        $daterangepicker_element['#attached']['drupalSettings']['daterangepicker']['presetRanges'] = Json::encode($presetRanges);
    }
}

Customise the theme of the JQuery UI daterangepicker widget

The jQuery UI DateRangePicker widget is ThemeRoller-ready.

1. Customise your styles with ThemeRoller and download the theme
2. Copy jquery-ui.css, jquery-ui.theme.css and the images folder to your theme's css folder (if you plan on using libraries-override) or create a new module.
3. If using a module, you can use hook_library_info_alter to alter the library

For example, let us consider we created a new module and moved our jquery-ui theme files to:
[MODULE]/css/jquery-ui/themes/custom/ folder.
In the .module file we can use hook_library_info_alter:

function HOOK_library_info_alter(array &$libraries, $extension) {
    if ($extension === 'daterangepickerwidget') {
        $module = basename(__FILE__, '.module');
        $path = \Drupal::service('extension.list.module')->getPath($module);

        if (isset($libraries['jquery-ui'])) {
            // override jquery-ui base and theme css.
            $libraries['jquery-ui']['css']['theme'] = [
                "/{$path}/css/jquery-ui/themes/custom/jquery-ui.css" => [],
                "/{$path}/css/jquery-ui/themes/custom/jquery-ui.theme.css" => [],
            ];
        }
        
        if (isset($libraries['jquery-ui-daterangepicker'])) {
            // append my custom stylesheet (which override some daterangepicker widget styles)
            $libraries['jquery-ui-daterangepicker']['css']['theme']["/{$path}/css/styles.css"] = [];
        }
    }
}

NOTE: If you want to customise the frontend daterangepicker styles only then you could consider using libraries-override in your custom theme.

Similar projects

• Jquery UI Date Range Picker

Upgrade path from 1.x to 2.x

Please backup your database before upgrading this module. Ver 2.x introduces breaking changes and has dropped support for Drupal 9. Please upgrade to Drupal 10 first.

If using the form element or BEF plugin:

1. Uninstall ver 1.x
2. Upgrade with composer composer require drupal/daterangepickerwidget:^2.0
3. Install the appropriate submodule. For e.g. to use the BEF plugin drush en drpw_bef -y

If using the field type:

1. Upgrade with composer composer require drupal/daterangepickerwidget:^2.0
2. Clear cache
3. Install modules: drush en daterangepickerwidget drpw_field drpw_field -y. Drush will throw errors. Ignore them & ensure all three modules are installed.
4. Clear cache
5. You may want to uninstall drpw_bef