genemu / GenemuFormBundle

Extra Form : Captcha GD, Tinymce, Recaptcha, JQueryDate, JQueryAutocomplete, JQuerySlider, JQueryFile, JQueryImage
587 stars 265 forks source link

minDate and maxDate for jQuery date #384

Open marcoshoya opened 9 years ago

marcoshoya commented 9 years ago

I've tried to use jquery datetime plugin on my application and I could not configure the initial and final date from calendar that was showing.

After spend a little time looking for solution, I've opened widget template and found it:

// Form/JQuery/Type/DateType.php
class DateType extends AbstractType
{
    public function buildView(FormView $view, FormInterface $form, array $options)
    {
        $configs = $options['configs'];
        $years = $options['years'];

        //...

        $view->vars = array_replace($view->vars, array(
            'min_year' => min($years),
            'max_year' => max($years),
            'configs' => $configs,
            'culture' => $options['culture'],
        ));
    }
}

And the template:

// Resources/views/Form/jquery_layout.html.twig
{% block genemu_jquerydate_javascript %}
    {% spaceless %}
        <script type="text/javascript">
            jQuery(document).ready(function ($) {
                $field = $('#{% if widget != "single_text" %}datepicker_{% endif %}{{ id }}');

            {% block genemu_jquerydate_javascript_prototype %}

                {% if configs.buttonImage is defined %}
                    {% set configs = configs|merge({
                    "buttonImage": asset(configs.buttonImage)
                }) %}
                {% endif %}

                {% if culture == "en" %}
                    {% set culture = "en-GB" %}
                {% endif %}

                        var $configs = $.extend({
                        minDate: new Date({{ min_year }}, 0, 1),
                                maxDate: new Date({{ max_year }}, 11, 31)
                        }, $.datepicker.regional['{{ culture }}'],{{ configs|json_encode|raw }} );                {% if widget != "single_text" %}
                                        var $year = $('#{{ form.year.vars.id }}');
                                var $month = $('#{{ form.month.vars.id }}');
                                var $day = $('#{{ form.day.vars.id }}');

                                $configs.onSelect = function (date) {
                                    $year.val(parseInt(date.substring(0, 4), 10));
                                    $month.val(parseInt(date.substring(5, 7), 10));
                                    $day.val(parseInt(date.substring(8), 10));
                                }
                {% endif %}

                        $field.datepicker($configs);
            {% endblock %}
                });
        </script>
    {% endspaceless %}
{% endblock %}

So, this is my point: why minDate: new Date({{ min_year }}, 0, 1) and maxDate: new Date({{ max_year }}, 11, 31) are hardcode?

Meyfarth commented 8 years ago

You can override those options by defining "minDate" and "maxDate" in the 'configs' when creating your field :

class MyFormType {
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
           ->add('my_date', 'genemu_jquerydate', [
                'widget' => 'single_text',
                'label' => 'publisher.poll.closing_date',
                'format' => $format,
                'configs' => [
                    'minDate' => [MY_MIN_DATE],
                    'maxDate' => [MY_MAX_DATE],
                ],
                'required' => false,
            ]);
    }
}
barat commented 8 years ago

Yes - You can overwrite minDate and maxDate, but only by using numeric offset like -20, or string of periods and units like "+2M +4D", but not by passing a date, since in the template there is this thing: $.datepicker.regional['{{ culture }}'] ,{{ configs|json_encode|raw }});

It means, that if You set it like bellow it won't work:

class MyFormType {
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
           ->add('my_date', 'genemu_jquerydate', [
                'widget' => 'single_text',
                'label' => 'publisher.poll.closing_date',
                'format' => $format,
                'configs' => [
                    'minDate' => new \DateTime(),
                    'maxDate' => "any string representing valid date",
                ],
                'required' => false,
            ]);
    }
}

I think that json_encode twig filter (which is actually regular PHP json_decode function) should be replaced with a custom one which will check if minDate/maxDate are date object, and then it'll create javascript Date() from it...