`
dh189
  • 浏览: 135328 次
  • 性别: 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  
我试了.怎么不行呢?
发表评论

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

相关推荐

    jQuery UI Datepicker插件timepicker时分秒

    在Web开发中，日期和时间的选择常常是一项必不可少的功能，jQuery UI Datepicker插件是一个非常流行的选择工具，它为用户提供了直观、易于使用的日期选择界面。然而，Datepicker默认只支持日期选择，不包含时间选择...

    jQuery时间选择器datepicker年月日时分秒选择

    其中，jQuery UI是jQuery的一个扩展库，提供了一系列可交互的用户界面组件，其中包括我们今天要讨论的"日期选择器"——jQuery UI Datepicker。这个插件允许用户方便地选择日期，甚至可以扩展到选择时间，实现年月日...

    jQuery-Timepicker-Addon-master(jquery 日历时间)

    通过结合jQuery与Timepicker-Addon，开发者能够快速集成具有丰富特性的日期和时间选择器，如自定义格式化、多种语言支持和各种可配置选项。 1. **基本使用** - 首先，需要在项目中引入jQuery库和jQuery-Timepicker...

    只选择小时、分的时间JS时间控件

    总之，`jquery-timepicker.js`是一个强大的、可定制的时间选择插件，适用于需要用户仅选择小时和分钟的场景。通过灵活的配置和丰富的API，开发者可以轻松地将其集成到自己的项目中，提升用户界面的友好性和功能性。

    jquery时间控件

    "jquery-ui-timepicker-addon.js"就是这样一个插件，它扩展了jQuery UI，为日期选择器添加了时间选择功能，使用户能够更方便地选择和输入时间。 "jquery-ui-timepicker-addon.js"是基于jQuery UI的，因此首先你需要...

    Jquery日期时间选择控件

    3. **时间选择**：若需添加时间选择功能，可以使用像Timepicker Addon这样的扩展，它可以与Datepicker无缝集成，增加小时和分钟的选择。 4. **事件处理**：Datepicker提供了如`select`、`changeMonth`和`changeYear...

    JQuery 时间控件、日期控件

    虽然jQuery UI本身并未提供时间选择器，但社区开发了许多第三方时间控件，如“jQuery Timepicker”插件。这个插件通常与Datepicker一起使用，以提供完整的日期和时间选择功能。例如，"jQuery Timepicker Addon"（由...

    jquery 时间控件实例

    它扩展了Bootstrap Datepicker，增加了对时间的支持。通过`$("#datetimepicker").datetimepicker();`可以创建一个日期时间选择器。你可以自定义格式、改变语言、限制可选日期范围等。 4. **jQuery EasyUI Timebox**...

    jquery 时间插件

    一个典型的例子是jQuery UI的Datepicker插件，虽然其主要针对日期，但通过扩展可以实现时间选择功能。此外，还有像`jQuery-Timepicker-Addon`这样的专门时间插件，它为jQuery UI Datepicker提供了时间选择支持。 在...

    jquery 时间控件

    2. **时间控件插件**：jQuery社区提供了许多时间选择插件，如jQuery UI的DatePicker、Bootstrap的时间选择器（Timepicker）等。这些插件通常包含自定义样式和丰富的功能，如日期和时间的格式化、限制可选范围、禁用...

    jquery-ui控件

    2. **时间选择器（Timepicker）**：虽然 jQuery UI 自带的 Datepicker 不包含时间选择功能，但社区中存在许多扩展插件，如 Timepicker Addon，它可以与 Datepicker 结合，提供时间选择功能。这些插件通常支持多种...

    25种精品JQuery时间控件

    5. **Timepicker Addon for jQuery UI**：扩展了jQuery UI的Datepicker，增加了时间选择功能，可以单独选择时间或与日期一起选择。 6. **jQuery Timepicker**：一个独立的时间选择器插件，设计简洁，提供多种样式和...

    jquery 时间控件 触屏滑动

    要实现一个jQuery时间控件，开发者可以利用现有的插件，如jQuery UI的Datepicker组件，它可以扩展以支持时间选择。此外，还有一些专门针对时间选择的插件，如Bootstrap Timepicker或Eonasdan Bootstrap ...

    jquery时间插件的三种模式

    jQuery Mobile提供了一个TimePicker插件，它可以与HTML5的`&lt;input type="time"&gt;`元素结合使用，提供触摸友好的时间选择界面。开发者可以通过`step`属性设置时间步进值，`disableTextInput`选项则可以选择是否禁用...

    jq日期控件可选择时间、日期、星期

    以上就是使用jQuery创建可选择日期、时间、星期的控件的基本步骤。通过不同的插件和配置选项，你可以根据项目需求定制更复杂的日期和时间选择功能，提升用户体验。在实际应用中，确保正确引入所有依赖库，并根据项目...

    JQueryUI架包

    - **时间选择器（Timepicker）**：与日期选择器结合，提供完整的日期和时间选择功能。 #### 2.2 效果（Effects） - **基本效果**：包括淡入淡出、滑动、切换等。 - **组合效果**：通过链式调用来实现更复杂的动画...

    日期选择控件，时间选择，asp时间插入

    在IT行业中，日期选择控件和时间选择器是网页或应用程序界面中不可或缺的元素，它们允许用户方便地输入和选择日期或时间值。在给定的标题“日期选择控件，时间选择，asp时间插入”中，我们可以推断出这个压缩包可能...

    JQueryUI组件 JS下载

    - **Timepicker（时间选择器）**: 扩展了日期选择器，添加了时间选择功能。 - **Progress Bar（进度条）**: 显示任务完成进度，增强用户体验。 - **Autocomplete（自动补全）**: 输入框自动填充建议，常见于搜索...

    jquery-ui-1.8.6

    8. **插件生态系统**：jQuery UI 社区发展活跃，存在大量的第三方插件和扩展，如时间选择器（Timepicker）、树形视图（Treeview）等，可以进一步增强其功能。 9. **源码结构**：在解压后的`jquery-ui-1.8.6`文件中...

    JqueryDateTimePicker

    它基于广泛使用的**jQuery**库，并扩展了基本的日期选择器功能，增加了对时间选择的支持，使得用户能够方便地选取特定的日期和时间。这款插件尤其适合那些需要在网页表单中输入日期和时间的场合，例如预订系统、日程...

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