jquery-ui-datepicker组件done

最新推荐文章于 2023-03-13 14:57:00 发布

稀薄里夹杂

最新推荐文章于 2023-03-13 14:57:00 发布

阅读量517

点赞数

分类专栏：实习日记前端开发文章标签： javascript jquery-ui 脚本 datepicker

前端开发同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

实习日记

9 篇文章 0 订阅

订阅专栏

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="" />