如何在Backpack Laravel中实现mm:ss格式的时间输入字段

原生HTML的type="time"输入框默认仅展示小时+分钟格式，只有指定秒级精度的step属性后，才会展示秒选择位，适配mm:ss的展示需求。你可以按如下方式调整代码：

调整后的原生time输入代码 #

<input
        type="time"
        min="00:00"
        max="59:59"
        step="1"
        name="{{ $field['name'] }}"
        value="{{ old($field['name']) ?? $field['value'] ?? $field['default'] ?? '' }}"
        @include('crud::fields.inc.attributes')
>

注意事项 #

• 新增的step="1"代表输入精度为1秒，会触发浏览器展示mm:ss选择格式；如果不需要精确到1秒，也可设置为step="5"、step="10"等符合你需求的精度值
• 不同浏览器对type="time"的样式表现有差异，部分浏览器仍会展示00开头的小时位，如果需要完全隐藏小时位，可选择下文的文本输入方案

存储适配 #

如果你的数据库字段存的是总秒数（int类型），需要在对应模型中添加存取修改器，完成秒数和mm:ss格式的互转：

// 读取时把秒数转为mm:ss格式传入表单
public function get你的字段名驼峰Attribute($value)
{
    return sprintf('%02d:%02d', floor($value / 60), $value % 60);
}

// 保存时把mm:ss格式转为总秒数存入数据库
public function set你的字段名驼峰Attribute($value)
{
    sscanf($value, "%d:%d", $minutes, $seconds);
    $this->attributes['你的字段名下划线'] = $minutes * 60 + $seconds;
}

把代码中的你的字段名驼峰、你的字段名下划线替换为实际字段的对应命名即可。

全浏览器兼容备选方案（文本输入+正则校验） #

如果要保证所有浏览器都只展示mm:ss格式，可使用text输入加前端校验实现：

<input
        type="text"
        pattern="[0-5][0-9]:[0-5][0-9]"
        placeholder="mm:ss"
        maxlength="5"
        name="{{ $field['name'] }}"
        value="{{ old($field['name']) ?? $field['value'] ?? $field['default'] ?? '' }}"
        @include('crud::fields.inc.attributes')
>

该方案会强制用户输入符合mm:ss规则的内容，输入非法内容时提交表单会触发浏览器自带的提示。

内容的提问来源于stack exchange，提问作者Abdo Rabah