Jump to content

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


Orkun
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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.

post-3125-0-86479700-1450256389_thumb.pn

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:

post-3125-0-16688000-1450256636_thumb.pn

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

post-3125-0-07125700-1450256740_thumb.pn

What I am missing?

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

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...

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']);
});
  • Like 1
Link to comment
Share on other sites

  • 8 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...