CODEWITHSUNDEEP
symfonydatewidgetcustomization
sisko
sisko

Reputation: 9900

Symfony date widgets customizations

I am new to Symfony and I just discovered the date widget, ->add('dueDate', 'date', array('widget' => 'single_text')), delivering the following output: enter image description here

I wonder if it's possible to customize the widget output so that only dates and years I have in my database are selectable in the widget?

I want only dates and years fetched from my database entries to be selectable options in the date widget with the rest greyed out.

Is this doable?

Upvotes: 0

Views: 828

Answers (3)

b.b3rn4rd
b.b3rn4rd

Reputation: 8830

If would suggest you to disable html5 datepicker and use jquery version.

Disable html5 and attach jquery:

$builder->add('date_created', 'date', array(
    'widget' => 'single_text',
    'html5'  => false,
    'format' => 'd/MM/y',
    'attr' => array(
        'class' => 'datetimepicker'
    )
));

datepicker configuration:

$('.datetimepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd/mm/yy"
});

Upvotes: 1

Frank B
Frank B

Reputation: 3697

the date type outputs this in html:

<input type="date" name=... >

Which is a valid HTML5 input type. With this type all major browsers will show you some kind of calendar but this is browser-depended!

You can consider a javascript solution like jqueries datepicker or the datetimepicker that i like but in that case you should use just a normal text field (->add('dueDate', 'text');) and follow the conventions of the date(time)picker of your choice at clientside.

Upvotes: 0

Jovan Perovic
Jovan Perovic

Reputation: 20191

I might be wrong, but I think this (on picture) is a built-in Chrome's datapicker (which utilizes date input type). Furhtermore, majority of browsers do not have their own built-in datepickers (e.g. latest Firefox)

You might be able to find a way to style it (very limited, presumably), but to fine grain the selection, it would take for you to use some JS-based solution.

Something like this?

Upvotes: 2

Related Questions