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 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 :).
    • By rgaikema
      Hi everyone,
      Currently I'm struggling with a filter option and I hope somebody can help or advise me the right way to this.

      What I want is an index page where campaigns are shown and where I can filter the campaigns by year.
      Each campaign has a datetime field with the output set to "j F Y", so it shows "1 April 2016" in the frontend.
      The dates are unique for each campaign, but there can be multiple campaigns in the same year.
      The page structure is:
      -client
      --campaign-a
      --campaign-b
      --campaign-c
      --campaign-d
      This is the PHP code I use on the client page to display all the campaigns.
      $campaigns = $page->children("sort=sort"); foreach ($campaigns as $campaign) { if($campaign->campaign_description) { echo '<div class="campaign-description info">'; echo '<h2>' . $campaign->title . '</h2>'; echo '<p>' . $campaign->campaign_description . '</p>'; // Todo remove only for testing $campaignDate = $campaign->campaign_date; $campaignYear = substr($campaignDate, -4); echo '<i>' . $campaignDate . '</i>'; echo '</div>'; } } $campaignYear is where I see the years, 2015, 2016, 2017 and so on.
      Here I create the dropdown to show the unique years:
      if (count($campaigns)) { // Store unique Years $arr = array(); foreach ($campaigns as $campaign) { $campaignDate = $campaign->campaign_date; $campaignYear = substr($campaignDate, -4); $arr[] = $campaignYear; } $unique_years = array_unique($arr); // Show dropdown with unique years echo '<select id="campaign-date-select">'; foreach($unique_years as $year) { echo '<option value="' . $year . '">' . $year . '</option>'; } echo '</select>'; }
      I read a couple of articles, for example this: https://processwire.com/talk/topic/8513-sort-with-select-dropdown/
      but I can't figure out how to dynamically change the output of the campaigns, based on the input of the select options.
      Maybe the datetime field is not the best option, or maybe I have to use URL segments and JavaScript to combine something...
      Any help or advise is welcome!
       
√ó
√ó
  • Create New...