将日历jquery图像添加到datepicker

时间:2012-05-02 20:43:03

标签: jquery jquery-ui datepicker jquery-ui-datepicker

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

3 个答案:

答案 0 :(得分:28)

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

答案 1 :(得分:3)

如果您点击链接到的示例下方的查看源按钮,您会看到如下内容:

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

答案 2 :(得分:0)

通过这个我们可以从字段中清除给定的日期,尽管该字段是只读的。只有用户才能读取它必须从datepicker中选择。

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('');
        }
    }
});