html-file:
<pre name="code" class="html"><html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Datepicker</title>
<link href="jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="dateinput-ch-ZN.js"></script>
<link href="myScript.css" rel="stylesheet">
</head>
<body>
<h1>jQuery Datepicker</h1>
<p>输入框</p>
<hr>
<script src="./myScript.js"></script>
结果测试:
<p id="date2"></p>
</body>
</html>
css-file:
<pre name="code" class="css">body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
.boardDiv {
width: 200px;
height: 300px;
}
js-file:
<pre name="code" class="javascript">function ProcessBar() {
// 创建整体的div
this.boardDiv = $("<div>");
this.boardDiv.addClass("boardDiv");
this.date = $("<input>");
this.date.datepicker({
changeMonth : true,
changeYear : true
}); // 绑定输入框
this.boardDiv.append(this.date);
}
ProcessBar.prototype.getDate = function() {
var date = this.date.val();
return date;
}
ProcessBar.prototype.setDate = function(date) {
this.date.val(date);
}
var dateValue;
var date = "1993-10-19";
var processBar = new ProcessBar();
$(document.body).append(processBar.boardDiv);
processBar.setDate(date);//设置日期
window.setInterval(function() {
dateValue = processBar.getDate();//获取日期
$("#date2").text(dateValue);
}, 20);
所需插件:
<img src="https://img-blog.csdn.net/20160330092224338?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />