https://github.com/yii2-extensions/datetime-picker
DateTime picker.
https://github.com/yii2-extensions/datetime-picker
datetime datetimepicker tempus yii2 yii2-extensions
Last synced: 8 months ago
JSON representation
DateTime picker.
- Host: GitHub
- URL: https://github.com/yii2-extensions/datetime-picker
- Owner: yii2-extensions
- License: mit
- Created: 2023-11-23T08:58:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-16T14:47:50.000Z (almost 2 years ago)
- Last Synced: 2025-01-31T08:06:04.930Z (over 1 year ago)
- Topics: datetime, datetimepicker, tempus, yii2, yii2-extensions
- Language: PHP
- Homepage:
- Size: 51.8 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Tempus Dominus Date/Time Picker.
## Installation
The preferred way to install this extension is through [composer](https://getcomposer.org/download/).
Either run
```shell
composer require --dev --prefer-dist yii2-extensions/datetime-picker:^0.1
```
or add
```json
"yii2-extensions/datetime-picker": "^0.1"
```
to the require section of your `composer.json` file.
## Usage
### Name
```php
use Yii2\Extensions\DateTimePicker\DateTimePicker;
echo DateTimePicker::widget(['name' => 'datetime-picker']);
```
### Active Field
```php
use Yii2\Extensions\DateTimePicker\DateTimePicker;
echo $form
->field($formModel, 'date')
->widget(
DateTimePicker::class,
[
'icon' => Icon::renderIcon('solid', 'calendar', ['class' => 'me-2 fa-solid'])
]
);
```
### Active Field Floating Label
```php
use Yii2\Extensions\DateTimePicker\DateTimePicker;
echo $form
->field($formModel, 'date', ['options' => ['class' => 'mt-3']])
->label(false)
->widget(
DateTimePicker::class,
[
'floatingLabel' => true,
'icon' => Icon::renderIcon('solid', 'calendar', ['class' => 'me-2 fa-solid'])
]
)
```
### Dynamic Theme Configuration for tempusDominus Widget Library
This library provides functionality to dynamically configure the tempusDominus widget's theme based on user preferences or predefined settings.
#### Functionality Overview
The library introduces a feature to automatically set up the tempusDominus widget with a theme determined by the user's preference or specified configurations.
##### Automatic Theme Configuration
Upon initialization, the library checks for theme configuration settings.
If the user has specified a theme in the library's configuration, it takes precedence.
##### Browser-Based Theme Detection
If no specific theme is set or the attribute data-bs-theme is absent:
The library uses the prefers-color-scheme media query to detect the user's system preference for `light` or `dark` mode.
##### Applying Theme Configuration to tempusDominus Widget
The library sets the theme configuration `(theme: 'dark' or theme: 'light')` based on the detected or specified theme.
This configuration is then applied to the tempusDominus widget using the library's internal functionalities.
### Properties of the widget
| Property | Type | Description | Default |
|------------------|---------------|------------------------------------|-----------------------------|
| `config` | `array` | The configuration of the widget. | `[]` |
| `containerClass` | `string` | The class of the container. | `input-group` |
| `cdn` | `boolean` | Whether to use the CDN. | `true` |
| `floatingLabel` | `boolean` | Whether to use the floating label. | `false` |
| `format` | `string` | The format of the date. | `yyyy/MM/dd HH:mm:ss` |
| `formatMonth` | `string` | The format of the month. | `long` |
| `formatYear` | `string` | The format of the year. | `numeric` |
| `icon` | `string` | The icon of the widget. | `''` |
| `id` | `string` | The ID of the widget. | `datetimepicker1` |
| `labelClass` | `string` | The class of the label. | `form-label` |
| `labelContent` | `string` | The content of the label. | `''` |
| `spanClass` | `string` | The class of the span. | `input-group-text` |
| `startOfTheWeek` | `integer` | The start of the week. | `1` |
| `template` | `string` | The template of the widget. `'{label}\n{input}\n{span}'` |
### Translation support
The extension supports translation. You can translate the extension into your language,
for default the extension supports the following languages.
- Chinese
- English
- French
- German
- Portuguese
- Russian
- Spanish
## Quality code
[](https://github.com/yii2-extensions/datetime-picker/actions/workflows/static.yml)
[](https://github.com/yii2-extensions/datetime-picker/actions/workflows/static.yml)
[](https://github.styleci.io/repos/722487175?branch=main)
## Support versions Yii2
[](https://github.com/yiisoft/yii2/tree/2.0.49.3)
[](https://github.com/yiisoft/yii2/tree/2.2)
## Testing
[Check the documentation testing](docs/testing.md) to learn about testing.
## Our social networks
[](https://twitter.com/Terabytesoftw)
## License
The MIT License. Please see [License File](LICENSE) for more information.