jquery 달력 특정날자만 선택하고 css 적용
카테고리 없음 2017. 11. 29. 19:52 |jquery 달력 특정날자만 선택하고 css 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<style>
div,ul,li {box-sizing:border-box}
body {
background: #f7f6f3;
font-family: sans-serif;
}
.vio-highlight {
background-color: #746495 !important;
color: #fff !important;
border-radius:50%;
}
.vio-highlight:hover {
background-color: #503b7c !important;
font-weight:bold;
}
.orange-highlight {
background-color: #ff894c !important;
color: white !important;
border-radius:50%;
}
.orange-highlight:hover {
background-color: #f1590a !important;
font-weight:bold;
}
.blue-highlight {
background-color: #1b93b6 !important;
color: white !important;
border-radius:50%;
}
.blue-highlight:hover {
background-color: #0b7695 !important;
font-weight:bold;
}
/* 카렌다 모양 */
.calendar {
margin:0 auto;
width: 280px;
background: #fff;
border-radius: 4px;
overflow: hidden;
color:#ccc;
border:1px solid #ccc;
}
.ui-datepicker-header {
height: 50px;
line-height: 50px;
color: #000;
background: #e9e5e3;
margin-bottom: 10px;
}
.ui-datepicker-prev,
.ui-datepicker-next {
width: 20px;
height: 20px;
text-indent: 9999px;
border: 2px solid #b0aead;
border-radius: 100%;
cursor: pointer;
overflow: hidden;
margin-top: 12px;
}
.ui-datepicker-prev {
float: left;
margin-left: 12px;
}
.ui-datepicker-prev:after {
transform: rotate(45deg);
margin: -43px 0px 0px 8px;
}
.ui-datepicker-next {
float: right;
margin-right: 12px;
}
.ui-datepicker-next:after {
transform: rotate(-135deg);
margin: -43px 0px 0px 6px;
}
.ui-datepicker-prev:after,
.ui-datepicker-next:after {
content: '';
position: absolute;
display: block;
width: 4px;
height: 4px;
border-left: 2px solid #b0aead;
border-bottom: 2px solid #b0aead;
}
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover,
.ui-datepicker-prev:hover:after,
.ui-datepicker-next:hover:after {
border-color: #5ed1cc;
}
.ui-datepicker-title {
text-align: center;
}
.ui-datepicker-calendar {
width: 100%;
text-align: center;
}
.ui-datepicker-calendar thead tr th span {
display: block;
width: 40px;
color: #00a8b2;
margin-bottom: 5px;
font-size: 13px;
}
.ui-state-default {
display: block;
text-decoration: none;
color: #fff;
line-height: 35px;
font-size: 12px;
}
.ui-state-default:hover {
background: rgba(0,0,0,0.02);
}
.ui-state-highlight {
color: #8dd391;
}
.ui-state-active {
color: #5ed1cc;
}
.ui-datepicker-unselectable .ui-state-default {
color: #ccc;
border: 2px solid transparent;
}
</style>
</HEAD>
<BODY>
<p style="line-height:50px">1. 특정날짜만 선택가능하게하기</p>
<script>
$(document).ready(function(){
var availableDates1 = ["13-11-2017","14-11-2017","15-11-2017"];
var availableDates2 = ["3-11-2017","2-11-2017","1-11-2017"];
var availableDates3 = ["30-11-2017","29-11-2017","28-11-2017"];
function available(date, current) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, availableDates1) > -1) {
return [true, "vio-highlight","예약가능"];
}
else if ($.inArray(dmy, availableDates2) > -1) {
return [true, "orange-highlight","대기예약"];
}
else if ($.inArray(dmy, availableDates3) > -1) {
return [true, "blue-highlight","출발확정"];
}
else {
return [false,"","unAvailable"];
}
}
$('#demo').datepicker({ beforeShowDay: available,
onSelect: function(dateText, inst) {
window.location = 'https://www.amerigotour.com/goods_airtel.calendar.asp?g_cd=' + dateText;
}
});
$('#123,#datepicker').datepicker({
constrainInput: true, // prevent letters in the input field
//minDate: new Date(), // prevent selection of date older than today
showOn: 'button', // Show a button next to the text-field
autoSize: true, // automatically resize the input field
altFormat: 'yy-mm-dd', // Date Format used
beforeShowDay: $.datepicker.noWeekends, // Disable selection of weekends
firstDay: 1 // Start with Monday
})
});
</script>
<div id="demo" class="calendar"></div>
<p style="height:50px">
2. Datepicker(데이트피커) 바로보여주기
<div id="123" style="width:220px; overflow:hidden; background:#666"></div>
<p style="height:50px">
3. Datepicker(데이트피커) 사용하기
<input type="text" name="datepicker" id="datepicker" placeholder="클릭해보세요">
</BODY>
</HTML>