繁体   English   中英

添加时间戳并将其移动到输入字段中

[英]Add and remove the timepicker to the input field dynamically

我正在使用时间选择器以15分钟的间隔选择时间。 我使用此链接中的timepicker。

我无法使用onclick函数将timepicker添加到输入文本字段。 这是我想要实现的一些示例代码。 请帮我解决这个问题。

的index.html

<link rel="stylesheet" href="include/jquery-ui-1.8.14.custom.css" type="text/css" />
<link rel="stylesheet" href="jquery.ui.timepicker.css?v=0.3.0" type="text/css" />
<script type="text/javascript" src="include/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="include/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jquery.ui.timepicker.js?v=0.3.0"></script>
<style type="text/css">
  .st{}
  .et{}
  #bod { font-size: small; margin:0px 0px 0px 0px; }
  body{font-size:10px;}
  ......
  <div id="bod">
    <input type="text"  id="timepicker_start1" value="" class="st"/>
    <input type="text"  id="timepicker_end1" value=""  class="et"/>
  </div>
  <input type="button" id="Add" name="Add" value="Add" onClick="add()" />
  <input type="hidden" id="tot" name="tot" value="1"/>
  ...

页面的javascript部分是:

<script type="text/javascript">
  function add(){
    var tot=document.getElementById("tot").value;
    tot=parseInt(tot,10);
    var i=tot+1;
    $('#bod').append(i+".   ");
    var s=$('<input/>').attr({type:'text',id:'timepicker_start'+i}).addClass('st').appendTo("#bod");
    var s1=$('<input/>').attr({type:'text',id:'timepicker_end'+i}).addClass('et').appendTo("#bod");
    $('#bod').append("  ");
    $('#timepicker_start'+i).timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
    $('#timepicker_end'+i).timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
    document.getElementById("tot").value=i;
  }
  $(document).ready(function(e) {
    $('#timepicker_start1').timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
    $('#timepicker_end1').timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
  });
</script>

你有一个错字:它的时间timepicker不是timpicker 除此之外你还不错 - 脚本正在运行 - http://jsfiddle.net/FNww8/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM