Jump to content

How to customise datepicker times?


VeiJari
 Share

Recommended Posts

Hello forum! 

Our customer wants to choose only 15 minute intervals in the inputfield Datetime. So the dropdown values would be: 0, 15, 30 and 45.

Is there an easy way to achieve this?

Any help is appreciated 🙂

Link to comment
Share on other sites

It's possible, but not as simple as it should be because it seems that the option() method of Datepicker (and Timepicker) is not working for the stepMinute option.

Instead it seems you have to destroy and re-init the datepicker if you change stepMinute. In some custom admin JS, for a field named "date"...

// For a Datetime field named "date" with time enabled
$('#Inputfield_date').on('focus', function() {
	// Get the existing options for the Datetimepicker
	var options = $(this).datetimepicker('option', 'all');
	// If the picker has the default stepMinute setting...
	if(options.stepMinute === 1) {
		// Set custom stepMinute setting
		options.stepMinute = 15;
		// Destroy picker
		$(this).datetimepicker('destroy');
		// Re-initialise picker
		$(this).datetimepicker(options);
	}
});

2019-05-30_122248.png.0e7a38af435ac2cca67e032399d5ee70.png

  • Like 8
Link to comment
Share on other sites

On 5/30/2019 at 3:24 AM, Robin S said:

It's possible, but not as simple as it should be because it seems that the option() method of Datepicker (and Timepicker) is not working for the stepMinute option.

Instead it seems you have to destroy and re-init the datepicker if you change stepMinute. In some custom admin JS, for a field named "date"...


// For a Datetime field named "date" with time enabled
$('#Inputfield_date').on('focus', function() {
	// Get the existing options for the Datetimepicker
	var options = $(this).datetimepicker('option', 'all');
	// If the picker has the default stepMinute setting...
	if(options.stepMinute === 1) {
		// Set custom stepMinute setting
		options.stepMinute = 15;
		// Destroy picker
		$(this).datetimepicker('destroy');
		// Re-initialise picker
		$(this).datetimepicker(options);
	}
});

2019-05-30_122248.png.0e7a38af435ac2cca67e032399d5ee70.png

Ah thank you for this. It was a bit weird for having to reinit it 😄

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...