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 louisstephens
      So I have been hard at work creating url segments for a template (api) and everything is working swimmingly in creating a simple end point for svelte.js. I have however, run into a few questions that I can wrap my head around.
      In my api template I have:
      if($input->urlSegment1 === 'clients') { header('Content-Type: application/json'); $clients = $pages->find("template=clients"); $client_array = array(); foreach ($clients as $client) { $id = $client->id; $title = $client->title; $url = $client->url; $clientName = $client->client_name; $clientColor = $client->client_color->value; $assigned = $client->assigned_to->user_full_name; $client_array[] = array( 'id' => $id, 'code' => $title, 'name' => $clientName, 'associated_users' => $assigned, 'url' => $url ); } $client_json = json_encode($client_array, true); echo $client_json; } The output json from this is:
      [ { "id":1644, "code":"abc", "name":"Test Name", "associated_users":null, "url":"\/pw\/clients\/abc\/" }, { "id": 1645, "code": "xyz", "name": "Test Name", "associated_users": null, "url": "\/pw\/clients\/xyz\/" }, ] I was curious is it possible to add in "clients" before this output json so it would appear as 
      clients: [ { "id":1644, "code":"abc", "name":"Test Name", "associated_users":null, "url":"\/pw\/clients\/abc\/" }, { "id": 1645, "code": "xyz", "name": "Test Name", "associated_users": null, "url": "\/pw\/clients\/xyz\/" }, ] I was not really sure of how to tackle this in my php code, and have spent more time than I care to admit trying to figure it out. Another question I have is that "associated_users" is returning null, which in this instance is correct. It is a multi page field that is set to pull a custom name field from the users template, ie "Louis Stephens" would be associated with the first page. I understand that I need to use a foreach to get the correct data, but I was really unsure of how to place this inside an array, or update the array with the new data. Any help with any of this would greatly be appreciated.
    • 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?
×
×
  • Create New...