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

最新推荐文章于 2022-12-12 11:12:09 发布

zjx2388

最新推荐文章于 2022-12-12 11:12:09 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： javascript ui java ViewUI

本文链接：https://blog.csdn.net/zjx2388/article/details/84274899

版权

JavaScript 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

$(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>