jQuery UI:datepicker – 如何在右上角添加关闭按钮(图像!)?

我想在右上方添加一个关闭按钮.

我不想使用按钮面板底部关闭按钮.

我怎样才能做到这一点?

我想要像“X”这样的东西:

解决方法

您可以在标记中插入链接并根据需要设置样式,将onclick处理程序附加到它将调用.datepicker(“hide”),一个 built-in method的datepicker:
$( "#datepicker" ).datepicker({
    beforeShow: function( input ) {
        setTimeout(function() {
            var headerPane = $( input )
            .datepicker( "widget" )
            .find( ".ui-datepicker-header" );

            $( "<button>",{
                text: "Close",click: function() {
                  $.datepicker.hide();
                }
            }).appendTo( headerPane );
        },1 );
    }
});

此外,为了为关闭按钮腾出空间,您可能需要调整这些样式,以便将“下个月”按钮移到左侧并为“关闭”按钮腾出空间:

.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }

注意:我从this proof of concept开始采用上面的JS代码并进行相应的调整.虽然没有测试过.

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...