/**
* Registers wysihtml5 plugin and the related events
*/
protected function registerClientScript()
{
$view = $this->getView();
DateRangePickerAsset::register($view);
$id = $this->options['id'];
$options = Json::encode($this->clientOptions);
$startInputId = Json::encode('#' . Html::getInputId($this->model, $this->start_attribute));
$endInputId = Json::encode('#' . Html::getInputId($this->model, $this->end_attribute));
$fn = new JsExpression(<<<JS
function(ev, picker) {
elS.val(picker.startDate.format('YYYY-MM-DD'));
elE.val(picker.endDate.format('YYYY-MM-DD'));
}
JS
);
$selector = Json::encode($this->parentSelectorHide);
$view->registerJs(<<<JS
(function () {
var elS = \$({$startInputId}),
elE = \$({$endInputId});
jQuery('#{$id}')
.daterangepicker({$options})
.on('apply.daterangepicker', {$fn});
elS.parents({$selector}).hide();
elE.parents({$selector}).hide();
})();
JS
);
}
/**
* Executes the widget.
*/
public function run()
{
if (empty($this->clientOptions['format'])) {
$this->clientOptions['format'] = 'MM/DD/YYYY';
}
if (empty($this->labelDateFormat)) {
$this->labelDateFormat = $this->clientOptions['format'];
}
if ($this->hasModel()) {
$hiddenInput = Html::activeHiddenInput($this->model, $this->attribute);
$input = Html::activeTextInput($this->model, $this->attribute);
$name = Html::getInputName($this->model, $this->attribute);
$value = $this->model->{$this->attribute};
$this->options['id'] .= '-picker';
} else {
$hiddenInput = Html::hiddenInput($this->name, $this->value);
$input = Html::textInput($this->name, $this->value, ['class' => 'form-control']);
$name = $this->name;
$value = $this->value;
}
$arrValue = array_map('trim', ($value = explode($this->separator, $value)) ? $value : []);
$callback = '';
$initJS = '';
$lines = [];
switch ($this->mode) {
case self::MODE_ADVANCE:
Html::addCssClass($this->options, 'btn ' . $this->type);
$lines[] = $hiddenInput;
$lines[] = Html::beginTag('div', $this->options);
if (!empty($this->icon)) {
$lines[] = Html::tag('i', '', ['class' => $this->icon]) . ' ';
}
$lines[] = Html::tag('span', ' ');
$lines[] = Html::tag('b', '', ['class' => 'fa fa-angle-down']);
$lines[] = Html::endTag('div');
$callback = "function (start, end) {\n \$('#{$this->options['id']} span')\n .html(start.format('{$this->labelDateFormat}')\n + '{$this->separator}' + end.format('{$this->labelDateFormat} '));\n // set value to hidden input\n \$('input[name=\"{$name}\"]').val(start.format('{$this->clientOptions['format']}')\n + '{$this->separator}' + end.format('{$this->clientOptions['format']}'));\n }";
if (count($arrValue) == 2) {
$initJS = "\n !(function(\$){\n var el = \$('#{$this->options['id']}');\n el.data('daterangepicker')\n .setStartDate(moment('{$arrValue[0]}', '{$this->clientOptions['format']}'));\n el.data('daterangepicker')\n .setEndDate(moment('{$arrValue[1]}', '{$this->clientOptions['format']}'));\n el.find('span')\n .html(moment('{$arrValue[0]}', '{$this->clientOptions['format']}').format('{$this->labelDateFormat}')\n + '{$this->separator}'\n + moment('{$arrValue[1]}', '{$this->clientOptions['format']}').format('{$this->labelDateFormat} '));\n })(jQuery);\n ";
}
break;
case self::MODE_INPUT:
Html::addCssClass($this->options, 'input-group');
$lines[] = Html::beginTag('div', $this->options);
$lines[] = $input;
$lines[] = Html::beginTag('span', ['class' => 'input-group-btn']);
$lines[] = Button::widget(['label' => ' ', 'icon' => $this->icon, 'type' => $this->type, 'iconPosition' => Button::ICON_POSITION_RIGHT]);
$lines[] = Html::endTag('span');
$lines[] = Html::endTag('div');
$callback = "function (start, end) {\n \$('#{$this->options['id']} input')\n .val(start.format('{$this->clientOptions['format']}')\n + '{$this->separator}' + end.format('{$this->clientOptions['format']} '));\n // set value to hidden input\n \$('input[name=\"{$name}\"]').val(start.format('{$this->clientOptions['format']}')\n + '{$this->separator}' + end.format('{$this->clientOptions['format']}'));\n }";
if (count($arrValue) == 2) {
$initJS = "\n !(function(\$){\n var el = \$('#{$this->options['id']}');\n el.data('daterangepicker')\n .setStartDate(moment('{$arrValue[0]}', '{$this->clientOptions['format']}'));\n el.data('daterangepicker')\n .setEndDate(moment('{$arrValue[1]}', '{$this->clientOptions['format']}'));\n el.find('input')\n .val(moment('{$arrValue[0]}', '{$this->clientOptions['format']}').format('{$this->clientOptions['format']}')\n + '{$this->separator}'\n + moment('{$arrValue[1]}', '{$this->clientOptions['format']}').format('{$this->clientOptions['format']} '));\n })(jQuery);\n ";
}
break;
}
echo implode("\n", $lines);
DateRangePickerAsset::register($this->view);
$this->registerPlugin('daterangepicker', $callback);
if (!empty($initJS)) {
$this->view->registerJs($initJS, View::POS_READY);
}
}
