Timepicker Addon: How can I change the sliders to selects without updating to the devns branch?

[Orkun]

Is it possible to turn the sliders for the timepicker addon to selects without updating to the devns branch? I downloaded the newest timepicker addon version from here: Timepicker Addon 1.6.1 and replaced it with the current timepicker addon which is version 0.9.9 under /wire/modules/Inputfield/InputfieldDatetime/jquery-ui-timepicker-addon.js. It worked more or less, I could change the sliders to selects but then as expected other problems occured like false timeFormats and so on. The Thing is that the customer wants a user-friendliy datepicker for desktop and mobile and sliders aren't so user-friendly. Is there a way to make 3rd party datetimepicker plugins to work with formbuilder? Have you any suggestions?

[Macrura]

i'm using the updated timepicker and it works fine so far - you would want to duplicate the inputfield (datetime) into your site directory and then tell PW to use that one;

from there you can make your changes... (like to the CSS file)

you may also need to add something like this to your admin custom files (ProcessPageEdit.js)

if(typeof $.timepicker != 'undefined') {
    $(function(){
        $.timepicker.custom = {
            stepMinute: 15,
            controlType: 'select',
            oneLine: true,
        };
        $.timepicker.setDefaults($.timepicker.custom);
    });
}

word is that the next version of PW will have the updated timepicker addon

[Orkun]

Thanks for your advice @Macrura, But I have still couple of questions:

Do you mean duplicate the current version from Github (https://github.com/ryancramerdesign/ProcessWire/tree/devns/wire/modules/Inputfield/InputfieldDatetime) to the modules directory in the site directory? And how can I tell then processwire he should use the InputfieldDatetime Folder instead of the original in wire? Could you possibly explain that further? 

[Orkun]

Ok I see that Processwire detects itself that a duplicate is existing and so I can change in the module settings of the InputfieldDatetime which one Processwire should use.

[Orkun]

Ok so far I have done this:

1. Copied the InputfieldDatetime Folder to /site/modules/ and replaced the old timepicker-addon js with the new one from the devns branch from Github (timepicker.js version 1.6.1).

2. Tell Processwire to use /site/modules/InputfieldDatetime insted of /wire/modules/InputfieldDatetime.

3. Install the Admin Custom Files Module

4. Create a file called ProcessPageEdit.js under /site/templates/AdminCustomFiles/

5. The content of the /site/templates/AdminCustomFiles/ProcessPageEdit.js:

if(typeof $.timepicker != 'undefined') {
    $(function(){
        $.timepicker.custom = {
            stepMinute: 15,
            controlType: 'select',
            oneLine: true,
        };
        $.timepicker.setDefaults($.timepicker.custom);
    });
}

6. Adjust the AdminCustomFiles Module Settings:

Now It should work but i still get the normal Datetimepicker with the slides:

What I am missing?

PS: I also have to translate the Datetimepicker to german, how can I achieve this?.

[Martijn Geerts]

AdminCustomFiles/ProcessPageEdit.js is not a folder, it's a file.
(I should raise an error over there)

[LostKobrakai]

Also if you intend to use the datepicker with formbuilder you should edit the inputfield's js file and not use AdminCustomFiles.

[Orkun]

@LostKobrakai

Yes I use the datepicker with formbuilder so i tried to make like you said:

edited /site/modules/FormBuilder/themes/plain/inputfield.js : 

$(document).ready(function() {
	// make the ui-widget-header labels perform like normal labels that focus their field
	// rather than opening/closing the ui-widget-content/input
	// the only exception is those that are already closed (.InputfieldStateCollapsed)
	// we leave those alone to continue doing what they were

	$(".InputfieldStateToggle").removeClass("InputfieldStateToggle"); 

}); 

if(typeof $.timepicker != 'undefined') {
    $(function(){
        $.timepicker.custom = {
            controlType: 'select',
            oneLine: true,
            timeOnlyTitle: 'Zeit wählen',
			timeText: 'Uhrzeit',
			hourText: 'Stunden',
			minuteText: 'Minuten',
			secondText: 'Sekunden',
			currentText: 'Jetzt',
			closeText: 'Fertig'
        };
        $.timepicker.setDefaults($.timepicker.custom);
    });
}

But with no effect.

[LostKobrakai]

I'm rather thought about /site/InputfieldDatetime/InputfieldDatetime.js. Not trying to overwrite any settings, but set them, when a timepicker is initialized (otherwise you cannot be sure you're setting the defaults early enough.

[Orkun]

Is it normal that the InputfieldDatetime.min.js is used insted of InputfieldDatetime.js in the FormBuilder Iframe? It would be easier to edit the InputfieldDatetime.js.

InputfieldDatetime.js:

var options = {

//It's easier to edit here(Don't work at the moment because the minified version is used)
//controlType:'select', 
//oneLine:true,	
	
changeMonth: true,
changeYear: true,
showOn: showOn,
buttonText: ">",
showAnim: 'fadeIn',
dateFormat: dateFormat,
gotoCurrent: true,
   defaultDate: tsDate
// buttonImage: config.urls.admin_images + 'icons/calendar.gif',
// dateFormat: config.date_format
}; 

InputfieldDatetime.min.js:

//(Works)
var k={/*controlType:'select', oneLine:true,*/ changeMonth:true,changeYear:true,showOn:j,buttonText:">",showAnim:"fadeIn",dateFormat:a,gotoCurrent:true,defaultDate:c};

Can I change it that the InputfieldDatetime.js is used?

[Macrura]

FYI i simply copied the stock module from 2.7 and then swapped out the js file, added the css;

i didn't try and use the module from devns, though i'm not sure if that matters;

the assumption is that eventually the new version of the datetime field would allow you to configure the settings, e.g. sliders vs. selects.

also i have not tested this with form builder, and since your post is in general support, the assumption is that this relates to the stock admin; for formbuilder support i would recommend posting in that private forum.

[LostKobrakai]

Just remove the minified version and it will fallback to the unminified one. Also enabling debug mode would work, which does automatically ignore the minified versions for the time being.

[kixe]

PS: I also have to translate the Datetimepicker to german, how can I achieve this?.

Normally the datepicker will be displayed in the current user language. You will find all translation files for the datetimefield in the folder:

/wire/modules/Jquery/JQueryUI/i18n/

But not everything is translated (Example: button 'done'). I made a translation for german. You could replace the file (jquery.ui.datepicker-de.js)

with this one:

/* German initialisation for the jQuery UI date picker plugin. */
/* Written by Milian Wolff (mail@milianw.de). */
jQuery(function($){
    $.datepicker.regional['de'] = {
        closeText: 'schließen',
        prevText: '<zurück',
        nextText: 'Vor>',
        currentText: 'heute',
        monthNames: ['Januar','Februar','März','April','Mai','Juni',
        'Juli','August','September','Oktober','November','Dezember'],
        monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
        'Jul','Aug','Sep','Okt','Nov','Dez'],
        dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
        dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
        dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
        weekHeader: 'KW',
        dateFormat: 'dd.mm.yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['de']);
        
/* Added by kixe. */
    $.timepicker.regional['de'] = {
        timeOnlyTitle: 'wählen Sie eine Zeit',
        timeText: 'Uhrzeit',
        hourText: 'Stunde',
        minuteText: 'Мinute',
        secondText: 'Sekunde',
        millisecText: 'Millisekunde',
        timezoneText: 'Zeitzone',
        currentText: 'jetzt',
        closeText: 'schließen',
        timeFormat: 'HH:mm',
        isRTL: false
    };
    $.timepicker.setDefaults($.timepicker.regional['de']);
});

[Orkun]

@kixe

Somehow the language only changes for the Datepicker but not for the timepicker.