jQuery点击弹出下拉框选择日期特效代码下载

jQuery点击弹出下拉框选择日期特效代码下载

1. 引入CSS

<link rel="stylesheet" href="css/jHsDate.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jHsDate.js"></script>

3. HTML代码

<div style="text-align:center;margin-top:50px;">
	<span>普通年月日选择</span>
	<input type="text" id="date" />
</div>
<div style="text-align:center;margin-top:50px;">
	<span>只显示时间选择</span>
	<input type="text" id="time" />
</div>
<div style="text-align:center;margin-top:50px;">
	<span>时间日期格式化</span>
	<input type="text" id="datetimeformat" />
</div>
<div style="text-align:center;margin-top:50px;">
	<span>设置默认日期并显示</span>
	<input type="text" id="datetimedef" />
</div>
<div style="text-align:center;margin-top:50px;">
	<span>只读input</span>
	<input type="text" id="dateread" />
</div>
<div style="text-align:center;margin-top:50px;">
	<span>日期范围</span>
	<input type="text" id="datemaxmin" />
</div>
<div style="text-align:center;margin-top:50px;">
	<span>回掉函数</span>
	<input type="text" id="datecallback" />
</div>
<script type="text/javascript">
$('#date').jHsDate();
$('#time').jHsDate({
format:'hh:mm'
});
$('#datetimeformat').jHsDate({
format: 'yyyy年MM月dd日 hh时mm分'
});
$('#datetimedef').jHsDate({
defDate: '2017-01-01',
defIsShow: true
});
$('#dateread').jHsDate({
inputIsRead: true
});
$('#datemaxmin').jHsDate({
minDate: '2010-01-01',
maxDate: '2017-05-31'
});
$('#datecallback').jHsDate({
callBack: function () {
	alert('我是回掉函数')
}
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到