插件介绍:My97DatePicker是一款优秀的日历插件,使用简单,功能强大。
使用步骤:
导入相关.js文件(见代码)
书写相关代码
浏览器访问
核心代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>日历插件的基本使用</title>
<!--引入jQ.js 和相关文件 -->
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
<script>
$(function(){
//方式二:
$("#birth1").click(function(){
WdatePicker({
el:this,
readonly:true,
showClear:true
});
});
});
</script>
</head>
<body>
<br><p>
原始日期:
<input type="date" readonly />
插件日期 方式一:
<input type="text" class="Wdate" name="bir" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd'});" readonly/>
插件日期 方式二:
<input type="text" id="birth1" name="birth1" class="Wdate"/>
</body>
</html>
效果图:(方式一和二效果图一样)
技术提高:想用其更强大的功能就自己探索吧。
插件下载地址:https://download.csdn.net/download/right_hou/10928724
备注:插件建议在在官网上下载