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

Question

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

我也尝试使用我自己的datepicker函数来覆盖现有的，但它是一个捆绑包，所以它首先不起作用，然后它也破坏了现有的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)
        ])

它会显示这样的数据

它使用 twig 上的块 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 上与 adminLte 捆绑包一起使用的演示（Kimai2）

因此，为了能够编辑日历并设置日期格式，您需要执行以下步骤： 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;
}


}

以及表单类型

->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)
});