Calendar in jQuery(Datepicker) 2 / 제이쿼리로 달력 만들기 2

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
 $(function() {
  $('#datepicker').datepicker({
changeYear: true,//Year 선택 가능
changeMonth: true,//Month 선택 가능
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesMin: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'],
monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'],
monthNames: ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'],
nextText: 'Next month',
prevText: 'Prev month',
dateFormat:'dd/mm/yy'
});



 });
</script>
</head>
<body>
 <p>
  Date: <input type="text" id="datepicker" />
 </p>
 <style>
 .ui-tooltip {
padding:10px;
position: absolute;
z-index: 9999;
max-width:450px;
}

.ui-widget-content {
margin:0 3%; border:1px solid #008675; border-radius:10px; background:#ffffff;
}
.ui-widget-content a {
color: #333333;
}
/* Overlays */
.ui-widget-overlay {
background: #aaaaaa;
opacity: .3;
filter: Alpha(Opacity=30); /* support: IE8 */
}
/* date */
/*
.datepicker {width:127px; background:url('/icbs/img/pc/common/bg/bgFormDate.gif') no-repeat 97% center;}
.datepicker:hover, .datepicker:focus {background:url('/icbs/img/pc/common/bg/bgFormDateOn.gif') no-repeat 97% center !important;}

.ui-datepicker {width:250px; display:none; border:1px solid #008675; background:#ffffff url('/icbs/img/mobile/common/bg/bgDateBar.gif') repeat-x 0 72px; border-radius:5px; border-top-left-radius:10px; border-top-right-radius:10px;}*/
.ui-datepicker .ui-datepicker-header {position:relative; height:40px; background:#008675; border-top-left-radius:5px; border-top-right-radius:5px;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {position:absolute; top:15px; width:1.8em; height:1.8em;}
.ui-datepicker .ui-datepicker-prev {left:15px;}
.ui-datepicker .ui-datepicker-next {right:0}
/*
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {display:block; text-indent:-9999px }
.ui-datepicker .ui-datepicker-prev span {background:url('/icbs/img/pc/common/btn/btnDatePrev.gif') no-repeat 0 0;}
.ui-datepicker .ui-datepicker-next span {background:url('/icbs/img/pc/common/btn/btnDateNext.gif') no-repeat 0 0;}*/
.ui-datepicker .ui-datepicker-title {height:40px; margin: 0 2.3em; line-height:1.8em; text-align:center; }
.ui-datepicker .ui-datepicker-month,.ui-datepicker .ui-datepicker-year {color:#fff}
.ui-datepicker .ui-datepicker-week-end {color:#333333;}
.ui-datepicker .ui-datepicker-title select {font-size:1em;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {width:45%; height:40px; padding-left:15px; background:#008675; border:0; border-right:1px solid #199182; font-size:16px; line-height:120%; font-weight:bold; font-family:'Apple SD Gothic Neo','Noto Sans','Roboto', sans-serif;}
.ui-datepicker select.ui-datepicker-month {border-left:1px solid #199182;}
.ui-datepicker select.ui-datepicker-month option,
.ui-datepicker select.ui-datepicker-year option {font-size:14px; font-weight:normal}
.ui-datepicker table {width:90%; border-collapse:collapse; margin:0 auto;}
.ui-datepicker th {padding:7px 4px; text-align:center; font-weight:bold; border:0; color:#888888; font-size:11px }
.ui-datepicker th:first-child {color:#de4a63}
.ui-datepicker td {border:0;}
.ui-datepicker td span,
.ui-datepicker td a {display:block; padding:4px 0; color:#333333; font-size:12px; text-align:center; text-decoration:none !important;}
.ui-datepicker tbody tr:first-child td a {padding-top:4px; padding-top:4px;}
.ui-datepicker .ui-datepicker-buttonpane {background-image:none; margin:.7em 0 0 0; padding:0 .2em; border-left:0; border-right:0; border-bottom:0;}
.ui-datepicker .ui-datepicker-buttonpane button {float:right; margin:.5em .2em .4em; cursor:pointer; padding:.2em .6em .3em .6em; width:auto; overflow:visible;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {float:left;}
.ui-datepicker .ui-datepicker-current-day a {color:#ffffff; background:#00d4b7;}
.ui-datepicker .ui-datepicker-today a {color:#333333; background:#e6e6e6;}
 </style>
</body>
</html>

댓글

댓글 쓰기

이 블로그의 인기 게시물

Lottery in javascript / 자바스크립트로 경품추첨기 만들기

<style> body{font-size:9pt;} #panel{border:1px #000000 solid; line-height:400px; font-size:100px; width:400px; height:400px; text-align:center; vertical-align:middle;} </style> <script> var panel; var nTimerID; var labTotal; var nTotalMember; window.onload=function(){ this.init();// 요소 초기화 실행. this.initEventListener();// 이벤트 초기화 실행. } function init(){// 요소 초기화. this.panel = document.getElementById("panel");// 숫자가 출력될 #panel을 찾아 전역변수에 담아둡니다. this.nTimerID = 0;// 참여인원 정보가 입력된 패널을 찾아 전역변수에 담아둡니다. this.labTotal = document.getElementById("lab_total"); this.nTotalMember = 0; } function initEventListener(){// 이벤트 초기화. var btnStart = document.getElementById("btn_start"); btnStart.addEventListener("click", function(){ startTimer(); },false); var btnStop = document.getElementById("btn_stop"); btnStop.addEventListener("click...
자세한 내용 보기

Quick Menu(flying menu) in jQuery / 제이쿼리로 퀵메뉴 바 만들기

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <title>scroll_menu</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .wrap {width:1000px; height:3000px; background-color:#cdcdcd; margin:0 auto;} #q_menu {width:80px; height:300px; border: 1px solid #000; position: absolute; margin-left: 1000px; margin-top: 150px;} #textDiv {position: absolute;} </style> <script type="text/javascript"> $(document).ready( function(){ $('#q_menu').animate({'top':$(document).scrollTop()+20+'px'},500);//처음시작하는위치 $(window).scroll(function(){ $('#q_menu').stop(); $('#q_menu...
자세한 내용 보기

Accordion Menu in jQuery / 제이쿼리로 아코디언 메뉴 만들기

<div class="menu">menu01</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <div class="menu">menu02</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <style> .accordion {display:none;} .menu.on {color:red;} </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function(){ /*메뉴 아코디언*/   $('.accordion').hide();   $('.menu').click(function(){ $(this).toggleClass('on')         $(this).next().slideToggle();   }); }); </script>
자세한 내용 보기