Clear button in the time picker

Hi Flyer29,

The date and time picker has its own language files. You can modify the language by going to the Bookings > Settings page in your WordPress admin area. Modify the Language section here.

If your language isn’t supported, you should consider adding it to the Pickadate project.

If your language is supported but you don’t like the word choice, customization will be a bit more complicated.

Got it. I selected de_DE in the admin panel for the language, but the “clear” is still popping up at the end of the time picker. I’ll have a look at this project ??

This does indeed seem to be a problem. I’ll have to investigate to see if it’s an issue with Pickadate or a problem with my implementation. Thanks for letting me know.

In the meantime, you could try a jQuery hack to replace the Close text at run-time. You’d need to enqueue the following:

$( '.rtb-booking-form .picker--time .picker__button--clear' ).text( 'Your Close Button Text' );

Make sure that’s wrapped in your jQuery ready function. When the page is loaded, it will just replace the text.

jQuery hack…. Uuuuh I’m not sure if I’m that good. My next project being to make the Phone field mandatory (what will cost me about the day I think), I’ll go deep deep deep inside jQuery as soon as the weather start to be bad again. But thanks for the hints, you are wonderful Nate!

I put up a quick Gist on how to make the Phone number required. If you’re not familiar with that, it’s just a small plugin. Click the Download Gist button on the right and upload the .php file to your wp-content/plugins/ directory, then activate the plugin.

Won-der-ful !!!! Thanks a lot for the perfect help within less than 5 seconds!

FYI, I’m following this up with the pickadate.js project. I’ve made a pull request to fix this, but I won’t port it back to my project until Amsul has signed off on it in case there is a better way to address the issue.

OK. Sorry if I was not clear but I’m pretty new to all this stuff. Unfortunately I can’t show you anything but I can try to be clearer. In my specific case (but I had to change a lot in the booking-form.js adding a listener due to my dynamically loaded page), the following happened:
– Dynamically loaded was OK (in this case the picker holder for the time picker and the date picker was in the body).
– On Refresh (pressing the button on the browser or after getting the page back with the error messages) the date picker holder was still in the body but the time picker was in the li of the time field messing up the theme.

Looking within booking-form.js, I saw that you defined a container () for the date picker but not for the time picker. So adding the same container for the time picker solved the issue for me.

‘var date_input = jQuery( ‘#rtb-date’ ).pickadate({
format: rtb_pickadate.date_format,
formatSubmit: ‘yyyy/mm/dd’,
hiddenName: true,
min: true,
container: ‘body’,

// Select the value when loaded if a value has been set
onStart: function() {
if ( jQuery( ‘#rtb-date’ ).val() !== ” ) {
var date = new Date( jQuery( ‘#rtb-date’ ).val() );
if ( Object.prototype.toString.call( date ) === “[object Date]” ) {
this.set( ‘select’, date );
}
}
}
});

var time_input = jQuery( ‘#rtb-time’ ).pickatime({
format: rtb_pickadate.time_format,
container: ‘body’, formatSubmit: ‘h:i A’,
hiddenName: true,
interval: parseInt( rtb_pickadate.time_interval, 10 ),

// Select the value when loaded if a value has been set
onStart: function() {
if ( jQuery( ‘#rtb-time’ ).val() !== ” ) {
var today = new Date();
var today_date = today.getFullYear() + ‘/’ + ( today.getMonth() + 1 ) + ‘/’ + today.getDate();
var time = new Date( today_date + ‘ ‘ + jQuery( ‘#rtb-time’ ).val() );
if ( Object.prototype.toString.call( time ) === “[object Date]” ) {
this.set( ‘select’, time );
}
}
}
});’

ups. I was posting in the wrong thread, this is had nothing to do with the clear button not translating. Sorry for this one.

Hi Flyer29,

Thanks, I understand what you’re saying. It’s not clear to me why the container is needed in this case, but perhaps there are some styling conflicts going on in your case. The consequence of modifying it in this instance is that anyone who has wrapped specific styles for the time picker in a .rtb-booking-form class will lose their styling. I’ll give it a think for the next version.

Hi Flyer29,

I’ve made your recommended change and it will go out with the next version — probably tomorrow. Thanks for your help.