0

I have a Time range field I am trying to implement into my Wordpress page. Where do I need to put this code and how do I call it when I want the range text box displayed on my page?

$('.timeRange').timeEntry({beforeShow: customRange}); 


function customRange(input) { 
    return {minTime: (input.id === 'timeTo' ? 
        $('#timeFrom').timeEntry('getTime') : null),  
        maxTime: (input.id === 'timeFrom' ? 
        $('#timeTo').timeEntry('getTime') : null)}; 
}

I have this for just a simple Time Entry field.

<script>
    $.timeEntry.setDefaults({spinnerImage: 'http://sdtest.net/wp-content/uploads/2017/06/spinnerDefault.png'});
    </script>
    <script>
    $(function () {
        $('#timeEntry').timeEntry({defaultTime: +20});
    });
</script>

and I call it with this html

<input type="text" id="timeEntry">

Just need help getting the ranged textbox script put in the right place and the correct code to call it.

Any help would be greatly appreciated.

Thanks, Matt

1 Answer 1

0

I think it should look like this:

<script>

$.timeEntry.setDefaults({spinnerImage: 'http://sdtest.net/wp-content/uploads/2017/06/spinnerDefault.png'});

function customRange(input) { 
  return {
    minTime: (input.id === 'timeTo' ? $('#timeFrom').timeEntry('getTime') : null),  
      maxTime: (input.id === 'timeFrom' ? $('#timeTo').timeEntry('getTime') : null)
  }; 
}

$(function () {   // This is a "document ready" wrapper

  $('#timeEntry').timeEntry({defaultTime: +20});      
  $('.timeRange').timeEntry({beforeShow: customRange});

});
</script>

There is no need to have multiple <script> and </script> tags like in what you posted. Those are tags to contain code.

$(function () { is a "document ready" wrapper.
It's the shorthand way to write $(document).ready(function(){

What is inside will only be executed when the DOM (Document Object Model) is fully loaded (So when all elements are loaded), instead of beeing executed on parsing.

5
  • Thanks. But how do I call it via html. On my wordpress page I have this to call the single date field. <input type="text" size="10" id="timeEntry" style="width:125px"></p>
    – Matt Synco
    Aug 11, 2017 at 4:14
  • Well I guess that would be <input type="text" size="10" class="timeEntry" style="width:125px">. In front of a jQuery selector, the . means a class and the # means an id. You can use the name you want as an id or a class... You can be creative! ;) Just one thing, never the same id for mulitple elements. But for classes, it's ok. Aug 11, 2017 at 4:18
  • Thanks. I'll give it a try. I wish there was a easier way to have a time range that wouldn't let the end time go below the start time.
    – Matt Synco
    Aug 11, 2017 at 4:21
  • Louys Patrice Bessette the suggestion you gave me put me on the right path. I had to put the class as class="timeRange" id="timeTo" to get it to work. Thank you so much!
    – Matt Synco
    Aug 11, 2017 at 4:24
  • Glad it helped ;) Aug 11, 2017 at 4:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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