组件说明

日期范围组件用于选择开始日期和结束日期。

用法示例

use plugin\xbCode\builder\Builder;
use plugin\xbCode\builder\Renders\Form;

Builder::form(function (Form $builder) {
    // 基础用法
    $builder->addRowDateRange('date_range', '日期范围', '', function($component) {
        $component->format('YYYY-MM-DD');
        $component->placeholder('请选择日期范围');
        $component->clearable(true);
    });

    // 日期时间范围
    $builder->addRowDateTimeRange('datetime_range', '时间范围', '', function($component) {
        $component->valueFormat('YYYY-MM-DD HH:mm:ss');
        $component->displayFormat('YYYY-MM-DD HH:mm:ss');
        $component->ranges(['today', 'yesterday', '7daysago', 'thismonth']);
    });

    // 带限制的日期范围
    $builder->addRowDateRange('activity_time', '活动时间', '', [
        'minDate' => '2024-01-01',
        'maxDate' => '2024-12-31',
        'minDuration' => '1days', // 最小跨度1天
        'maxDuration' => '30days', // 最大跨度30天
        'utc' => false
    ]);
});

组件参数

参数名	类型	默认值	说明
name	string	-	字段名称
label	string	-	字段标签
value	string	-	默认值
valueFormat	string	'YYYY-MM-DD HH:mm:ss'	日期值格式
displayFormat	string	-	日期显示格式
placeholder	string	-	占位文本
shortcuts	string\|array	-	日期快捷键，如：today、yesterday、7daysago等
minDate	string	-	限制最小日期
maxDate	string	-	限制最大日期
minDuration	string	-	限制最小跨度，如：2days
maxDuration	string	-	限制最大跨度，如：1year
utc	bool	false	是否保存UTC值
clearable	bool	false	是否可清除
embed	bool	false	是否内联模式
animation	bool	true	是否启用游标动画
extraName	string	-	是否存成两个字段
transform	string	-	日期数据处理函数
popOverContainerSelector	string	-	弹层挂载位置选择器
required	bool	false	是否必填
disabled	bool	false	是否禁用

使用说明

默认返回格式为："开始日期,结束日期"
shortcuts支持的快捷键：today、yesterday、thisweek、prevweek、thismonth、prevmonth、7daysago等
minDuration和maxDuration用于限制选择的时间跨度
extraName可以将开始和结束日期存储到两个字段
format方法同时设置valueFormat和displayFormat
使用datetime()方法可切换为日期时间范围选择