Wordpress上的jQuery TimeEntry

Question

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

Answer 1

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.