Symfony 2 date widget (jquery) with angular

Override twig’s default rendering of date widget by following the steps explained here: Twig Form Templating

//twig template
{% block date_widget %}
    {% spaceless %}
        {% if widget == 'single_text' %}
            {% spaceless %}
                {% set type = type|default('text') %}
                <input type="{{ type }}" value="{{ value }}" data-date-picker="" />             
            {% endspaceless %}
        {% else %}
{{ date_pattern|replace({ '{{ year }}': form_widget(form.year), '{{ month }}': form_widget(form.month), '{{ day }}': form_widget(form.day), })|raw }}
{% endif %} {% endspaceless %} {% endblock %}

And angular code(can be easily extended to work with any other library like bootstrap):

directive_app.directive('datePicker', function () {
    return function (scope, element, attrs) {
        var fmt = (attrs.format != 'undefined') ? attrs.format : 'yy/mm/dd'; //supports defining date format through property like <input type="text" data-format="your_format" />
        element.datepicker({ dateFormat: fmt });
    }
});

And define your symfony date widget as:

    $builder->add('data', 'date', array('widget' => 'single_text', 'format' => 'your_format'));

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>