CODEWITHSUNDEEP
phpsymfonydate
shuba.ivan
shuba.ivan

Reputation: 4061

Symfony form date type field datepicker not working

when using Date type in form like this

        $builder
            ->add('invoiceDate', DateType::class, [
                'translation_domain' => 'invoicing',
                'label' => 'invoice_date',
                'widget' => 'single_text',
                'format' => 'dd.MM.yy',
                'required' => true
            ]);

js: 

$(document).ready(function () {

$('#economy_bundle_outbound_invoice_invoiceDate').datepicker({
    dateFormat: 'dd.mm.yy'
});

and when I select some data, have correct data format mm/dd/yyyy but when check form valid have error invoiceDate: ERROR: This value is not valid.

enter image description here

enter image description here

enter image description here

Upvotes: 0

Views: 6351

Answers (1)

Dan Costinel
Dan Costinel

Reputation: 1736

I usually use bootstrap-datepicker library to solve that issue.

The example code could be:

//Controller
$form = $this->createFormBuilder()
    ->setMethod('POST')
    ->setAction($this->generateUrl('homepage'))
    ->add('invoiceDate', DateType::class, [
        'label'=>'invoice_date',
        'widget'=>'single_text',
        'required'=>true,
    ])
    ->getForm()
;
//...
return $this->render('default/index.html.twig', ['form'=>$form->createView()]);

// base.html.twig
{% block stylesheets %}
    <link rel="stylesheet" href="{{asset('bootstrap/dist/css/bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{asset('bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}">
{% endblock %}
//...
<body>
    //...
    {% block javascripts %}
        <script src="{{asset('jquery/dist/jquery.min.js')}}"></script>
        <script src="{{asset('bootstrap/dist/js/bootstrap.min.js')}}"></script>
        <script src="{{asset('bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
    {% endblock %}
</body>

// default/index.html.twig
{% extends 'base.html.twig' %}

{% block body %}
    {{form_start(form)}}
        {{form_row(form.invoiceDate, { attr:{ class:'js-datepicker' } })}}
    {{form_end(form)}}
{% endblock %}

{% block javascripts %}
    {{parent()}}
    <script>
        $('.js-datepicker').datepicker({
            format:'yyyy.MM.dd'
        });
    </script>
{% endblock %}

Upvotes: 2

Related Questions