How to remove datepicker slider

[Amine Hamdi]

Hello there,

I need to remove the hour slider in the backend and replace it by another better way (more practical with a dropdown list for example or whatever).

Thank you very much in advance for any idea or useful option.

[Alex Tselegidis]

E!A uses the following add-on for the time picker:

http://trentrichardson.com/examples/timepicker

On the options tab there are plenty of stuff to change.

You should also check the official jquery ui datepicker API page:

http://api.jqueryui.com/datepicker

The modifications must be done on the widget instantiation on the JS files of the app located in the assets directory.

[Amine Hamdi]

I replaced the controlType parameter to 'select' in the /web/assets/js/libs/jquery/jquery-ui-timepicker-addon.js file like this:

Before: controlType: 'slider',

After: controlType: 'select',

then adjust the css and it worked fine for me.

Thank you very much.

[Craig Tucker]

I really like this modification. Thanks for putting it out there.

[Andreas Pawlowski]

Which css-file did you adjusted?

Please let me know the settings use used.

Thanks a lot.

[Amine Hamdi]

Hi Andreas,

I'am using this library: http://trentrichardson.com/examples/timepicker/ , you should have a look at the examples.

I did not adjust any CSS file.

Solution 1 - You need only this part of code in your JavaScript file (If you are using a separated JS file for your application):

$('#slider_example_4').datetimepicker({
	controlType: 'select',
	timeFormat: 'hh:mm tt'
});

When you add those lines and as you can see, the controlType should be 'select' instead of slider.

Solution 2 - You can also setup this setting by default by changing the original js file (jquery-ui-timepicker-addon.js) like this :

this._defaults = { // Global defaults for all the datetime picker instances
			showButtonPanel: true,
			timeOnly: false,
			....

			...
			controlType: 'slider', <=== change this to ==> controlType: 'select',
			...
			parse: 'strict',
			afterInject: null
		};
		$.extend(this._defaults, this.regional['']);

                ...

                            

With this change, all your timepickers will display by default the select form instead of the slider.

Personally, I am using the second solution because I need to use select form in all my timepicker's addon.

Hope it helps. If you still have questions, just ask.

Peace.