initSetting(); $this->registerAsset(); echo $this->renderInputHtml('text'); } /** * @inheritdoc */ public function init() { parent::init(); } /** * 初始化小物件的配置 */ protected function initSetting() { //初始化日期格式 if (empty($this->format)) { $this->format = Yii::$app->formatter->dateFormat; } $this->format = $this->convertDateFormat($this->format); //初始化基础配置 $this->locale = [ 'cancelLabel' => $this->cancelLabel, 'applyLabel' => $this->applyLabel, "customRangeLabel" => $this->customRangeLabel, "daysOfWeek" => $this->daysOfWeek, "monthNames" => $this->monthNames, "format" => $this->format ]; //初始化快捷键 $this->initRange(); //关闭自动提示 $this->options = ArrayHelper::merge($this->options, [ "autocomplete" => "off", "class" => "form-control", "style" => "width:190px;" ]); } /** * 注册js和css */ protected function registerAsset() { $view = $this->getView(); DaterangeBootstrapAsset::register($view); $options = [ "opens" => $this->opens, "autoUpdateInput" => $this->autoFill, "locale" => $this->locale, "ranges" => $this->ranges ]; if (!empty($this->startDate)) { $options["startDate"] = new JsExpression("moment('{$this->startDate}')"); } if (!empty($this->endDate)) { $options["endDate"] = new JsExpression("moment('{$this->endDate}')"); } $jsOptions = Json::encode($options); $js = <<< SCRIPT $('#{$this->options['id']}').daterangepicker({$jsOptions}); $('#{$this->options['id']}').on('apply.daterangepicker', function(ev, picker) { $(this).val(picker.startDate.format('{$this->format}') + ' ~ ' + picker.endDate.format('{$this->format}')); }); $('#{$this->options['id']}').on('cancel.daterangepicker', function(ev, picker) { $(this).val(''); }); SCRIPT; $view->registerJs($js); } /** * 初始化快捷按键数组 */ protected function initRange() { $this->ranges = [ '今天' => [new JsExpression("moment()"), new JsExpression("moment()")], '昨天' => [new JsExpression("moment().subtract(1, 'days')"), new JsExpression("moment().subtract(1, 'days')")], '最近7天' => [new JsExpression("moment().subtract(6, 'days')"), new JsExpression("moment()")], '最近30天' => [new JsExpression("moment().subtract(29, 'days')"), new JsExpression("moment()")], '本月' => [new JsExpression("moment().startOf('month')"), new JsExpression("moment().endOf('month')")], '上月' => [new JsExpression("moment().subtract(1, 'month').startOf('month')"), new JsExpression("moment().subtract(1, 'month').endOf('month')")] ]; } /** * 转换php日期格式为Moment.js 日期格式 * @param string $format PHP日期格式字符串 * @return string */ protected static function convertDateFormat($format) { $conversions = [ // second (带有前导零) 's' => 'ss', // minute (带有前导零) 'i' => 'mm', // hour in 12-hour format (没带前导零) 'g' => 'h', // hour in 12-hour format (带有前导零) 'h' => 'hh', // hour in 24-hour format (没带前导零) 'G' => 'H', // hour in 24-hour format (带有前导零) 'H' => 'HH', // day of the week locale 'w' => 'e', // day of the week ISO 'W' => 'E', // day of month (没带前导零) 'j' => 'D', // day of month (带有前导零) 'd' => 'DD', // day name short 'D' => 'DDD', // day name long 'l' => 'DDDD', // month of year (没带前导零) 'n' => 'M', // month of year (带有前导零) 'm' => 'MM', // month name short 'M' => 'MMM', // month name long 'F' => 'MMMM', // year (2位年) 'y' => 'YY', // year (4位年) 'Y' => 'YYYY', // unix timestamp 'U' => 'X', ]; return strtr($format, $conversions); } }