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