想要在一个html页面上显示两个时间选取器

Question

这是我为一个timePicker编写的代码，但我无法在一个HTML页面上显示两个timePickers。下面的代码对于我的一次性选取器来说工作得很好，但我无法使逻辑知道我应该如何使用两个输入上不同的id。

    function redirect(){
  document.getElementById("startTime").value=document.getElementById("test_default").value;
           var stime=document.getElementById("test_default").value;
    //alert(document.getElementById("endTime").value);
              window.localStorage.setItem('starttime', stime);
    //alert(stime);
         window.localStorage.setItem('id', id);
         window.location.replace("block.html");

          }
             function frameURL() {
        /*var address = document.getElementById("startTime");
        //var iframe = document.getElementById("iframe");
        //var frame = iframe.src;
        //address.value = frame;

             var iframe = document.getElementById('iframe');
             var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
             var usernameTextBox = innerDoc.getElementById('test_default');
    //usernameTextBox.focus();
            address.value = usernameTextBox;
            alert(usernameTextBox);
    //usernameTextBox.focus();*/
            var thetime= document.getElementById('iframe').contentWindow.document.getElementById("startTime").value;
              document.getElementById("startTime").value=thetime
         }

            function frameURL2() {

             var thetime=        document.getElementById('iframe1').contentWindow.document.getElementById("startTime").value;
       //alert(thetime);

           document.getElementById("startTime1").value=thetime
         }
          </script>

Answer 1

尝试使用jQuery timePicker。只需添加1个css&1 Js文件，您可以使用timePicker。这是我用过的时间选择器，它很容易使用。Jquery 1.6.4。将两个文本框放在一个div中&将该div的id放在这个JavaScript中。

<script type="text/javascript" charset="utf-8" >
        $(document).ready(function(){
            // find the input fields and apply the time select to them.
            $('#sample1 input').ptTimeSelect();
        });
    </script>

Answer 2

我使用了这个：timepicker和jqueryui的Datepicker。

HTML

<input class='timePicker' name='time_start'type='text' />
<input class='timePicker' name='time_end'type='text' />

jQuery

$(document).ready(function(){
    $('.timePicker').timepicker({
        timeFormat: 'hh:mm TT',
    });
});