写面试时间通知。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月、9月、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>)了,用来存日期。