将日历 jquery 图像添加到日期选择器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10421379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 09:19:30  来源:igfitidea点击:

Add calendar jquery image to datepicker

jqueryjquery-uidatepickerjquery-ui-datepicker

提问by user525146

I am not sure how to add the ui-icon ui-icon-calendarclass as a datepicker image beside the text field. I want something like this: http://jqueryui.com/demos/datepicker/#icon-trigger, but it should have the jquery calendar image.

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

回答by coder

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

回答by ContextSwitch

If you click the view source button below the example you linked to, you'll see something like this:

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

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

回答by Priyanjali Nandi

by this we can clear the given date from the field though the field is readonly.It should be readonly not to be given by user must be choosen from datepicker.

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

html:

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