Table of contents

• Introduction
• Requirements
• Installation
• Configuration
• Maintainers

Introduction

The Date Timepicker module adds one of 4 jQuery plugins to any DateTime field in the Widget settings.

Features:

• Available for the DateTime default widget

• Custom options for each plugin supported

• Can be extended (add own jQuery Plugins) by custom module with the hook_timepicker_libraries()

• For a full description of the module visit the: Timepicker Project Page

• To submit bug reports and feature suggestions, or to track changes visit: Issues for Date Timepicker

Requirements

This module requires no modules outside of Drupal core.

The Date Timepicker module requires the following JavaScript libraries:

• [The Jonthornton jQuery Timepicker](https://github.com/jonthornton/jquery -timepicker)
• jQuery UI Timepicker
• [jQuery Timepicker Addon](https://github.com/trentrichardson/jQuery -Timepicker-Addon)
• Flatpickr Plugin

Follow the installation instructions below for installing the module and the libraries.

Installation

1. Install the "Timepicker" module as normal (with composer):

composer require drupal/timepicker-timepicker

2. Install merge plugin using composer require wikimedia/composer-merge-plugin

3. Edit your site's composer.json file and add the following under the "extra" section:

"merge-plugin": {
  "include": [
    "web/modules/contrib/timepicker-timepicker/composer.libraries.json"
  ]
},

4. Run composer update drupal/timepicker-timepicker

5. If you want to install the libraries manually, you will need to:

• Extract the Jonthornton jQuery Timepicker library into the "/libraries/jonthornton-jquery-timepicker" folder.

• Extract the jQuery UI Timepicker library into the "/libraries/jquery-ui-timepicker" folder.

• Extract the jQuery Timepicker Addon library into the "/libraries/jquery-timepicker-addon" folder.

• Extract the Flatpickr library into the "/libraries/flatpickr"

  There is also a composer.libraries.json which you can use to copy and paste the library repositories in your site's composer.json file and use composer to download the libraries

  composer require "jonthornton-jquery-timepicker/jonthornton-jquery-timepicker"
  composer require "jquery-ui-timepicker/jquery-ui-timepicker"
  composer require "jquery-addon-timepicker/jquery-addon-timepicker
  composer require "flatpickr-library/flatpickr-library"

6. Additional steps for installing the flatpickr library

You will need NodeJS and npm installed for these steps, go to the /libraries/flatpickr directory and run:

• npm install to install the library dependencies
• npm run build to compile the library and create a dist directory with the js and css files that the module needs.

Configuration

• Navigate to Administration > Extend and enable the module.
• Navigate to the Manage form display page of the entity type with Date field (the Date field type should have the "Date and Time" Date type).
• Select the "Date and Time" widget type.
• Use widget settings to enable the Timepicker, choose the Timepicker type and apply custom options.

Maintainers

• Ivan Tibezh (tibezh)
• Lilian Catanoi (liliancatanoi90)
• Daniel Rodriguez (danrod)

Supporting organization:

• OPTASY