0

I'm looking for a bit of help with regards to a Date/Time (Date Picker) field in J2store. A friend of mine has set up the field no problem, however, they want to restrict the times that can be selected (start and end time).

J2store seems to use the jQuery Timepicker Addon by Trent Richardson. There appears to be a function around line 2168 in the online version which seems to have a startTime parameter but i'm not really sure how to set it?

/**
 * Calls `method` on the `startTime` and `endTime` elements, and configures them to
 * enforce date range limits.
 * @param  {string} method Can be used to specify the type of picker to be added
 * @param  {Element} startTime
 * @param  {Element} endTime
 * @param  {Object} options Options for the `timepicker()` call. Also supports `reformat`,
 *   a boolean value that can be used to reformat the input values to the `dateFormat`.
 * @return {jQuery}
 */
$.timepicker.handleRange = function (method, startTime, endTime, options) {
    options = $.extend({}, {
        minInterval: 0, // min allowed interval in milliseconds
        maxInterval: 0, // max allowed interval in milliseconds
        start: {},      // options for start picker
        end: {}         // options for end picker
    }, options);

The website can be found here but unfortunately you need to add something to the basket and go through the checkout process before you reach the date/time picker in the payment section.

Any ideas with this one, would be most appreciated.

Best Regards D

2

After ordering a nice appetizer for $6.10 on the site :) I was able to check the datetime picker on the page.

This datetime picker is built in your_joomla/administrator/components/com_j2store/helpers/strappers.php

and from line 223 you have to change the following lines from this:

if($('.$element_datetime').length){
    $('.$element_datetime').datetimepicker({
        dateFormat: '$date_format',
        timeFormat: '$time_format',              
        $localisation
        });
    }

to this:

if($('.$element_datetime').length){
    $('.$element_datetime').datetimepicker({
        dateFormat: '$date_format',
        timeFormat: '$time_format',
        hourMin: 9,
        hourMax: 22,             
        $localisation
    });
}

(You can add any other valid options here in the code).

The only problem will be with this editing that at the next update of J2Store this change is going to be over written by the update.

Thus for long term you will have to create and load an override of this jQuery function and load it in the template (or in the checkout view) somewhere (If I find a bit more time, I'll update with a possible override function on this). But until I wanted to give you the shorthand, fast solution on this.

UPDATE - FOR LONG TERM SOLUTION

Of course we do not want to edit core j2store files as I gave it above, so just do not do it. Instead for modifying the default j2store datetime picker, the following short jQuery script should be loaded with the J2Store template (in index.php file for example) or with the checkout view (tmpl) where the datetime picker appears (an override of the default_shipping_payment.php layout file for example).

<script type="text/javascript">

let $ = jQuery.noConflict();
$(document).ready(function(){
    let greatpicker = $.timepicker.mine = {
        hourMin: 9,
        hourMax: 21,
    };
    $.timepicker.setDefaults(greatpicker);
    $('#pickup_date_time').datetimepicker(greatpicker);                               
});

// '#pickup_date_time' should always be adjusted to the id selector of the datetime picker element. 
// This in the example is the id of the element on the restaurant site given in the question.

</script>

This short jQuery script limits the available time range in the datetime picker from 9am to 10pm, in which time range the restaurant wants to deliver orders.

The time format can be set in j2store dashboard at joomla admin->j2store->apps->custom fields

where you open [your date field name], in your case it's pickup-date-time, and you can find a setting input field called Format. You just place the following format in that: yy-mm-dd | h:mm tt and actually you are done, you have the time format displayed in a 12-hour clock format (with am and pm). Here you can also set like mm-dd-yy | h:mm tt and the date format is going to be "month-day-year" in the datetime picker.

  • Brilliant, thank you so much. As an added query, could the resulting time be converted to 12 hour rather than 24 hour clock including AM/PM or would that be asking too much? – Dtorr1981 May 2 at 22:42
  • @Dtorr1981 - Hi Donna, no problem, it's easier since the datetime format of this custom datetime field has to be set in j2Store dashboard. I updated my answer on this. – Zollie May 3 at 5:30
  • I changed the time format in the settings but this did not work, I had to make a minor adjustment within the jquery-ui-timepicker-addon.js file and this then worked. In lieu of this I added the script as a custom.js file within the template directory so it would not be overwritten. – Dtorr1981 May 18 at 15:46
  • 1
    @Dtorr1981 - Thanks for the feedback and accepting the answer! I tested the timeformat changes in my J2Store admin and worked without a problem, so I do not really see the issue on the given site. It should actually work as it is overriding the default timeformat setting in J2store code. However, the point is that it is now working for you and cannot be over-written by updates. Custom.js is an acceptable solution too. – Zollie May 18 at 16:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.