如何修改My97Date日期插件在本页面的样式;

最新推荐文章于 2025-07-10 09:47:34 发布

原创最新推荐文章于 2025-07-10 09:47:34 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#my97date插件样式修改 #my97date #my97date样式修改

前端插件的使用专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何通过修改WdatePicker.js文件及HTML页面脚本来调整日期选择器的样式，包括设置宽度、边框圆角等，并提供了直接修改插件CSS库以统一调整所有日期样式的方法。

第一步：找到WdatePicker.js 在里面搜索“<iframe” 给这个标签添加id=myiframe

修改前：

var B = "<iframe style=\"width:1px;height:1px\" src=\"" + _.$dpPath + "My97DatePicker.htm\" frameborder=\"0\" border=\"0\" scrolling=\"no\"></iframe>";

修改后

var B = "<iframe id=\"myiframe\" style=\"width:1px;height:1px\" src=\"" + _.$dpPath + "My97DatePicker.htm\" frameborder=\"0\" border=\"0\" scrolling=\"no\"></iframe>";

第二步：我们的html页面

function UpdateDeta(){
$("#myiframe").load(function(){
$(this).contents().find("div[class=WdateDiv]").css('width','166px');;
});
}
</script>
</head>
<body onload="UpdateDeta()">

function UpdateDeta(){
$("#myiframe").load(function(){
$(this).contents().find("div[class=WdateDiv]").attr('style','width:300px;border-radius:15px');;
});
}
</script>
</head>
<body onload="UpdateDeta()">

如果需要修改所有的日期样式：那么直接到插件的额css库(下面的css)去修改

My97DatePicker/skin/default/datepicker.css