Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vallic/single_datetime
Drupal 8 date time picker form element using the xdan jQuery Plugin Date and Time Picker library
https://github.com/vallic/single_datetime
datetime datetime-range-fields drupal drupal-8 drupal-module drupal-modules drupal8 exposed-filters jquery-datepicker
Last synced: about 1 month ago
JSON representation
Drupal 8 date time picker form element using the xdan jQuery Plugin Date and Time Picker library
- Host: GitHub
- URL: https://github.com/vallic/single_datetime
- Owner: Vallic
- Created: 2017-03-05T12:43:03.000Z (over 7 years ago)
- Default Branch: 8.x-1.x
- Last Pushed: 2021-09-24T20:08:12.000Z (about 3 years ago)
- Last Synced: 2024-09-27T10:41:10.234Z (about 2 months ago)
- Topics: datetime, datetime-range-fields, drupal, drupal-8, drupal-module, drupal-modules, drupal8, exposed-filters, jquery-datepicker
- Language: PHP
- Homepage: https://vallic.com
- Size: 76.2 KB
- Stars: 3
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
CONTENTS OF THIS FILE
---------------------
* Introduction
* Requirements
* Installation
* Configuration
* Views exposed filters
* Maintainers
INTRODUCTION
------------
The Single Date Time Picker module supports date/time and date fields. You can
use it on Datetime and Datetime Range fields.
Features:
* Support Datetime and Datetime Range field types
* Support for Views exposed filters
* 12/24 hour format display
* Option to choose granularity for minutes
* Option to disable specific days global (etc. Saturday)
* Option to disable specific dates, useful for holidays, working days, etc.
* For a full description of the module visit:
https://www.drupal.org/project/single_datetime
* To submit bug reports and feature suggestions, or to track changes visit:
https://www.drupal.org/project/issues/single_datetime
REQUIREMENTS
------------
This module requires the following outside of Drupal core:
* Plugin Date and Time Picker library - https://github.com/xdan/datetimepicker
INSTALLATION
------------
* Install the Single Date Time Picker module as you would normally install a
contributed Drupal module. Visit https://www.drupal.org/node/1897420 for
further information.
* Install external library from xdan trough composer or manual. Library
should be available at yourdrupalsite.com/libraries/datetimepicker
1. Manual
Download https://github.com/xdan/datetimepicker/archive/2.5.20.zip,
and extract inside drupal root folder: libraries/datetimepicker
2. Using Drupal library definition.
[Ensure composer packages of type drupal-library are configured to install to the appropriate path.](https://www.drupal.org/docs/develop/using-composer/using-composer-to-install-drupal-and-manage-dependencies#installer-dirs)
```
"extra": {
"drupal-libraries": {
"jquery-datetimepicker": "https://github.com/xdan/datetimepicker/archive/2.5.20.zip"
},
}
```
3. Composer as npm asset.
`composer require "npm-asset/jquery-datetimepicker":"^2.5"`
[Ensure composer packages of type npm-asset are
configured to install to the appropriate path.](https://www.drupal.org/docs/develop/using-composer/using-composer-to-install-drupal-and-manage-dependencies#third-party-libraries)
4. Using packagist for JS libraries
https://asset-packagist.org/
CONFIGURATION
-------------
1. Navigate to Administration > Extend and enable the module.
2. Navigate to Administration > Structure > Content types > [Content type
with date field] > Manage form display.
3. Select the date field to edit and choose "Single Date Time Picker" from
Widget drop down.
4. Edit the Field Plugin Setting by selecting the gear icon.
5. Select the hours format: 12 hours or 24 hours.
6. Select granularity for minutes in calendar: 5, 10, 15, 30, or 60 minutes.
7. Select days which are to be disabled in calendar.
8. To disable specific dates from calendar enter days in following format
d.m.Y etc. 31.12.2018. Each date in new line. This is used for specific
dates.
9. Update and Save.
VIEWS EXPOSED FILTERS
-------------
This module contains submodule `single_datetime_exposed`.
If you enable it, all exposed filters of types `date` and `search_api_date` will
automatically use date time picker on exposed filters.
It works with all operators, and none configuration is needed.
If you need customized configuration, suggesting that you create your
implementation based on this submodule.
FORM API USAGE
-------------
You can use SingleDateTime in other parts of the Drupal FORM API with minor
adjustments. If you are using non single_datetime elements, as textfield field
type, you need to attach proper attributes on the field, and attach JS library
(see examples below).
Second choice is that you can create custom field of field type
single_datetime directly.
Also exist helper `\Drupal\single_datetime\AttributeHelper` with some default
attributes options and examples. See examples below.
**Custom single_datetime field**
Using AttributeHelper you can create default widget:
```
$form['purchase_date'] = [
'#title' => 'Purchase date',
'#type' => 'single_date_time',
'#date_timezone' => date_default_timezone_get(),
'#default_value' => NULL,
'#date_type' => 'datetime',
'#required' => TRUE,
] + \Drupal\single_datetime\AttributeHelper::allElementAttributes();
```
Directly using your attributes.
```
$form['purchase_date'] = [
'#title' => 'Purchase date',
'#type' => 'single_datetime',
'#time' => FALSE,
'#required' => TRUE,
'#hour_format' => 24,
'#first_day' => \Drupal::config('system.date')->get('first_day'),
'#disable_days' => [],
'#allow_times' => 60,
'#allowed_hours' => Json::encode(range(0, 23)),
'#inline' => '0',
'#mask' => FALSE,
'#datetimepicker_theme' => 'default',
'#single_date_time' => 'datetime',
'#exclude_date' => '',
'#min_date' => '',
'#max_date' => '',
'#year_start' => '1970',
'#year_end' => date('Y'),
];
```
**Textfield or any other field type**
Using AttributeHelper you can create default widget:
```// Using datetimepicker module.
$form['purchase_date'] = [
'#title' => 'Purchase date',
'#type' => 'textfield',
'#time' => FALSE,
'#required' => TRUE,
'#attributes' => \Drupal\single_datetime\AttributeHelper::defaultWidget(),
];
$form['#attached']['library'][] = 'single_datetime/datetimepicker';
$form['#attributes']['autocomplete'] = 'off';
```
Directly using your attributes.
```// Using datetimepicker module.
$form['purchase_date'] = [
'#title' => 'Purchase date',
'#type' => 'textfield',
'#time' => FALSE,
'#required' => TRUE,
'#attributes' => [
'data-first-day' => '0',
'data-disable-days' => [],
'data-inline' => '0',
'data-datetimepicker-theme' => 'default',
'data-single-date-time' => 'date',
'data-max-date' => date('Y-m-d'),
'data-year-start' => '2005',
'data-year-end' => date('Y'),
],
];
$form['#attached']['library'][] = 'single_datetime/datetimepicker';
$form['#attributes']['autocomplete'] = 'off';
```
MAINTAINERS
-----------
* Valentino Međimorec (valic) - https://www.drupal.org/u/valic
Supporting organization:
* Vallic - https://www.drupal.org/vallic