以下是 jQuery带备忘录功能的日期选择器js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery带备忘录功能的日期选择器</title>
<!--<link rel="stylesheet" href="http://fonts.useso.com/css?family=Lato:300,400,700">-->
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="htmleaf-header">
<h1>jQuery简单带备忘录功能的日期选择器插件</h1>
</header>
<div class="calendar-container">
<div class="calendar">
<header>
<h2 class="month"></h2>
<a class="btn-prev fontawesome-angle-left" href="#"></a>
<a class="btn-next fontawesome-angle-right" href="#"></a>
</header>
<table>
<thead>
<tr><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td><td>日</td></tr>
</thead>
<tbody>
<tr>
<td date-month="12" date-day="1">1</td>
<td date-month="12" date-day="2">2</td>
<td date-month="12" date-day="3">3</td>
<td date-month="12" date-day="4">4</td>
<td date-month="12" date-day="5">5</td>
<td date-month="12" date-day="6">6</td>
<td date-month="12" date-day="7">7</td>
</tr>
<tr>
<td date-month="12" date-day="8">8</td>
<td date-month="12" date-day="9">9</td>
<td date-month="12" date-day="10">10</td>
<td date-month="12" date-day="11">11</td>
<td date-month="12" date-day="12">12</td>
<td date-month="12" date-day="13">13</td>
<td date-month="12" date-day="14">14</td>
</tr>
<tr>
<td date-month="12" date-day="15">15</td>
<td date-month="12" date-day="16">16</td>
<td date-month="12" date-day="17">17</td>
<td date-month="12" date-day="18">18</td>
<td date-month="12" date-day="19">19</td>
<td date-month="12" date-day="20">20</td>
<td date-month="12" date-day="21">21</td>
</tr>
<tr>
<td date-month="12" date-day="22">22</td>
<td date-month="12" date-day="23">23</td>
<td date-month="12" date-day="24">24</td>
<td date-month="12" date-day="25">25</td>
<td date-month="12" date-day="26">26</td>
<td date-month="12" date-day="27">27</td>
<td date-month="12" date-day="28">28</td>
</tr>
<tr>
<td date-month="12" date-day="29">29</td>
<td date-month="12" date-day="30">30</td>
<td date-month="12" date-day="31">31</td>
</tr>
</tbody>
</table>
<div class="list">
<div class="day-event" date-month="12" date-day="4">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">Lorem ipsum 1</h2>
<p class="date">2015-01-23</p>
<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="13">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">Lorem ipsum 2</h2>
<p class="date">2015-01-23</p>
<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="14">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">Lorem ipsum 3</h2>
<p class="date">2015-01-23</p>
<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="16">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">Lorem ipsum 4</h2>
<p class="date">2015-01-23</p>
<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="24">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">Lorem ipsum 5</h2>
<p class="date">2015-01-23</p>
<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="31">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">Lorem ipsum 6</h2>
<p class="date">2014-12-31</p>
<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/simplecalendar.js" type="text/javascript"></script>
</body>
</html>
JS代码(simplecalendar.js):
var calendar ={
init:function(){
/** * Get current date */
var d = new Date();
var strDate = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();
/** * Get current month and set as '.current-month' in title */
var monthNumber = d.getMonth() + 1;
function GetMonthName(monthNumber){
var months = ['Januari','Februari','Mars','April','Maj','Juni','Juli','Augusti','September','Oktober','November','December'];
return months[monthNumber - 1];
}
$('.month').text(GetMonthName(monthNumber));
/** * Get current day and set as '.current-day' */
$('tbody td[date-day="' + d.getDate() + '"]').addClass('current-day');
/** * Add class '.active' on calendar date */
$('tbody td').on('click',function(e){
if ($(this).hasClass('event')){
$('tbody td').removeClass('active');
$(this).addClass('active');
}
else{
$('tbody td').removeClass('active');
}
;
}
);
/** * Add '.event' class to all days that has an event */
$('.day-event').each(function(i){
var eventMonth = $(this).attr('date-month');
var eventDay = $(this).attr('date-day');
$('tbody tr td[date-month="' + eventMonth + '"][date-day="' + eventDay + '"]').addClass('event');
}
);
/** * Get current day on click in calendar * and find day-event to display */
$('tbody td').on('click',function(e){
$('.day-event').slideUp('fast');
var monthEvent = $(this).attr('date-month');
var dayEvent = $(this).text();
$('.day-event[date-month="' + monthEvent + '"][date-day="' + dayEvent + '"]').slideDown('fast');
}
);
/** * Close day-event */
$('.close').on('click',function(e){
$(this).parent().slideUp('fast');
}
);
/** * Save & Remove to/from personal list */
$('.save').click(function(){
if (this.checked){
$(this).next().text('Remove from personal list');
var eventHtml = $(this).closest('.day-event').html();
var eventMonth = $(this).closest('.day-event').attr('date-month');
var eventDay = $(this).closest('.day-event').attr('date-day');
var eventNumber = $(this).closest('.day-event').attr('data-number');
$('.person-list').append('<div class="day" date-month="' + eventMonth + '" date-day="' + eventDay + '" data-number="' + eventNumber + '" style="display:none;
">' + eventHtml + '</div>');
$('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"]').slideDown('fast');
$('.day').find('.close').remove();
$('.day').find('.save').removeClass('save').addClass('remove');
$('.day').find('.remove').next().addClass('hidden-print');
remove();
sortlist();
}
else{
$(this).next().text('Save to personal list');
var eventMonth = $(this).closest('.day-event').attr('date-month');
var eventDay = $(this).closest('.day-event').attr('date-day');
var eventNumber = $(this).closest('.day-event').attr('data-number');
$('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').slideUp('slow');
setTimeout(function(){
$('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').remove();
}
,1500);
}
}
);
function remove(){
$('.remove').click(function(){
if (this.checked){
$(this).next().text('Remove from personal list');
var eventMonth = $(this).closest('.day').attr('date-month');
var eventDay = $(this).closest('.day').attr('date-day');
var eventNumber = $(this).closest('.day').attr('data-number');
$('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').slideUp('slow');
$('.day-event[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').find('.save').attr('checked',false);
$('.day-event[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').find('span').text('Save to personal list');
setTimeout(function(){
$('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').remove();
}
,1500);
}
}
);
}
/** * Sort personal list */
function sortlist(){
var personList = $('.person-list');
personList.find('.day').sort(function(a,b){
return +a.getAttribute('date-day') - +b.getAttribute('date-day');
}
).appendTo(personList);
}
/** * Print button */
$('.print-btn').click(function(){
window.print();
}
);
}
,}
;
$(document).ready(function(){
calendar.init();
}
);
CSS代码(default.css):
@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#f9f7f6;color:#404d5b;font-weight:500;font-size:1.05em;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
;.container{margin:0 auto;text-align:center;overflow:hidden;}
.content{font-size:150%;padding:3em 0;}
.content h2{margin:0 0 2em;opacity:0.1;}
.content p{margin:1em 0;padding:5em 0 0 0;font-size:0.65em;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
.bgcolor-4{background:#2f3238;color:#fff;}
.bgcolor-5{background:#df6659;color:#521e18;}
.bgcolor-6{background:#2fa8ec;}
.bgcolor-7{background:#d0d6d6;}
.bgcolor-8{background:#3d4444;color:#fff;}
/* Header */
.htmleaf-header{padding:3em 190px 4em;letter-spacing:-1px;text-align:center;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.htmleaf-header h1{font-weight:600;font-size:2em;line-height:1;margin-bottom:0;}
.htmleaf-header h1 span{font-family:'Raleway';display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.htmleaf-nav{width:100%;/*padding:1em 0;*/
text-align:center;}
.htmleaf-nav a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #101524;font-weight:700;}
.htmleaf-nav a:hover{opacity:0.6;}
.htmleaf-nav a.current{background:#101524;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/* icomoon */
.icon-home:before{content:"\e600";}
.icon-pacman:before{content:"\e623";}
.icon-users2:before{content:"\e678";}
.icon-bug:before{content:"\e699";}
.icon-eye:before{content:"\e610";}
.icon-eye-blocked:before{content:"\e611";}
.icon-eye2:before{content:"\e612";}
.icon-arrow-up-left3:before{content:"\e72f";}
.icon-arrow-up3:before{content:"\e730";}
.icon-arrow-up-right3:before{content:"\e731";}
.icon-arrow-right3:before{content:"\e732";}
.icon-arrow-down-right3:before{content:"\e733";}
.icon-arrow-down3:before{content:"\e734";}
.icon-arrow-down-left3:before{content:"\e735";}
.icon-arrow-left3:before{content:"\e736";}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
.htmleaf-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.htmleaf-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.htmleaf-header h1{font-size:1.2em;}
}
CSS代码(style.css):
*[class*="fontawesome-"]:before{font-family:'FontAwesome',sans-serif;}
/*body{background:#f9f9f9;color:#0e171c;font:300 100%/1.5em 'Lato',sans-serif;margin:0;}
*/
a{text-decoration:none;}
h2{font-size:22px;line-height:20px;margin:4px 0;}
h3{font-size:24px;line-height:24px;margin:5px 0;}
table{border-spacing:0;width:100%;}
.calendar-container{height:538px;left:50%;margin:-55px 0 0 -245px;position:absolute;top:30%;width:510px;}
.calendar{text-align:center;}
.calendar header{position:relative;}
.calendar h2{text-transform:uppercase;}
.calendar thead{font-weight:600;text-transform:uppercase;}
.calendar tbody{color:#7c8a95;}
.calendar tbody td:hover{border:2px solid #c0392b;}
.calendar tbody td.active{border:2px solid #c0392b;}
.calendar td{border:2px solid transparent;border-radius:50%;display:inline-block;height:64px;line-height:64px;text-align:center;width:64px;}
.current-day{background:#c0392b;color:#f9f9f9;}
.event{cursor:pointer;position:relative;}
.event:after{background:#c0392b;border-radius:50%;bottom:8px;display:block;content:'';height:8px;left:50%;margin:-4px 0 0 -4px;position:absolute;width:8px;}
.event.current-day:after{background:#f9f9f9;}
.btn-prev,.btn-next{border:2px solid #cbd1d2;border-radius:50%;color:#cbd1d2;height:32px;font-size:22px;line-height:28px;margin:-16px;position:absolute;top:50%;width:32px;}
.btn-prev:hover,.btn-next:hover{background:#cbd1d2;color:#f9f9f9;}
.btn-prev{left:30px;}
.btn-next{right:35px;}
.list{margin-top:20px;}
.close{color:#A4AAAB;margin-top:-15px;margin-right:10px;float:right;}
.day-event{background-color:#F2F2F2;width:100%;padding-top:20px;padding-bottom:0px;margin-bottom:50px;display:none;}
.day-event p{padding-left:20px;padding-right:20px;padding-bottom:20px;}
.day-event span{font-size:12px;}
.day-event button{position:relative;vertical-align:top;width:100%;height:50px;padding:0;font-size:18px;color:white;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#c0392b;border:0;border-bottom:2px solid #b53224;cursor:pointer;-webkit-box-shadow:inset 0 -2px #b53224;box-shadow:inset 0 -2px #b53224;}
.check-btn{width:100%;}
input[type=checkbox]{display:none;}
span{background-color:#373740;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;font-weight:700;color:#FFF;font-size:.85em;letter-spacing:2px;text-decoration:none;font-family:'PT Sans',sans-serif;text-align:center;width:100%;height:50px;line-height:50px;cursor:pointer;display:block;margin:0 auto;-webkit-transition:background-color 150ms ease-in;-moz-transition:background-color 150ms ease-in;-ms-transition:background-color 150ms ease-in;-o-transition:background-color 150ms ease-in;transition:background-color 150ms ease-in;}
span:hover{background-color:#c0392b;}
input[type=checkbox]:checked + span{background-color:#9C2E23;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background:#9C2E23 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC) no-repeat 7% center;background-size:15px 13px;}
input[type=checkbox]:checked:hover + span{background-color:#9C2E23;color:rgba(255,255,255,0.5);text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background:#9C2E23 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAS5JREFUeNq8110OgjAMAGBGvIY3VESjt9jPg95PT+LccBIZ7dYOWJPGB+g+Ymg3hLW2QeLkcu/y2pSFdvl0eQevehjI3uXbfkMh96TShFq/xhG6J4faAtxEtSBOQTm4QWpnOBWl4CZT69fuYpiCpnBDrB1xLhrjgoFO8F1oGcFslUv4bV32zFoxmOHJta0XMn65dC0UaiddA8UGiN4axeC1cUkdmWviEls/NwL1FqjPNtNvoimPdC3yRCUTiTXbt0R/oSnw2iiK10BBvBY6w2uiE3xJr8oFtcrvxy/fVcyeVdGx98yotcOxN/znHeMUIhdMOG8c4reagssF43VEoT5O4ZJwvNUUFJtcEE5BMXyGpnanf5yDxjiI+hSJj7YunEBvhbuTCh9tD+jiR4ABAJ0SrJgNr1UAAAAAAElFTkSuQmCC) no-repeat 7% center;background-size:15px 15px;}
.print-btn{padding:1px 14px 5px 14px;}
/* Smartphones (portrait and landscape) ----------- */
@media only screenand (min-device-width:320px)and (max-device-width:480px){/* STYLES GO HERE */
}
/* Smartphones (landscape) ----------- */
@media only screenand (min-width:321px){/* STYLES GO HERE */
}
/* Smartphones (portrait) ----------- */
@media only screenand (max-width:320px){/* STYLES GO HERE */
}
/* iPads (portrait and landscape) ----------- */
@media only screenand (min-device-width:768px)and (max-device-width:1024px){/* STYLES GO HERE */
}
/* iPads (landscape) ----------- */
@media only screenand (min-device-width:768px)and (max-device-width:1024px)and (orientation:landscape){/* STYLES GO HERE */
}
/* iPads (portrait) ----------- */
@media only screenand (min-device-width:768px)and (max-device-width:1024px)and (orientation:portrait){/* STYLES GO HERE */
}
/* Desktops and laptops ----------- */
@media only screenand (min-width:1224px){/* STYLES GO HERE */
}
/* Large screens ----------- */
@media only screenand (min-width:1824px){/* STYLES GO HERE */
}
/* iPhone 5 (portrait & landscape)----------- */
@media only screenand (min-device-width:320px)and (max-device-width:568px){/* STYLES GO HERE */
}
/* iPhone 5 (landscape)----------- */
@media only screenand (min-device-width:320px)and (max-device-width:568px)and (orientation:landscape){/* STYLES GO HERE */
}
/* iPhone 5 (portrait)----------- */
@media only screenand (min-device-width:320px)and (max-device-width:568px)and (orientation:portrait){/* STYLES GO HERE */
}
分享到QQ
分享到微博
微信扫一扫
