■ w2ui 텍스트 필드에서 시간 설정하기
01. w2ui의 텍스트 필드에서 시간을 나타내 보자.
w2ui_time.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
<link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
<style type="text/css">
.block {
padding-top:20px;
padding-bottom:10px;
color:#999;
}
.w2ui-div {
float:left;
padding:4px;
border:1px solid silver;
border-radius:3px;
}
.w2ui-field input {
width:90px;
}
.w2ui-field > div > span {
margin-left:20px;
}
</style>
</head>
<body>
<div class="w2ui-div">
<div class="block">
<b>한국시간</b>
</div>
<div class="w2ui-field">
<label>Time:</label>
<div> <input type="kr-time"> </div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("input[type=kr-time]").w2field("time", {format:"h12"});
});
</script>
</body>
</html> |
02. 출력결과는 아래와 같다.
■ w2ui 텍스트 필드에서 시간 설정 제한하기
01. 이번엔 선택할 수 있는 시간에 제한을 두어보자.
w2ui_time_limit.php |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
<link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
<style type="text/css">
.block {
padding-top:20px;
padding-bottom:10px;
color:#999;
}
.w2ui-div {
float:left;
padding:4px;
border:1px solid silver;
border-radius:3px;
}
.w2ui-field input {about:newtab
width:90px;
}
.w2ui-field > div > span {
margin-left:20px;
}
</style>
</head>
<body>
<div class="w2ui-div">
<div class="block">
<b>한국시간</b>
</div>
<div class="w2ui-field">
<label>Time:</label>
<div> <input type="kr-timelimit"> <span class="legend">(08:00 am ~ 04:30 pm 까지)</span> </div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("input[type=kr-timelimit]").w2field("time", {format:"h12", start:"8:00 am", end:"4:30 pm"});
});
</script>
</body>
</html> |
02. 출력결과는 아래와 같다.
