WdatePicker插件宽度及样式设设置

最新推荐文章于 2024-09-13 16:54:19 发布

qq_32593713

最新推荐文章于 2024-09-13 16:54:19 发布

阅读量6.6k

点赞数 1

文章标签： WdatePicker 宽度设置样式设置

本文链接：https://blog.csdn.net/qq_32593713/article/details/80147532

版权

在使用 WdatePicker插件的时候，由于input的WdatePicker的宽度不一样，样式比较难看，尝试多种方式都无效。在网上找的答案基本都是，直接在原有的WdatePicker.css中修改。这种方式也想到过，由于WdatePicker是作为通用的，所以这种果断放弃。在查看WdatePicker文档说明也找到使用WdatePicker的skin属性来调用自己定义的样式，不过这种方式差不多完全要自己来重写样式，当然你也可以把原有的WdatePicker样式copy下，修改关键的地方也能实现。这样也产生了一个问题，每次改变都需要copy一个样式，不利于后期的维护。是经过查看源码和研究发现WdatePicker的参数可以是两个一个json和boolean值

之后给该元素添加一个click事件，你会发现在最后面出现 WdatePicker已经加载，

然后就好办了，用两个input一个用来加载WdatePicker，另一个用来设置你想要的样式。具体代码如下：

<!doctype html>
<html lang='zh-Hans-CN'>
<head>
	<meta charset='utf-8'>
	<meta name='Keywords' content='关键字'>
	<meta name='Description' content=''>
	<style>
	 #day-end{
		width: 308px;
	 }
	</style>
	<script src="../jq3.2.1-min.js"></script>
	<script src="WdatePicker.js"></script>	
</head>
<body>
<div id="dom">
	<input type="hidden" id="day-start" οnclick="WdatePicker({maxDate:'%y-%M-%d',onpicked:function(dp){var day_end=$dp.$('day-end');day_end.click();}},true)"> 
    <input id="day-end" οnclick="WdatePicker({maxDate:'%y-%M-%d',minDate:'#F{$dp.$D(\'day-start\')}'})">
                                
</div>
<script>
		$("#day-start").click();
		$("#day-end").click(function(){
			var $iframe = $("iframe:last");
			$iframe.width(340);
			$iframe.contents().find(".WdateDiv").width(308);
		});
</script>
</body>
</html>

效果如下：