将日历 jquery 图像添加到 datepicker

Posted 2023-05-07

【中文标题】将日历 jquery 图像添加到 datepicker

【英文标题】：Add calendar jquery image to datepicker

【发布时间】：2012-05-12 09:04:01

【问题描述】：

我不确定如何将 ui-icon ui-icon-calendar 类添加为文本字段旁边的日期选择器图像。我想要这样的东西：http://jqueryui.com/demos/datepicker/#icon-trigger，但它应该有 jquery 日历图像。

【问题讨论】：

看官方文档即可：jqueryui.com/datepicker/#icon-trigger

【参考方案1】：

<script>
        $(function() 
            $( "#datepicker" ).datepicker(
                showOn: "button",
                buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                buttonImageOnly: true
            );
        );
</script> 

【参考方案2】：

如果您单击链接到的示例下方的查看源代码按钮，您将看到如下内容：

$('#field').datepicker(        
    buttonImage: '/images/calendar_icon.png'
);

【讨论】：

我的下载文件中没有 calendar_icon.png。所以我想使用 ui-icon-calendar 图像。

【参考方案3】：

通过这个我们可以从字段中清除给定的日期，尽管该字段是只读的。它应该是只读的，不能由用户给出，必须从日期选择器中选择。

html:

$("#datepickerID").datepicker(          
    showOn: "button",
    buttonImage: "images/calendar.png",
    buttonImageOnly: true,
    buttonText: "Select date",
    minDate : 0,
    showButtonPanel: true,
    closeText: 'Clear',
    onClose: function () 
        var event = arguments.callee.caller.caller.arguments[0];
        // If "Clear" gets clicked, then really clear it
        if ($(event.delegateTarget).hasClass('ui-datepicker-close')) 
            $(this).val('');
        
    
);