JQuery UI 日历加时间

写一个面试时间通知。用jquery ui 具体功能已经可以了,不过样式还没调

一、需要引入的文件,这些可以到官网下载

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>

 

二、HTML代码如下

<input type="text" id="amount" readonly >
<br>
选择日期:
<br>
<input type="hidden" id="actualDate" readonly>
<div id="datepicker" class="w270"></div>
<br>
选择小时:
<br>
<div id="slider_hour" class="w270"></div>
<br>
选择分钟:
<br>
<div id="slider_minute" class="w270"></div>

三、js代码如下

function refreshSwatch() {
	var date = $( "#actualDate" ).val(),
		hour = $( "#slider_hour" ).slider( "value" ),
		minute = $( "#slider_minute" ).slider( "value" );
		$( "#amount" ).val( date+"  "+hour+":"+minute );
}
  
$(function() {
	//时间和分钟
    $( "#slider_hour, #slider_minute" ).slider({
      orientation: "horizontal",
      slide: refreshSwatch,
      change: refreshSwatch
    });
    $( "#slider_hour" ).slider({
		value:new Date().getHours(),
		  min: 6,
		  max: 23,
		  step: 1
	});
    $( "#slider_minute" ).slider({
		value:new Date().getMinutes(),
		  min: 0,
		  max: 50,
		  step: 10
	});
	//日期
	$("#datepicker").datepicker({
		dateFormat:'yy-mm-dd',
		dayNamesMin:['日', '一', '二', '三', '四', '五', '六'],
		monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
		minDate:new Date().getFullYear()+"-"+(new Date().getMonth()+1)+"-"+new Date().getDate(),
		altField: '#actualDate',//将选择的日期同步到另一个域
		onSelect:refreshSwatch
	});
});

 

四、问题

1)、日历的回调函数是哪个??? 就是点击日期时,可以获取的时间(yy-mm-dd)。这样就不用再多写一个input(<input type="hidden" id="actualDate" readonly>)了,用来存日期。

 

posted @ 2016-03-30 17:48  晃晃567  阅读(235)  评论(0编辑  收藏  举报