├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── composer.json └── src ├── DateTimePicker.php └── DateTimePickerAsset.php /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are **welcome** and will be fully **credited**. 4 | 5 | We accept contributions via Pull Requests on [Github](https://github.com/2amigos/yii2-date-time-picker-widget). 6 | 7 | 8 | ## Pull Requests 9 | 10 | - **[PSR-2 Coding Standard](https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-2-coding-style-guide.md)** - The easiest way to apply the conventions is to install [PHP Code Sniffer](http://pear.php.net/package/PHP_CodeSniffer). 11 | 12 | - **Add tests!** - Your patch won't be accepted if it doesn't have tests. 13 | 14 | - **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date. 15 | 16 | - **Consider our release cycle** - We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option. 17 | 18 | - **Create feature branches** - Don't ask us to pull from your master branch. 19 | 20 | - **One pull request per feature** - If you want to do more than one thing, send multiple pull requests. 21 | 22 | - **Send coherent history** - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please squash them before submitting. 23 | 24 | 25 | ## Running Tests 26 | 27 | ``` bash 28 | $ phpunit 29 | ``` 30 | 31 | 32 | **Happy coding**! 33 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # The BSD License (BSD) 2 | 3 | Copyright (c) 2013-2015, 2amigOS! Consulting Group LLC. 4 | 5 | > Redistribution and use in source and binary forms, with or without modification, 6 | > are permitted provided that the following conditions are met: 7 | > 8 | > Redistributions of source code must retain the above copyright notice, this 9 | > list of conditions and the following disclaimer. 10 | > 11 | > Redistributions in binary form must reproduce the above copyright notice, this 12 | > list of conditions and the following disclaimer in the documentation and/or 13 | > other materials provided with the distribution. 14 | > 15 | > Neither the name of 2amigOS! Consulting Group, LLC. nor the names of its 16 | > contributors may be used to endorse or promote products derived from 17 | > this software without specific prior written permission. 18 | > 19 | >THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 20 | >ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 21 | >WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 22 | >DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 23 | >ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 24 | >(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 25 | >LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 26 | >ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 27 | >(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 28 | >SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Bootstrap DateTimePicker Widget for Yii2 2 | ======================================== 3 | [![Latest Version](https://img.shields.io/github/tag/2amigos/yii2-date-time-picker-widget.svg?style=flat-square&label=release)](https://github.com/2amigos/yii2-date-time-picker-widget/tags) 4 | [![Software License](https://img.shields.io/badge/license-BSD-brightgreen.svg?style=flat-square)](LICENSE.md) 5 | [![Build Status](https://img.shields.io/travis/2amigos/yii2-date-time-picker-widget/master.svg?style=flat-square)](https://travis-ci.org/2amigos/yii2-date-time-picker-widget) 6 | [![Coverage Status](https://img.shields.io/scrutinizer/coverage/g/2amigos/yii2-date-time-picker-widget.svg?style=flat-square)](https://scrutinizer-ci.com/g/2amigos/yii2-date-time-picker-widget/code-structure) 7 | [![Quality Score](https://img.shields.io/scrutinizer/g/2amigos/yii2-date-time-picker-widget.svg?style=flat-square)](https://scrutinizer-ci.com/g/2amigos/yii2-date-time-picker-widget) 8 | [![Total Downloads](https://img.shields.io/packagist/dt/2amigos/yii2-date-time-picker-widget.svg?style=flat-square)](https://packagist.org/packages/2amigos/yii2-date-time-picker-widget) 9 | 10 | Renders a [Bootstrap DateTimePicker plugin](http://www.malot.fr/bootstrap-datetimepicker/). 11 | 12 | Installation 13 | ------------ 14 | The preferred way to install this extension is through [composer](http://getcomposer.org/download/). 15 | 16 | Either run 17 | 18 | ```bash 19 | composer require 2amigos/yii2-date-time-picker-widget:~1.0 20 | ``` 21 | or add 22 | 23 | ```json 24 | "2amigos/yii2-date-time-picker-widget" : "~1.0" 25 | ``` 26 | 27 | to the require section of your application's `composer.json` file. 28 | 29 | Usage 30 | ----- 31 | 32 | This widget renders a Bootstrap DateTimePicker input control. Best suitable for model with date string attribute. Its functionality is similar to [Bootstrap DatePicker plugin](https://github.com/2amigos/yii2-date-picker-widget) but this widget is enhanced with Time selection. 33 | 34 | It also allows you to restrict the views so you can use this widget as a DatePicker, TimePicker, or DateTimePicker. 35 | 36 | There are two ways of using it, with an `ActiveForm` instance or as a widget setting up its `model` and `attribute`. 37 | 38 | ```php 39 | 44 | 45 | $model, 47 | 'attribute' => 'created_at', 48 | 'language' => 'es', 49 | 'size' => 'ms', 50 | 'clientOptions' => [ 51 | 'autoclose' => true, 52 | 'format' => 'dd MM yyyy - HH:ii P', 53 | 'todayBtn' => true 54 | ] 55 | ]);?> 56 | 57 | 62 | field($tour, 'date_from')->widget(DateTimePicker::className(), [ 63 | 'language' => 'es', 64 | 'size' => 'ms', 65 | 'template' => '{input}', 66 | 'pickButtonIcon' => 'glyphicon glyphicon-time', 67 | 'inline' => true, 68 | 'clientOptions' => [ 69 | 'startView' => 1, 70 | 'minView' => 0, 71 | 'maxView' => 1, 72 | 'autoclose' => true, 73 | 'linkFormat' => 'HH:ii P', // if inline = true 74 | // 'format' => 'HH:ii P', // if inline = false 75 | 'todayBtn' => true 76 | ] 77 | ]);?> 78 | ``` 79 | 80 | Testing 81 | ------- 82 | 83 | To test the extension, is better to clone this repository on your computer. After, go to the extensions folder and do 84 | the following (assuming you have `composer` installed on your computer: 85 | 86 | ```bash 87 | $ composer install --no-interaction --prefer-source --dev 88 | ``` 89 | Once all required libraries are installed then do: 90 | 91 | ```bash 92 | $ phpunit 93 | ``` 94 | 95 | Further Information 96 | ------------------- 97 | Please, check the [Bootstrap DateTimePicker site](http://www.malot.fr/bootstrap-datetimepicker/) documentation for further information about its configuration options. 98 | 99 | Contributing 100 | ------------ 101 | 102 | Please see [CONTRIBUTING](CONTRIBUTING.md) for details. 103 | 104 | Credits 105 | ------- 106 | 107 | - [Antonio Ramirez](https://github.com/tonydspaniard) 108 | - [All Contributors](../../contributors) 109 | 110 | License 111 | ------- 112 | 113 | The BSD License (BSD). Please see [License File](LICENSE.md) for more information. 114 | 115 | 116 | > [![2amigOS!](http://www.gravatar.com/avatar/55363394d72945ff7ed312556ec041e0.png)](http://www.2amigos.us) 117 | Web development has never been so fun! 118 | [www.2amigos.us](http://www.2amigos.us) 119 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "2amigos/yii2-date-time-picker-widget", 3 | "description": "Bootstrap DateTimePicker widget for Yii2.", 4 | "type": "yii2-extension", 5 | "keywords": [ 6 | "2amigos", 7 | "yii", 8 | "yii2", 9 | "yii 2", 10 | "extension", 11 | "widget", 12 | "datetimepicker" 13 | ], 14 | "homepage": "http://yiiwheels.com/extension/bootstrap-datetimepicker", 15 | "license": "BSD-3-Clause", 16 | "authors": [ 17 | { 18 | "name": "2amigOS! Consulting Group", 19 | "email": "hola@2amigos.us", 20 | "homepage": "http://2amigos.us", 21 | "role": "Developer" 22 | } 23 | ], 24 | "support": { 25 | "issues": "https://github.com/2amigos/yii2-date-time-picker-widget/issues", 26 | "source": "https://github.com/2amigos/yii2-date-time-picker-widget" 27 | }, 28 | "require": { 29 | "yiisoft/yii2": "~2.0", 30 | "yiisoft/yii2-bootstrap": "~2.0.0", 31 | "bower-asset/smalot-bootstrap-datetimepicker": "2.4.4" 32 | }, 33 | "require-dev": { 34 | "phpunit/phpunit": "4.*", 35 | "scrutinizer/ocular": "~1.1" 36 | }, 37 | "autoload": { 38 | "psr-4": { 39 | "dosamigos\\datetimepicker\\": "src" 40 | } 41 | }, 42 | "extra": { 43 | "branch-alias": { 44 | "dev-master": "1.0-dev" 45 | }, 46 | "asset-installer-paths": { 47 | "bower-asset-library": "vendor/bower" 48 | } 49 | }, 50 | "config": { 51 | "fxp-asset": { 52 | "installer-paths": { 53 | "npm-asset-library": "vendor/npm", 54 | "bower-asset-library": "vendor/bower" 55 | }, 56 | "vcs-driver-options": { 57 | "github-no-api": true 58 | }, 59 | "git-skip-update": "2 days", 60 | "pattern-skip-version": "(-build|-patch)" 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/DateTimePicker.php: -------------------------------------------------------------------------------- 1 | 19 | * @link http://www.ramirezcobos.com/ 20 | * @link http://www.2amigos.us/ 21 | * @package common\extensions\widgets\datetimepicker 22 | */ 23 | class DateTimePicker extends InputWidget 24 | { 25 | /** 26 | * @var string the language to use 27 | */ 28 | public $language; 29 | /** 30 | * @var array the options for the Bootstrap DatePicker plugin. 31 | * Please refer to the Bootstrap DatePicker plugin Web page for possible options. 32 | * @see http://bootstrap-datepicker.readthedocs.org/en/release/options.html 33 | */ 34 | public $clientOptions = []; 35 | /** 36 | * @var array the event handlers for the underlying Bootstrap Switch 3 input JS plugin. 37 | * Please refer to the [DatePicker](http://bootstrap-datepicker.readthedocs.org/en/release/events.html) plugin 38 | * Web page for possible events. 39 | */ 40 | public $clientEvents = []; 41 | /** 42 | * @var string the size of the input ('lg', 'md', 'sm', 'xs') 43 | */ 44 | public $size; 45 | /** 46 | * @var array HTML attributes to render on the container if its used as a component. 47 | */ 48 | public $containerOptions = []; 49 | /** 50 | * @var string the template to render the input. By default, renders as a component, you can render a simple 51 | * input field without pickup and/or reset buttons by modifying the template to `{input}`. `{button}` must exist for 52 | * a component type of datepicker. The following template is invalid `{input}{reset}` and will be treated as `{input}` 53 | */ 54 | public $template = "{input}{reset}{button}"; 55 | /** 56 | * @var string the icon to use on the reset button 57 | */ 58 | public $resetButtonIcon = 'glyphicon glyphicon-remove'; 59 | /** 60 | * @var string the icon to use on the pickup button. Defaults to `glyphicon-th`. Other uses are `glyphicon-time` and 61 | * `glyphicon-calendar`. 62 | */ 63 | public $pickButtonIcon = 'glyphicon glyphicon-th'; 64 | /** 65 | * @var bool whether to render the input as an inline calendar 66 | */ 67 | public $inline = false; 68 | 69 | /** 70 | * @inheritdoc 71 | */ 72 | public function init() 73 | { 74 | parent::init(); 75 | 76 | Html::addCssClass($this->containerOptions, 'input-group date'); 77 | Html::addCssClass($this->options, 'form-control'); 78 | $this->options['readonly'] = 'readonly'; 79 | if ($this->size !== null) { 80 | $size = 'input-' . $this->size; 81 | Html::addCssClass($this->options, $size); 82 | Html::addCssClass($this->containerOptions, $size); 83 | } 84 | if ($this->inline) { 85 | $this->clientOptions['linkField'] = $this->options['id']; 86 | Html::removeCssClass($this->containerOptions, 'date'); 87 | Html::removeCssClass($this->containerOptions, 'input-group'); 88 | Html::addCssClass($this->options, 'text-center'); 89 | } 90 | } 91 | 92 | /** 93 | * @inheritdoc 94 | */ 95 | public function run() 96 | { 97 | 98 | $input = $this->hasModel() 99 | ? Html::activeTextInput($this->model, $this->attribute, $this->options) 100 | : Html::textInput($this->name, $this->value, $this->options); 101 | 102 | if (!$this->inline) { 103 | $resetIcon = Html::tag('span', '', ['class' => $this->resetButtonIcon]); 104 | $pickIcon = Html::tag('span', '', ['class' => $this->pickButtonIcon]); 105 | $resetAddon = Html::tag('span', $resetIcon, ['class' => 'input-group-addon']); 106 | $pickerAddon = Html::tag('span', $pickIcon, ['class' => 'input-group-addon']); 107 | } else { 108 | $resetAddon = $pickerAddon = ''; 109 | } 110 | 111 | if (strpos($this->template, '{button}') !== false || $this->inline) { 112 | $input = Html::tag( 113 | 'div', 114 | strtr($this->template, ['{input}' => $input, '{reset}' => $resetAddon, '{button}' => $pickerAddon]), 115 | $this->containerOptions 116 | ); 117 | } 118 | echo $input; 119 | $this->registerClientScript(); 120 | } 121 | 122 | /** 123 | * Registers required script for the plugin to work as a DateTimePicker 124 | */ 125 | public function registerClientScript() 126 | { 127 | $js = []; 128 | $view = $this->getView(); 129 | 130 | // @codeCoverageIgnoreStart 131 | if ($this->language !== null) { 132 | $this->clientOptions['language'] = $this->language; 133 | DateTimePickerAsset::register( 134 | $view 135 | )->js[] = 'js/locales/bootstrap-datetimepicker.' . $this->language . '.js'; 136 | } else { 137 | DateTimePickerAsset::register($view); 138 | } 139 | // @codeCoverageIgnoreEnd 140 | 141 | $id = $this->options['id']; 142 | $selector = ";jQuery('#$id')"; 143 | 144 | if (strpos($this->template, '{button}') !== false || $this->inline) { 145 | $selector .= ".parent()"; 146 | } 147 | 148 | $options = !empty($this->clientOptions) ? Json::encode($this->clientOptions) : ''; 149 | 150 | $js[] = "$selector.datetimepicker($options);"; 151 | 152 | if ($this->inline) { 153 | $js[] = "$selector.find('.datetimepicker-inline').addClass('center-block');"; 154 | $js[] = "$selector.find('table.table-condensed').attr('align','center').css('margin','auto');"; 155 | } 156 | 157 | // @codeCoverageIgnoreStart 158 | if (!empty($this->clientEvents)) { 159 | foreach ($this->clientEvents as $event => $handler) { 160 | $js[] = "$selector.on('$event', $handler);"; 161 | } 162 | } 163 | // @codeCoverageIgnoreEnd 164 | 165 | $view->registerJs(implode("\n", $js)); 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /src/DateTimePickerAsset.php: -------------------------------------------------------------------------------- 1 | 14 | * @link http://www.ramirezcobos.com/ 15 | * @link http://www.2amigos.us/ 16 | * @package dosamigos\datetimepicker 17 | */ 18 | class DateTimePickerAsset extends AssetBundle 19 | { 20 | public $sourcePath = '@bower/smalot-bootstrap-datetimepicker'; 21 | 22 | public $css = [ 23 | 'css/bootstrap-datetimepicker.css' 24 | ]; 25 | 26 | public $js = [ 27 | 'js/bootstrap-datetimepicker.js' 28 | ]; 29 | 30 | public $depends = [ 31 | 'yii\bootstrap\BootstrapPluginAsset' 32 | ]; 33 | } 34 | --------------------------------------------------------------------------------