jQuery UI Datepicker

最新推荐文章于 2025-04-20 20:56:53 发布

芊芊墨客

最新推荐文章于 2025-04-20 20:56:53 发布

阅读量101

点赞数

分类专栏：日期文章标签： jquery

本文链接：https://blog.youkuaiyun.com/weixin_45637293/article/details/120128322

版权

日期专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在jQuery UI Datepicker中设置默认样式，包括使用内置图标和自定义背景图片来改变日期选择器的外观。通过修改CSS，可以将选择按钮的图标改为背景图片，并调整位置和大小，同时保持无重复显示。此外，还提及了阿里图标库作为获取更多图标的资源，以及DateRangePicker的相关网站，为日期选择提供更丰富的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 最终效果

jQuery UI Datepicker
在这里插入图片描述

2.引用自带图标

在这里插入图片描述

$.datepicker.setDefaults({
  showOn: "both",
  buttonImageOnly: true,
  buttonImage: "calendar.gif",
  buttonText: "Calendar"
});

3.改变思路，选择添加为背景图片

.input-class{
    background-image: url('');
    background-position: 3px center;
    background-size: 25px;
    background-repeat: no-repeat;
    padding-left: 30px;
}