작성일 : 13-01-04 15:05
|
[JQuery] jquery 달력
|
 |
|
글쓴이 :
조형래
 조회 : 5,517
|
<script src="/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui.js" type="text/javascript"></script>
<style>
/* datepicker */
#ui-datepicker-div {z-index:100 !important;}
.ui-datepicker {display:none;width:17em;padding:.2em .2em 0;border:1px solid #aaa;background:#fff;color:#222;font-family:verdana,Arial,sans-serif;font-size:12px;}
.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next {position:absolute;top:2px;width:3.5em;height:1.8em;}
.ui-datepicker .ui-datepicker-prev {left:2px;}
.ui-datepicker .ui-datepicker-next {right:2px;}
.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span {display:block;position:absolute;left:50%;margin-left:-12px;top:50%;margin-top:-8px;}
.ui-datepicker .ui-datepicker-title {margin:0 2.3em;line-height:1.8em;text-align:center;}
.ui-datepicker .ui-datepicker-title select + select {margin-left:4px;}
.ui-datepicker table {width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em;}
.ui-datepicker th {padding:.3em .3em .1em;text-align:center;font-weight:bold;font-size:11px;font-family:돋움;}
.ui-datepicker td {border:0;padding:1px;}
.ui-datepicker td span,.ui-datepicker td a {display:block;padding:.2em;text-align:right;text-decoration:none;}
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default {border:1px solid #d3d3d3;font-weight:normal;color:#555;background:#e6e6e6;}
.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited {color:#555;text-decoration:none;}
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus {border:1px solid #999999;font-weight:normal;color:#212121;background:#dadada;}
.ui-state-hover a,.ui-state-hover a:hover {color:#212121;text-decoration:none;}
.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active {border:1px solid #aaa;font-weight:normal;color:#212121;background:#fff;}
.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited {color:#212121;text-decoration:none;}
.ui-widget :active {outline:none;}
.ui-icon-circle-triangle-w {background-position:3px 3px;}
.ui-icon-circle-triangle-e {background-position:-15px 3px;}
.ui-state-hover .ui-icon-circle-triangle-w,.ui-state-focus .ui-icon-circle-triangle-w {background-position:2px -14px;}
.ui-state-hover .ui-icon-circle-triangle-e,.ui-state-focus .ui-icon-circle-triangle-e {background-position:-14px -14px;}
.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight {border:1px solid #fcefa1;color:#363636;background:#fbf9ee;}
.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a {color:#363636;}
.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error {border:1px solid #cd0a0a;color:#cd0a0a;background:#fef1ec;}
.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a {color:#cd0a0a;}
.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text {color:#cd0a0a;}
.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary {font-weight:bold;}
.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary {opacity:.7;filter:Alpha(Opacity=70);font-weight:normal;}
.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled {opacity:.35;filter:Alpha(Opacity=35);background-image:none;}
.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl {-moz-border-radius-topleft:4px;-webkit-border-top-left-radius:4px;-khtml-border-top-left-radius:4px;border-top-left-radius:4px;}
.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr {-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;-khtml-border-top-right-radius:4px;border-top-right-radius:4px;}
.ui-corner-all,.ui-corner-bottom,.ui-corner-left, .ui-corner-bl {-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;-khtml-border-bottom-left-radius:4px;border-bottom-left-radius:4px;}
.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br {-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;-khtml-border-bottom-right-radius:4px;border-bottom-right-radius:4px;}
/* //datepicker */
</style>
<input id="date1" type="text" />
<script>
$(function() {
$( '#date1' ).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "yy-mm-dd",
numberOfMonths : 1,
onClose: function( selectedDate ) {
$( 'date2' ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
|
|
1006
