symfony Admin lte Bundle 个性化日期类型表单

Question

我在 symfony 5 上使用 kevinPast adminLte 包。每个日期类型都有自己的格式 (dd-MM-YYYY)，您不能通过编写 'format' => 以正常方式更新它'yyyy-MM-dd' 例如在表格内。其他日期类型也会出现此问题，例如生日。

我也尝试使用我自己的日期选择器功能来覆盖现有的，但它是一个包，所以它首先不起作用，然后它也破坏了现有的 js。

你可以看到我所做的不同尝试：

            ->add('startTime', DateTimeType::class, [
            'required' => true,
            'error_bubbling' => false,
            'date_widget' => 'single_text',
            // @todo Can we make this format configurable?
            'date_format' => 'yyyy-MM-dd',  // must match data-date-format as defined in field.html.twig
            'minutes' => range(0, 55, 5)
        ])

它将显示这样的数据

它使用树枝上的方块date_widget，single_text区域

{% block date_widget %}
{% if widget == 'single_text' %}
    <div class="input-group">
    <div class="input-group-addon">
    <i class="far fa-calendar-alt"></i>
    </div>

    {% if type is not defined or type != 'date' %}
        {% if attr.class is defined %}
            {% set class = attr.class ~ ' timepicker' %}
        {% else %}
            {% set class = ' timepicker' %}
        {% endif %}
        {% set attr = attr|merge({'class' : class, 'data-datepickerenable':'on'}) %}
    {% endif %}
    {{ block('form_widget_simple') }}
    </div>
{% else %}
    {% set date_pattern = '<div class="row">' ~ date_pattern ~ '</div>'|raw %}
    {{ date_pattern|replace({
    '{{ year }}' : '<div class="col-xs-4">{{ year }}</div>',
    '{{ month }}' : '<div class="col-xs-4">{{ month }}</div>',
    '{{ day }}' : '<div class="col-xs-4">{{ day }}</div>',
    })|raw|replace({
    '{{ year }}':  form_widget(form.year),
    '{{ month }}': form_widget(form.month),
    '{{ day }}':   form_widget(form.day),
    })|raw }}
{% endif %}

{% 端块 %}

我也尝试使用以下代码覆盖它： Js部分：

$(document).ready(function() {
$('.datepicker').datepicker({
      format: "DD/MM/YYYY h:mm"
});

});

表单部分

->add('startTime', DateTimeType::class, [
            'required' => true,
            'error_bubbling' => false,
            'date_widget' => 'single_text',
            //<input type="text" class="form-control" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-mask="" im-insert="false">

            // @todo Can we make this format configurable?
            'date_format' => 'yyyy-MM-dd',  // must match data-date-format as defined in field.html.twig
            'minutes' => range(0, 55, 5),
            'attr' => ['class' => 'datepicker'],
        ])

这个覆盖了实际的日期选择器，但首先没有解决问题（你仍然有标准格式 DD-MM-YYY）然后它也破坏了包使用的 js（一些导航按钮没有工作等）

如果我找到了解决办法，我也会把答案写在这里。

Answer 1

因此，经过一些工作后，如果有人遇到同样的问题，我找到了一个解决方案，也许不是最好的，但它是有效的。我在 symfony (Kimai2)

上检查了与 adminLte 捆绑包一起使用的演示

因此，要能够编辑您的日历并设置日期格式，您需要执行以下步骤： 1 : 创建一个 dateTimePickerType 并使用它代替默认的 DatetimeType

<?php

namespace App\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\DateTimeType;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\OptionsResolver\OptionsResolver;

class DateTimePickerType extends AbstractType
{
    public function buildView(FormView $view, FormInterface $form, array $options)
    {
        $view->vars['attr'] = array_merge($view->vars['attr'], [
            'data-datetimepicker' => 'on',
            'autocomplete' => 'off',
            'placeholder' => strtoupper($options['format']),
            'data-format' => $options['format_picker'],
            'data-time-picker-increment' => $options['time_increment'],
        ]);
    }

public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults([
        'label' => '',
        'widget' => 'single_text',
        'html5' => false,
        'format' => 'YYYY-MM-DD',
        'format_picker' => 'YYYY-MM-DD',
        'with_seconds' => false,
        'time_increment' => 1,
    ]);
}

/**
 * {@inheritdoc}
 */
public function getParent()
{
    return DateTimeType::class;
}


}

和 formType

->add('startTime', DateTimePickerType::class, [
        'required' => true,
        'error_bubbling' => false,
        'label' => 'startTime',
        'format' => "yyyy-MM-dd'T'HH:mm:ss",
        'attr' => ['class' => 'js-datepicker-hours'],
    ])

然后是 javascript 部分，您需要从 www.daterangepicker.com

安装 daterangerpicker

并使用以下功能：

      const $ = require('jquery');
global.$ = global.jQuery = $;

const Moment = require('moment');
global.moment = Moment;
require('moment/locale/en-gb');
require('daterangepicker');

$(document).ready(function() {
    $('.js-datepicker').daterangepicker({
        language: "en",
        singleDatePicker: true,
        showDropdowns: true,
        minYear: 1901,
        //maxYear: parseInt(moment().format('YYYY'),10)
    });

$('.js-datepicker-hours').daterangepicker({
    language: "en",
    timePicker: true,
    singleDatePicker: true,
    showDropdowns: true,
    locale: {
        format: 'yyyy-MM-DD HH:mm:ss'
    }
    //maxYear: parseInt(moment().format('YYYY'),10)
});

symfony Admin lte Bundle 个性化日期类型表单

symfony Admin lte Bundle personalize datetype form

format

datepicker

symfony

adminlte

symfony5