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 BFD Calendar
      We're looking for someone who can make an addon for our website using Formbuilder and publishing the pages to a Google Calendar instantly.
      The use is a setup for laser reservations for a modelbuilding lab, see www.mekano.info to have a bit of an idea. On the 'calendar' page you'll find a linked Google calendar that lists all events per day. These events are now all added by staff members in a shared Google calendar. Underneath the calendar is a list of recent use of our lasercutters, generated by a form where user, machine and start time are entered and duration is calculated by editing that form. I have a likely form to add a reservation to enter user, machine and time/date but we want them to go into our shared Google calendar 'immediately'. If you look at early June in the calendar you can see how it should look like.
      I know there are simple solutions to make this happen but haven't figured a working out.
      We want Google calendar so all our staff can subscribe and see the calendar on all their devices. On the other hand we want to keep a list of students who made reservations because at some point they are limited.
      If you're interested I can give you a login to see a bit more behind the curtains. Part of the website is public for students and guests, quite a few functional pages are only visible when you're logged in.
    • By Orkun
      Hi Guys
      I needed to add extended functionalities for the InputfieldDatetime Module (module is from processwire version 2.7.3)Ā because of a Request of Customer.
      So I duplicated the module and placed it under /site/modules/.
      I have added 3 new Settings to the InputfieldDatetime Module.
      1. Day Restriction - Restrict different days based on weekdays selection (e.g. saturday, sunday) - WORKING

      Ā 
      2. Time Slots - Define Time slots based on custom Integer Value (max is 60 for 1 hour) - WORKING

      Ā 
      3. Time Range Rules per Weekday - Define a minTime and MaxTime per Weekday (e.g. Opening Hours of a Restaurant) - NOT WORKING PROPERLY

      Ā 
      The Problem
      Time SlotsĀ and Day Restriction working fine so far. But the Time Range Rules per Weekday doesn't work right.
      What should happen is, that when you click on a date, it should update the minTime and maxTime of the Time Select.
      But the change on the select only happens if you selectĀ a date 2 timesĀ or when you select a date 1 time and then close the datepicker and reopen itĀ again.
      The time select doesn't get change when you select a date 1 time and don't close the picker.
      Here is the whole extended InputfieldDatetime Module.
      The Files that I have changed:
      InputfieldDatetime.module InputfieldDatetime.js jquery-ui-timepicker-addon.js (https://trentrichardson.com/examples/timepicker/) - updated it to the newest version, because minTime and maxTime Option was only available in the new version Ā 
      Thats the Part of the JS that is not working correctly:
      if(datetimerules && datetimerules.length){ options.onSelect = function(date, inst) { var day = $(this).datetimepicker("getDate").getDay(); day = day.toString(); var mintime = $(this).attr('data-weekday'+day+'-mintime'); var maxtime = $(this).attr('data-weekday'+day+'-maxtime'); console.log("weekday: "+day); console.log("minTime: "+mintime); console.log("maxTime: "+maxtime); var optionsAll = $(this).datetimepicker( "option", "all" ); optionsAll.minTime = mintime; optionsAll.maxTime = maxtime; $(this).datetimepicker('destroy'); $(this).datetimepicker(optionsAll); $(this).datetimepicker('refresh'); //$.datepicker._selectDate($(this).attr("id"),date); //$.datepicker._base_getDateDatepicker(); // var inst = $.datepicker._getInst($(this)); // $.datepicker._updateDatepicker(inst); /*$(this).datetimepicker('destroy'); InputfieldDatetimeDatepicker($(this), mintime, maxtime); $(this).datetimepicker('refresh'); */ // $(this).datetimepicker('option', {minTime: mintime, maxTime: maxtime}); } } Can you have a look and find out what the Problem is?
      InputfieldDatetime.zip
      Ā 
      Kind Regards
      Orkun
    • By dragan
      What the f*ck JavaScript? A list of funny and tricky JavaScript examples
      Some really odd stuff there... worth scanning through. I chuckled more than once...
      "b" + "a" + +"a" + "a"; // -> 'baNaNa' NaN === NaN; // -> false (![] + [])[+[]] + (![] + [])[+!+[]] + ([![]] + [][[]])[+!+[] + [+[]]] + (![] + [])[!+[] + !+[]]; // -> 'fail' typeof NaN; // -> 'number' (It ain't new, so sorry if this has been posted previously here)
    • 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
      Ā 

Ɨ
Ɨ
  • Create New...