`
zjx2388
  • 浏览: 1329054 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery 的DatePicker 添加一个Clear清除按钮

 
阅读更多
$(document).ready(function ()
 {
     //用来存放当前正在操作的日期文本框的引用。
     var datepicker_CurrentInput;
 
     // 设置DatePicker 的默认设置
     $.datepicker.setDefaults({ showButtonPanel: true, closeText: 'Clear', beforeShow: function (input, inst) { datepicker_CurrentInput = input; } });
 
     // 绑定“Done”按钮的click事件,触发的时候,清空文本框的值
     $(".ui-datepicker-close").live("click", function ()
     {
         datepicker_CurrentInput.value = "";
     });
 });

 以上代码是为jQuery UI 中的DatePicker 控件改造一个Clear按钮,实现清楚操作。

 

贴一个使用实例:

 

<script src="<%=basePath %>js/jquery-1.7.2.min.js"></script>
<script src="<%=basePath %>js/jquery-ui-1.8.20.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath %>css/smoothness/jquery-ui-1.8.20.custom.css">

<script type="text/javascript">
$(document).ready(function(){
	 var datepicker_CurrentInput;
	    $.datepicker.setDefaults({ showButtonPanel: true, closeText: '清除', beforeShow: function (input, inst) { datepicker_CurrentInput = input; } });
	    $(".ui-datepicker-close").live("click", function (){
	        datepicker_CurrentInput.value = "";
	    });
	$("#publicTime").datepicker({
		dateFormat:'yy-mm-dd',
		showButtonPanel: true,
		changeMonth: true,
		changeYear: true
		});
});
</script>

 

分享到:
评论
1 楼 冬天秋天 2014-07-17  
不过,要把“今天”这个按钮隐藏掉,就更完美了~! “今天”是个无效的按钮。

相关推荐

    bootstrap-datetimepicker添加清除按钮

    在某些情况下,为了提高用户体验,我们需要添加一个清除按钮,让用户能够快速重置日期和时间选择。 首先,我们要理解如何在bootstrap-datetimepicker中添加清除按钮。这通常涉及到修改插件的配置选项。在初始化...

    基于jquery datepicker 做的双月日历

    jQuery Datepicker是jQuery UI库中的一个模块,提供了丰富的功能和自定义选项,使得创建美观且易用的日期选择器变得简单。本篇将详细讲解如何利用jQuery Datepicker来实现一个双月日历的功能。 首先,我们需要引入...

    Jquery日期选择datepicker插件用法实例分析

    JQuery的日期选择插件`datepicker`是一种常用的前端组件,用于在网页中提供方便的日期输入功能。在本文中,我们将深入探讨如何使用这个插件,并通过实例来演示其基本用法。 首先,为了使`datepicker`插件适应中文...

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

    这些按钮通过`onclick`事件触发一个`clearTime`函数。该函数接收两个参数,`_this`表示触发事件的元素,`setStartDate`是一个布尔值,用于决定是清除开始时间还是结束时间。函数内部根据传入的参数决定是清空开始...

    My97DatePicker日历控件实例

    My97DatePicker是一款广泛应用于Web开发中的日历控件,尤其在JavaScript和jQuery环境中非常流行。这个控件以其丰富的功能、良好的性能以及高度的自定义性而受到开发者们的喜爱。以下将详细介绍My97DatePicker的一些...

    jQuery日期控件

    isclear: false, // 是否显示清除按钮 isok: true, // 是否显示确定按钮 minDate: "2020-01-01", // 最小日期 maxDate: "2023-12-31", // 最大日期 lang: "zh-CN", // 语言设置 position: "right", // 控件...

    Zebra_Form 2.9.4.zip

    Zebra_Form是一个用于简化表单的创建和数据验证的PHP类。...也,这也改变了标题“清除”按钮, “清除日期” ,并带来了语言文件为“今天”按钮,一个新的项目; ◾该项目现在可以在GitHub上,也可以作为一个包的作曲家

    Zebra_Form表单类 v2.9.4.zip

    Zebra_Form 是一个 PHP 类用于简化表单的创建和数据验证...也,这也改变了标题“清除”按钮, “清除日期” ,并带来了语言文件为“今天”按钮,一个新的项目; ◾该项目现在可以在GitHub上,也可以作为一个包的作曲家

    jQuery错误提示高亮代码

    jQuery UI库是jQuery的一个扩展,它包含了一系列预先设计的UI组件,如对话框(Dialog)、进度条(Progress Bar)和日期选择器(Datepicker)。在错误提示高亮的场景中,我们可以使用Dialog组件创建一个弹出式的错误...

    基于datepicker定义自己的angular时间组件的示例

    在这个例子中,我们使用了jQuery和一个叫做datetimepicker的库。在`styles`和`scripts`配置中,我们添加了对应的CSS和JavaScript文件路径,确保在项目中可以访问到这些资源。 接下来,我们创建一个名为`...

    html5 多种日期选择框

    clear: '清除', // 自定义清除按钮文字 close: '确定' // 自定义关闭按钮文字 }); }); ``` 同时,CSS用于定制日期选择框的视觉样式。例如,我们可以改变日期选择框的背景颜色、边框样式等: ```css .datepicker...

    lhgcalendar-日期选择控件(js控件-实例)

    - `isShowClear`:是否显示清除按钮,允许用户清空日期选择。 - `isShowOtherMonth`:是否显示其他月份的日期,如果禁用,用户只能选择当前月的日期。 - 其他配置还包括日期格式、初始日期、禁用日期、主题颜色等...

    html5中去掉input type date默认样式的方法

    在HTML5中,input元素的type属性可以设置为date,这样用户就可以在支持的浏览器中使用一个内置的日历控件来选择日期。默认情况下,这个控件会有一套浏览器自定义的样式,但有时候为了网站或应用的整体风格一致性,...

Global site tag (gtag.js) - Google Analytics