jQuery timepicker 插件不适用于 struts2-jquery答案

【问题标题】：jQuery timepicker addon not work with struts2-jqueryjQuery timepicker 插件不适用于 struts2-jquery
【发布时间】：2013-12-19 19:11:02
【问题描述】：

我正在使用 Struts 2 和 jQuery。 timepicker的插件不起作用。

我的 JSP：

<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"                 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>TestPicker</title>
<sj:head jqueryui="true" locale="es" jquerytheme="redmond" />
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script> 
<style type="text/css">
    .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }   
.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }       
</style>
<script type="text/javascript">
$(function(){
   $('#txtTime').timepicker({});
});
</script>
</head> 
<body>
<input id="txtTime" type="text" name="txtTime" value="" ></input>
</body>
</html>

它会生成这个 HTML：

<script type="text/javascript" src="/Asistencia/struts/js/base/jquery-1.10.2.min.js"> 
 </script>
<script type="text/javascript" 
  src="/Asistencia/struts/js/base/jquery.ui.core.min.js?s2j=3.6.1"></script>
 <script type="text/javascript"  
src="/Asistencia/struts/js/plugins/jquery.subscribe.min.js?s2j=3.6.1"></script>

 <script type="text/javascript"   
    src="/Asistencia/struts/js/struts2/jquery.struts2.min.js?s2j=3.6.1"></script>

<script type="text/javascript">
$(function() {
jQuery.struts2_jquery.version="3.6.1";
jQuery.scriptPath = "/Asistencia/struts/";
jQuery.struts2_jquery.local = "es";
jQuery.struts2_jquery.gridLocal = "es";
jQuery.struts2_jquery.timeLocal = "es";
jQuery.ajaxSettings.traditional = true;

jQuery.ajaxSetup ({
    cache: false
});

jQuery.struts2_jquery.require("js/struts2/jquery.ui.struts2.min.js?s2j=3.6.1");

     });
     </script>

        <link id="jquery_theme_link" rel="stylesheet"  
      href="/Asistencia/struts/themes/redmond/jquery-ui.css?s2j=3.6.1"  
         type="text/css"/>


       <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>

我认为这段代码?s2j=3.6.1 有问题。

Page of TimePicker addon

现在，我将尝试使用ama3+anytime 插件。

【问题讨论】：

标签： java javascript jquery jsp struts2

【解决方案1】：

这个参数不是问题，它只是供内部使用，告诉插件插件的版本。问题出在您的 jQuery 代码中，因为您试图在创建此元素之前在该元素上绑定 timepicker。试试

$(document).ready(function(){
   $('#txtTime').timepicker({
     timeFormat: "hh:mm tt"
   });
});

【讨论】：

显示时间选择器但没有滑块。我在任何时候都使用 ama3+ 并且工作正常。