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

JQuery 1.32 DatePicker 增强版解决结束日期小于开始日期的问题

阅读更多

结束日期小于开始日期的问题,往常遇到这种问题都要自己编码,不过现在方便了,不需要把精力耗在这些细节问题上

以下内容原文地址:http://www.cnblogs.com/yasin/archive/2009/07/10/1520736.html

增加部分JS代码实现“清除”按钮

<!-- <br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->< scripttype = " text/javascript " >
$(function(){
$(
" #datepicker " ).datepicker({closeText: ' X ' ,showButtonPanel: true ,showClearButton: true ,minDate: new Date( 2009 , 7 , 10 )});
});
</ script >

自动禁选日期段的写法:

<!-- <br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->< scripttype = " text/javascript " >
$(function(){

$(
" #start-date " ).datepicker(
{onSelect:function(dateText,inst){$(
' #end-date ' ).datepicker( ' option ' , ' minDate ' , new Date(dateText.replace( ' - ' , ' , ' )));}
});

$(
" #end-date " ).datepicker(
{onSelect:function(dateText,inst){$(
' #start-date ' ).datepicker( ' option ' , ' maxDate ' , new Date(dateText.replace( ' - ' , ' , ' )));}
});
});
</ script >

程序源码及更多DatePicker的用法实例下载:

/Files/yasin/Jquery_datepicker.zip

DatePicker官方地址:

http://docs.jquery.com/UI/API/1.7/Datepicker#method-option

2009-07-13 增加焦点失去后自动验证日期格式

<!-- <br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->_doblur:function( event )
{
varinst
= $.datepicker._getInst( event .target);

if (inst.input[ 0 ].value.length == 0 ) // 允许为空
return ;

varreg
=/^ (\d{ 4 })(\ /|- )(\d{ 1 , 2 })\ 2 (\d{ 1 , 2 })$ / ;
vararr
= inst.input[ 0 ].value.match(reg)
if (arr == null )
{
alert(
" 错误的时间格式,请按格式填写\n如:2012-12-22 " );
vartoday
= new Date(); // 设置为当前日期
inst.input[ 0 ].value = today.getYear() + " - " + (today.getMonth() + 1 ) + " - " + today.getDate();
inst.input[
0 ].focus();
return ;
}
vartempDate
= new Date(arr[ 1 ],arr[ 3 ] - 1 ,arr[ 4 ]);
if ((tempDate.getFullYear() == arr[ 1 ] && (tempDate.getMonth() + 1 ) == arr[ 3 ] && tempDate.getDate() == arr[ 4 ]) == false )
{
alert(
" 错误的时间格式,请按格式填写\n如:2012-12-22 " );
vartoday
= new Date(); // 设置为当前日期
inst.input[ 0 ].value = today.getYear() + " - " + (today.getMonth() + 1 ) + " - " + today.getDate();
inst.input[
0 ].focus();
return ;
}
},
分享到:
评论

相关推荐

    jQuery datepicker 日期选择器 中文汉化版 开始日期结束日期

    在"jQuery datepicker 日期选择器 中文汉化版 开始日期结束日期"这个主题中,主要涉及以下知识点: 1. **jQuery UI**:jQuery UI是基于jQuery库的一个扩展,它提供了多种可重用的用户界面组件,包括日期选择器...

    jquery mobile datepicker 手机端日期选择器

    总结起来,jQuery Mobile Datepicker是一个强大且灵活的手机端日期选择器解决方案,它结合了jQuery Mobile的优点,提供了丰富的功能和易用的API。通过学习和掌握这个插件,开发者可以为自己的移动应用增添更多人性化...

    JQuery Datepicker 多选日期

    总的来说,"JQuery Datepicker 多选日期"是一个增强用户体验的功能,它通过定制和扩展原生的 Datepicker 实现了多选日期的能力。这一特性使得用户能够更加灵活地在网页应用中管理他们的日期选择,提升了交互的便利性...

    jQuery UI Datepicker插件timepicker时分秒

    为了解决这个问题,开发者可以使用timepicker插件,这是一个针对jQuery UI Datepicker的扩展,它添加了小时、分钟和秒的选取功能。timepicker插件的核心文件有`jquery-ui-timepicker-addon.js`和对应的minified版本`...

    jquery.datepicker 日期控件

    `jQuery UI Datepicker`是jQuery库的一个扩展,用于在网页上创建交互式日期选择器。这个控件使得用户能够方便地选择日期,广泛应用于表单输入、日程管理和其他需要日期选择的应用场景。以下是关于`jQuery UI ...

    JQuery-bootstrap-datetimepicker开始时间小于等于结束时间-相互约束-清除时间

    而为了将时间限制从开始时间上移除,可以通过设置结束时间的开始日期为1970年1月1日(一个非常早的日期),或者设置一个非常晚的日期如2286年作为结束时间的开始日期,这样就可以将时间约束移除。 在清除时间的实现...

    jquery mobile datepicker

    **jQuery Mobile Datepicker** 是一个专门用于移动设备的日期选择器插件,它扩展了标准的jQuery UI Datepicker,使其更适合在触摸屏设备上使用。这个插件在原生的日期选择器基础上增加了对移动环境的优化,如响应式...

    jquery datepicker 日期控件

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

    jquery_datepicker日期选择器包含多种类型日期选择

    《jQuery_datepicker日期选择器:实现多功能日期选择的利器》 在Web开发中,日期选择器是一个不可或缺的组件,它能够帮助用户方便地输入或选择日期,提高用户体验。jQuery_datepicker是jQuery UI库中的一个核心组件...

    jquery.datepicker-zh-CN.js

    jquery datepicker 的中文包 调用方法 &lt;script src="./public/js/jquery-ui-1.10.3.min.js"&gt; &lt;script src="./public/js/jquery.datepicker-zh-CN.js"&gt;&lt;/script&gt; &lt;link href="./public/css/jqueryui/jquery-ui-...

    jquery 日期控件 datepicker

    在开始使用 `jQuery Datepicker` 之前,你需要确保已经安装了 `jQuery` 和 `jQuery UI`。你可以通过CDN链接或者下载库文件到本地项目中。通常,引入这两个库的HTML代码如下: ```html &lt;script src="https://code....

    jquery 日期选择 datepicker

    jQuery UI中的日期选择器(DatePicker)是一个非常流行的前端组件,用于在网页上提供方便的日期输入功能。这个组件使得用户可以以日历的形式选择日期,而不是手动输入,从而提高了用户体验和数据准确性。以下是对`...

    jquery.ui.datepicker增强版 支持时间输入

    《jQuery UI Datepicker增强版:时间输入功能详解》 在Web开发中,日期选择器是一个常见且实用的组件,它能够帮助用户方便地输入日期,提高用户体验。jQuery UI中的Datepicker是一个广泛使用的日期选择器插件,而在...

    jQuery Datepicker 日期选择插件

    Datepicker提供了许多可配置的选项,例如日期格式、开始日期、结束日期等,这些可以通过传递一个对象给`.datepicker()`方法来设置。例如,如果我们想设定日期格式为“年-月-日”,可以这样写: ```javascript $("#...

    jquery ui datepicker all theme

    《jQuery UI Datepicker全主题详解》 在网页开发中,日期选择器是一个常见的交互元素,它使得用户能够方便地输入或选择日期...无论是简单的日期输入还是复杂的日期处理,jQuery UI Datepicker都能提供完善的解决方案。

    jquery datepicker日期选择插件鼠标点击text

    jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text

    日期选择器:jquery datepicker的使用

    日期选择器在网页开发中是常见的一种交互组件,它能够帮助用户方便地选取日期,而jQuery UI中的datepicker组件就是这样一个强大的工具。本文将详细介绍如何在项目中使用jQuery UI的datepicker,以及它的一些主要功能...

    jQuery ui Datepicker日期插件

    jquery的日期插件Datepicker,这两天正好研究完了,将研究结果分享下,单独的封装汉化版本,都有注释,好修改也好使用,注意保持images里面图片的名称和路径,red-datepicker.css可以定义日期div的样式,我自己在源...

    jquery.datePicker日历控件应用text文本框弹出日历表与默认显示日

    而`jquery.datePicker`是jQuery的一个扩展插件,用于实现日期选择功能,通常与输入框(input[type="text"])结合使用,为用户提供一个友好的日期选择界面。这个插件提供了丰富的自定义选项和灵活的API,可以方便地...

    jquery datepicker 小于当前日期不可选的方法

    ### jQuery Datepicker 实现小于当前日期不可选的方法 在日常的Web开发中,经常会遇到需要用户选择日期的情况,为了提供更好的用户体验,我们通常会使用插件来实现日期选择功能。其中,jQuery Datepicker 是一个...

Global site tag (gtag.js) - Google Analytics