jquery-ui-datepicker组件done


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




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值