Jump to content
VeiJari

How to customise datepicker times?

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 ūüôā

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By lenoir
      Hi,
      I've setup a date field with a date picker. I set it with a range of "-10:+10" for the years, but for some obscure reason (to me), instead of showing years from 2009 to 2029, it shows the coming 20 years (2019 - 2039). 
      Am I missing a preference somewhere?
    • By neophron
      Hi,
      I'm looking for a calendar solution. It should be like this: http://www.graalmueritz.net/plan-aurum.php
      The important part is, that the calendar should show 4 different stages:
      1. free
      2. arrival
      3. departure
      4. occupied
      and the actual date.
      This is for a german website. The client wants to manage the calendar be themself.
      I need detailed offers/estimations¬†in ‚ā¨.
       
      thank you, Nikolai
       

    • By karian
      Hi, based on the work of @microcipcip and @gebeer  (see their posts here and here), I put together a Processwire + React boilerplate (profile).
      Github repo: https://github.com/lapico/process-react

      Cheers,
      K
       
    • By Eunico Cornelius
      I am trying to get the strftime format from the function convertDateFormat(). However, the output has $ signs in it which i cannot use in strftime.(example of conversion : $d/$m/%Y what strftime actually uses: %d/%m/%Y). Am I in the wrong here or is there some way to format strftime? Thank you in advance :).
    • By Eunico Cornelius
      Hi, I am new to process wire and I've been trying to change the date time format in my webpage according to its language selection(example: English 'd/m/y' , Deutsch: 'd.m.y'). I know that using 
      $datetime->getDateFormats(); we can achieve the type of formats in the shape of indexes. Also, by using 
      $user->language->id we can know which language we are using. How do I combine this two functions so that when I select English/Deutsch, the date will be adjusted accordingly?
      Is there a specific function that can do this or is there any provided index in the $user->language somewhere. Thanks in advance :).
√ó
√ó
  • Create New...