`
dh189
  • 浏览: 133062 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

扩展jquery的Datepicker成为可选择时间的Timepicker

jQueryUIIESafariOpera 
阅读更多
在有些需求中是需要选择时间的而jquery ui的Datepicker是不能选择时间的，现在找一个扩展了的插件非常好用，在附件中，使用截图如下：


1.在使用时需要导入的jquery ui js 文件
jquery.ui.datepicker.js
jquery.ui.slider.js
jquery-ui-timepicker-addon-0.5.js
以及一些ui的必须包。
2.在页面中加入Timepicker的css 
#ui-timepicker-div dl{ text-align: left; }
#ui-timepicker-div dl dt{ height: 25px; }
#ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }

使用示例如下： 
$('#example2').datetimepicker({
		ampm: false,//上午下午是否显示
		timeFormat: 'hh:mm',//时间模式
		stepHour: 1,//拖动时间时的间隔
		stepMinute: 5,//拖动分钟时的间隔
		dateFormat:"yy-mm-dd", //日期格式设定
		showHour: true,//是否显示小时，默认是true
		showMinute true//是否显示分钟，默认是true
	});
<input type="text" name="example2" id="example2" value="" />

  • 大小: 17.7 KB
  • 大小: 19.4 KB
分享到：
| memcache java 的简单操作（一）
评论
6 楼 bd_cool 2011-11-08  
老兄，例子里少个冒号 

$('#example2').datetimepicker({   
        ampm: false,//上午下午是否显示   
        timeFormat: 'hh:mm',//时间模式   
        stepHour: 1,//拖动时间时的间隔   
        stepMinute: 5,//拖动分钟时的间隔   
        dateFormat:"yy-mm-dd", //日期格式设定   
        showHour: true,//是否显示小时，默认是true   
        showMinute: true//是否显示分钟，默认是true   
    });
5 楼 bd_cool 2011-11-08  
这问题解决没啊?
4 楼 atgoingguoat 2010-12-23  
illegal character
http://127.0.0.1:7000/MMSA/js/jquery/jquery-ui-timepicker-addon-0.5.js
Line 1
3 楼 atgoingguoat 2010-12-23  
报错: $("#example2").timepicker is not a function
http://127.0.0.1:7000/MMSA/manager/newstat/customer_service_stat.jsp
Line 50
2 楼 atgoingguoat 2010-12-23   
<%@page contentType="text/html; charset=GBK"%>
<%@page import="com.kingter.mmssale.service.*,
                 java.util.ArrayList,
                 java.util.*,
                 com.kingter.mmssale.domain.*,
                 com.kingter.mmssale.util.FileManager,
                 com.kingter.common.util.StringUtil,
                 com.kingter.mmssale.business.flow.FlowControlBean,
                 com.kingter.common.util.*"%>
<!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=GBK">
<title>客服查询</title>

<style type="text/css">
body {
	font-size: 70%;
}
</style>

<link type="text/css" rel="Stylesheet"  href="../../theme/redmond/jquery.ui.all.css" />
<link type="text/css" href="../../theme/ui.jqgrid.css" rel="stylesheet" />
<link type="text/css" href="../../css/css.css" rel="stylesheet" />
<script type="text/javascript" src="../../js/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../js/jquery/jquery.bgiframe.js"></script>
<script type="text/javascript" src="../../js/jquery/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../js/jquery/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../js/jquery/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../js/jquery/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../js/jquery/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../../js/jquery/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../js/jquery/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../../js/jquery/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="../../js/grid.locale-cn.js"></script>
<script type="text/javascript" src="../../js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="sale_program_list.js"></script>
<script type="text/javascript" src="../../js/public.js"></script>

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

</head>
  
<%
  Employee employee = (Employee) session.getAttribute("employeeBean");
  String empID = employee.getEmpId();
  String compID = employee.getCompanyID();

%>
<script>

$(function() {
 
$('#example2').timepicker({   
        ampm: false,//上午下午是否显示   
        timeFormat: 'hh:mm',//时间模式   
        stepHour: 1,//拖动时间时的间隔   
        stepMinute: 5,//拖动分钟时的间隔   
        dateFormat:"yy-mm-dd", //日期格式设定   
        showHour: true 
    });
	    var dates = $("#datetimeinput").datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			changeYear: true,
			numberOfMonths: 3,
            dateFormat:"yy-mm-dd"
		});
});

</script>
<body bgcolor="#FFFFFF">

<input type="hidden" name="empID" value="<%=empID%>" />
<input type="hidden" name="companyID" value="<%=compID%>" />


<div id ="box" class="box">
用户手机号码:<INPUT maxLength=18 size=18 name="mobileNo" id="mobileNo" class="box-medium-input" value=""/>&nbsp;<font color="red">*</font>

统计开始时间:<input name="datetimeinput" type="text" class="box-medium-input" id="datetimeinput"/>
至:<input name="end-date" type="text" class="box-medium-input" id="end-date"/>
11
<input type="text" name="example2" id="example2" value="" />  
<input id="s_search" type="button" class="btn" value="查  询"/>
</div>

<table id="jsonmap"  ></table>
<div id="pjmap"  ></div>


 
  
<script type="text/javascript">
         var empID='<%=empID%>',compID='<%=compID%>';
        
	jQuery("#jsonmap").jqGrid({        
        datatype: "json", 
        hidegrid: false, //不显示收缩
        url:'../../system/CustomerStat/list.do?empID='+empID+'&compID='+compID,
        height: getPageHeight(),
        forceFit: true,//调整宽度不改变表格宽度
        width: getPageWidth(),
        

       
        colNames:['手机号码','任务名称','发送时间','操作员名','所属部门','彩信标题','操作'],      
        colModel:[     
			{name:'destMobileNo',index:'destMobileNo', width:100},
			{name:'programName',index:'programName', width:100},
			{name:'sendTime',index:'sendTime', width:110,sorttype:'date',datefmt:'y-m-d h:m:s'},
			{name:'proposerId',index:'proposerId', width:100},
			{name:'deptName',index:'deptName',sortable:false},
			{name:'ctitle',index:'ctitle',sortable:false},
            {name:'act',index:'act', width:190,sortable:false}   
        ],
        multiselect: false,//禁止多选
        rowNum:10, 
        rowList:[5,10,20], 
        viewrecords: true, 
        sortname:  "programID" , //默认排序的列名    //sortorder: "desc", 
        pager: '#pjmap', 
        jsonReader: {     
          root: 'dataRows',   
          repeatitems : false     
        }, 
        editurl:'../../sale/SaleProgram/update.do',
        gridComplete: function(){ 
            var ids = jQuery("#jsonmap").jqGrid('getDataIDs'); 
            for(var i=0;i < ids.length;i++){
                var cl = ids[i],be = "<a href='javascript:void(0)' onclick=\"fun_ck('"+cl+"')\" >彩信预览</a>"; 
                jQuery("#jsonmap").jqGrid('setRowData',ids[i],{act:be}); 
             } 
        },
     
        caption: "系统管理-->客服查询" 
    });
    
        function getPageWidth(){    
        return document.body.scrollWidth-5;    
    } 
    
    function getPageHeight(){    
        if($.browser.mozilla){
            return parent.document.body.scrollHeight-248;
		}else{//ie opera  safari
		    return parent.document.body.scrollHeight-253;
		}
    }   

    $(window).resize(function() {
        if($.browser.mozilla){
            jQuery("#jsonmap").setGridHeight(parent.document.body.scrollHeight-248);
            jQuery("#jsonmap").setGridWidth(parent.document.body.scrollWidth-192);
            $("#box").width(parent.document.body.scrollWidth-213);
		}else{//ie opera  safari
		    jQuery("#jsonmap").setGridHeight(parent.document.body.scrollHeight-253);
		    jQuery("#jsonmap").setGridWidth(parent.document.body.scrollWidth-195);
		    $("#box").width(parent.document.body.scrollWidth-216);
		}
    });
    

 
    
      $('#s_search').click(function(){
      	var mobileNo = $('#mobileNo').val();
      	var beginTime = $('#beginTime').val();
      	var endTime = $('#endTime').val();
      	
          $("#jsonmap").setGridParam({url:'../../system/CustomerStat/list.do?empID='+empID+'&compID='+compID+'&mobileNo='+mobileNo});
          $("#jsonmap").trigger('reloadGrid');
      })
      
       
      
       
	
</script>
  </body>
</html>
1 楼 atgoingguoat 2010-12-23  
我试了.怎么不行呢?
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics