`

jquery ui 日期控件

阅读更多

需要提前引入jquery ui 相关的包

1.不带时分秒的日期控件,而且可以控制其开始日期的选择只能在结束日期的前面,结束日期的选择只能在开始日期的后面

开始日期<input  id="startDate" name="startDate" readonly="readonly" />

结束日期<input id="endDate" name="endDate"   readonly="readonly"/>

 

function  initDate(startDate,endDate){
    $(startDate).datepicker( "destroy" );
    $(endDate).datepicker( "destroy" );
    $(startDate).datepicker({
     changeMonth: true,
     changeYear: true,
     showMonthAfterYear:true,
     dateFormat: 'yy-mm-dd',
     onSelect:function(dateText,inst)
     {
      var  arys  = new Array();
      var  arys  =  dateText.split('-');
      $(endDate).datepicker('option','minDate',new  Date(arys[0],arys[1]-1,arys[2]));
     }
    });
    $(endDate).datepicker({
     changeMonth: true,
     changeYear: true,
     showMonthAfterYear:true,
     dateFormat: 'yy-mm-dd' ,
     onSelect:function(dateText,inst)
     {
      var  arys  = new Array();
      var  arys  =  dateText.split('-');
      $(startDate).datepicker('option','maxDate',new  Date(arys[0],arys[1]-1,arys[2]));
     }
    });
  }

 

2.带时分秒的日期控件,与上面的日期控件有相同的功能 

首先引入jquerytimepicker包

声明变量

var myControl=  {
  create: function(tp_inst, obj, unit, val, min, max, step){
   $('<input class="ui-timepicker-input" value="'+val+'" style="width:50%">')
    .appendTo(obj)
    .spinner({
     min: min,
     max: max,
     step: step,
     change: function(e,ui){ // key events
       // don't call if api was used and not key press
       if(e.originalEvent !== undefined)
        tp_inst._onTimeChange();
       tp_inst._onSelectHandler();
       
      },
     spin: function(e,ui){ // spin events
       tp_inst.control.value(tp_inst, obj, unit, ui.value);
       tp_inst._onTimeChange();
       tp_inst._onSelectHandler();
      }
    });
   return obj;
  },
  options: function(tp_inst, obj, unit, opts, val){
   if(typeof(opts) == 'string' && val !== undefined)
    return obj.find('.ui-timepicker-input').spinner(opts, val);
   return obj.find('.ui-timepicker-input').spinner(opts);
  },
  value: function(tp_inst, obj, unit, val){
   if(val !== undefined)
    return obj.find('.ui-timepicker-input').spinner('value', val);
   return obj.find('.ui-timepicker-input').spinner('value');
  }
 };

 

function  initDate(startDate,endDate){
 $(startDate).datetimepicker( "destroy" );
 $(endDate).datetimepicker( "destroy" );
 $(startDate).datetimepicker({
  controlType: myControl,
  onSelect:function(dateText,inst)
  {
   var  arys  = new Array();
   // 日期的字串格式为2013-08-15 00:00
   var  arys  =  dateText.split('-');
   // 分割15 00:00 得到15
   var  dayAndTime = arys[2].split(' ');
   $(endDate).datetimepicker('option','minDate',new  Date(arys[0],arys[1]-1,dayAndTime[0]));
  }
 });
 $(endDate).datetimepicker({
  controlType: myControl,
  onSelect:function(dateText,inst)
  {
   var  arys  = new Array();
   var  arys  =  dateText.split('-');
   var  dayAndTime = arys[2].split(' ');
   $(startDate).datetimepicker('option','maxDate',new  Date(arys[0],arys[1]-1,dayAndTime[0]));
  }
 });
}

 

分享到:
评论

相关推荐

    JqueryUI 日期控件

    **jQuery UI 日期控件详解** 在Web开发中,日期选择功能是不可或缺的一部分,尤其是在处理用户输入日期数据的场景下。jQuery UI库提供了一个强大的、易于使用的日期选择器控件,它大大简化了在网页上添加日期选择...

    jqueryui 日期控件demo

    **jQuery UI 日期选择器(Datepicker)控件** jQuery UI 是一个强大的 JavaScript 库,它扩展了 jQuery 的功能,提供了丰富的用户界面组件。在这些组件中,日期选择器(Datepicker)是一个非常常用且实用的功能,常...

    jquery漂亮日期控件 jquery美化

    而“jQuery漂亮日期控件”则是在jQuery基础上,为网页添加美观、用户友好的日期选择功能。这类控件通常会提供自定义样式,易于使用的接口,以及多种显示和交互模式,提升用户在输入或选择日期时的体验。 标题中的...

    jqueryUI日期控件和时间控件-附件资源

    jqueryUI日期控件和时间控件-附件资源

    jquery_ui日历控件

    总之,jQuery UI的日历控件是一个功能强大、易于使用的组件,能够为你的网页增添实用的日期选择功能。通过深入理解和灵活运用其各种选项和事件,你可以创建符合业务需求的日历界面,提升用户体验。

    jquery-ui控件

    jQuery UI 包含了一系列的可定制的、易于使用的控件,如日期选择器、滑块、对话框等,大大简化了前端开发工作。 **jQuery UI 控件** 1. **日期选择器(Datepicker)**:jQuery UI 提供了一个强大的日期选择器插件...

    Jquery时间日期控件[修改][日期时间-日期-时间]

    在日期时间控件方面,jQuery提供了一些插件,如jQuery UI的Datepicker和Bootstrap DateTimePicker,这些插件能够帮助开发者轻松创建用户友好的时间日期选择器。 1. **jQuery UI Datepicker**: 这是jQuery的一个核心...

    简洁漂亮的jquery日期选择控件代码

    本文将深入探讨如何使用jQuery实现一个简洁、漂亮的日期选择控件,并通过提供的压缩包文件来演示具体代码实现。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画创建等任务。在构建日期选择器时...

    jQuery UI 时间控件 附i18n包

    基于jQuery UI的一款优秀的时间控件,可以自定义i18n信息哦(jquery-ui-timepicker-addon-i18n.js),引用全套(jquery-1.11.3.js;jquery-ui.js;jquery-ui-timepicker-addon.js;jquery-ui-timepicker-addon-i18n.js;...

    jquery日期控件(有下拉菜单选择年份)

    《jQuery日期控件:下拉菜单选择年份的实现》 在Web开发中,日期选择控件是不可或缺的一部分,它提供了用户友好的界面,让用户能够方便地输入或选择日期。在JavaScript库中,jQuery以其易用性和丰富的插件库而备受...

    jquery 日期时间控件

    常见的jQuery日期时间控件有jQuery UI的DatePicker、Bootstrap DateTimePicker、Pickadate.js等。这里以Bootstrap DateTimePicker为例,因为它不仅外观美观,而且功能强大,支持多种语言和自定义配置。 首先,你...

    JQueryUI,EasyUI一些控件的使用

    总结起来,JQueryUI和EasyUI都是强大的前端开发工具,它们提供了一系列预封装的UI控件,帮助开发者快速构建美观且交互性强的Web应用。无论你是选择JQueryUI的丰富组件和主题定制,还是EasyUI的轻量级和易用性,都...

    jquery datepicker 日期控件

    《jQuery UI Datepicker 日期选择器详解》 在网页开发中,日期选择器是一个非常常见的功能,用于方便用户输入或选择日期。jQuery UI中的Datepicker是实现这一功能的强大工具,它以其灵活性、易用性和良好的跨浏览器...

    jquery-ui-1.8.14.custom J-UI日历控件

    而jQuery UI的脚本则包含了实现日历控件的各种函数和逻辑,如日期解析、日期格式化、事件绑定等。 在“index.html”文件中,你可以看到一个简单的示例,展示了如何在网页中集成和使用这个日历控件。通过这个示例,...

    jQuery_UI控件

    《jQuery UI控件详解》 jQuery UI 是一个基于jQuery库的开源项目,它提供了一系列丰富的交互式用户界面组件,使得Web开发者能够轻松地创建出功能强大且美观的网页应用。这些控件涵盖了从基本的布局元素到复杂的交互...

    bootstrap&jQueryUI例子

    在"bootstrap&jQueryUI例子"这个压缩包中,可能包含的是结合了这两个框架的示例代码或项目。这些示例通常会展示如何在同一个页面中有效地利用 Bootstrap 的布局和样式,同时引入 jQuery UI 的组件,实现更复杂的用户...

    从jquery.ui包里单独提出来的日期控件 datepicker

    jquery.ui.core.js - JQuery UI核心 jquery.ui.datepicker.js - Datepicker jquery.ui.datepicker-zh-CN.js - 本地化文件 jquery-1.6.2.min.js - JQuery1.6.2 jquery-ui-1.8.16.custom.css - 样式

    jquery 日期控件 datepicker

    jQuery UI 是一个强大的用户界面库,其中包含了许多实用的组件,其中之一就是日期选择器(Datepicker)。本篇文章将深入探讨这个功能丰富的日期控件,帮助你更好地理解和运用它。 ### 1. jQuery Datepicker 的安装...

    jquery jquery控件 时间控件 时分秒控件

    cal.js可能是一个定制的日期时间选择器,包含了与jQuery时间控件相关的逻辑和样式。 在实际应用中,使用jQuery时间控件通常涉及到以下几个步骤: 1. 引入jQuery库和时间控件插件:首先,你需要在HTML页面中引入...

Global site tag (gtag.js) - Google Analytics