如何在training.html中突出显示由associate.html上的两个不同员工选择的日期,即两位员工选择他们的培训日期,这两个日期必须在培训日历上突出显示。
associate.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.ui-datepicker {font-size:12pt ! important}
</style>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery- ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#datepicker").datepicker();
$('form#dateform').submit(function(){
var aselectedDate=$('#datepicker').val();
if(aselectedDate!=''){
alert('You selected: ' +aselectedDate);
}
return false;
});
});
</script>
</head>
<body><br><br>
<form id="dateform" name="dateform" action="#" method="POST">
<table>
<tr>
<td>
</td>
</tr>
<tr>
<td>Select a date</td>
<td><input id="datepicker" name="date"/></td>
</tr>
</table>
<input type="submit" name="submit" value="Submit"/>
</form>
</body>
</html>
training.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.highlight {
background: red !important;
}
.ui-datepicker {
font-size: 16pt !important;
}
</style>
</head>
<body>
<link href="http://code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<br><br>
<br>
<center><div id="datepicker"></div></center><br>
<script type="text/javascript">
var Event = function (text, className) {
this.text = text;
this.className = className;
};
var events = {};
events[new Date("06/07/2015")] = new Event("You have selected Training 1", "highlight");
events[new Date("06/16/2015")] = new Event("You have selected Training 2", "highlight");
events[new Date("07/07/2015")] = new Event("You have selected Training 3", "highlight");
events[new Date("06/18/2015")] = new Event("You have selected Training 4", "highlight");
$('#datepicker').datepicker({
beforeShowDay: function (date) {
var event = events[date];
if (event) {
return [true, event.className, event.text];
} else {
return [true, '', ''];
}
},
onSelect: function (date) {
var event = events[new Date(date)];
if (event) {
alert(event.text);
}
else {
alert('No training event');
}
}
});
</script>
<script>
$(document).ready(function () {
$('form#dateform').click(function () {
var aselectedDate = $('#datepicker').val();
if (aselectedDate != '') {
alert('You selected: ' + aselectedDate);
}
return false;
});
});
</script>
<form id="dateform" name="dateform" action="#" method="POST">
<table>
<tr>
<td>
<input id="datepicker" name="date" />
</td>
</tr>
</table>
</form>
</body>
</html>
答案 0 :(得分:2)
我认为你的问题是日期没有正确突出显示,不是吗?
试试这个:
<style type="text/css">
.highlight {
background: red !important;
}
.ui-datepicker {
font-size: 16pt !important;
}
.highlight a {
background: none !important;
}
</style>
修改强> 您可以这样做以在会话中保存日期并将字符串值转换为日期值:
var associateDate = new Date(); //save in session
localStorage.setItem('date1', associateDate);
var stringValue = localStorage.getItem('date1'); // load
var training = new Date(stringValue);
我希望这会有所帮助!