需要提前引入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]));
}
});
}
相关推荐
**jQuery UI 日期控件详解** 在Web开发中,日期选择功能是不可或缺的一部分,尤其是在处理用户输入日期数据的场景下。jQuery UI库提供了一个强大的、易于使用的日期选择器控件,它大大简化了在网页上添加日期选择...
**jQuery UI 日期选择器(Datepicker)控件** jQuery UI 是一个强大的 JavaScript 库,它扩展了 jQuery 的功能,提供了丰富的用户界面组件。在这些组件中,日期选择器(Datepicker)是一个非常常用且实用的功能,常...
而“jQuery漂亮日期控件”则是在jQuery基础上,为网页添加美观、用户友好的日期选择功能。这类控件通常会提供自定义样式,易于使用的接口,以及多种显示和交互模式,提升用户在输入或选择日期时的体验。 标题中的...
jqueryUI日期控件和时间控件-附件资源
总之,jQuery UI的日历控件是一个功能强大、易于使用的组件,能够为你的网页增添实用的日期选择功能。通过深入理解和灵活运用其各种选项和事件,你可以创建符合业务需求的日历界面,提升用户体验。
jQuery UI 包含了一系列的可定制的、易于使用的控件,如日期选择器、滑块、对话框等,大大简化了前端开发工作。 **jQuery UI 控件** 1. **日期选择器(Datepicker)**:jQuery UI 提供了一个强大的日期选择器插件...
在日期时间控件方面,jQuery提供了一些插件,如jQuery UI的Datepicker和Bootstrap DateTimePicker,这些插件能够帮助开发者轻松创建用户友好的时间日期选择器。 1. **jQuery UI Datepicker**: 这是jQuery的一个核心...
本文将深入探讨如何使用jQuery实现一个简洁、漂亮的日期选择控件,并通过提供的压缩包文件来演示具体代码实现。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画创建等任务。在构建日期选择器时...
基于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日期控件:下拉菜单选择年份的实现》 在Web开发中,日期选择控件是不可或缺的一部分,它提供了用户友好的界面,让用户能够方便地输入或选择日期。在JavaScript库中,jQuery以其易用性和丰富的插件库而备受...
常见的jQuery日期时间控件有jQuery UI的DatePicker、Bootstrap DateTimePicker、Pickadate.js等。这里以Bootstrap DateTimePicker为例,因为它不仅外观美观,而且功能强大,支持多种语言和自定义配置。 首先,你...
总结起来,JQueryUI和EasyUI都是强大的前端开发工具,它们提供了一系列预封装的UI控件,帮助开发者快速构建美观且交互性强的Web应用。无论你是选择JQueryUI的丰富组件和主题定制,还是EasyUI的轻量级和易用性,都...
《jQuery UI Datepicker 日期选择器详解》 在网页开发中,日期选择器是一个非常常见的功能,用于方便用户输入或选择日期。jQuery UI中的Datepicker是实现这一功能的强大工具,它以其灵活性、易用性和良好的跨浏览器...
而jQuery UI的脚本则包含了实现日历控件的各种函数和逻辑,如日期解析、日期格式化、事件绑定等。 在“index.html”文件中,你可以看到一个简单的示例,展示了如何在网页中集成和使用这个日历控件。通过这个示例,...
《jQuery UI控件详解》 jQuery UI 是一个基于jQuery库的开源项目,它提供了一系列丰富的交互式用户界面组件,使得Web开发者能够轻松地创建出功能强大且美观的网页应用。这些控件涵盖了从基本的布局元素到复杂的交互...
在"bootstrap&jQueryUI例子"这个压缩包中,可能包含的是结合了这两个框架的示例代码或项目。这些示例通常会展示如何在同一个页面中有效地利用 Bootstrap 的布局和样式,同时引入 jQuery UI 的组件,实现更复杂的用户...
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 UI 是一个强大的用户界面库,其中包含了许多实用的组件,其中之一就是日期选择器(Datepicker)。本篇文章将深入探讨这个功能丰富的日期控件,帮助你更好地理解和运用它。 ### 1. jQuery Datepicker 的安装...
cal.js可能是一个定制的日期时间选择器,包含了与jQuery时间控件相关的逻辑和样式。 在实际应用中,使用jQuery时间控件通常涉及到以下几个步骤: 1. 引入jQuery库和时间控件插件:首先,你需要在HTML页面中引入...