본문 바로가기
jQuery/w2ui

[w2ui] w2ui 텍스트 필드에서 시간 설정하기

사악미소 2016. 9. 9. 18:24
반응형

■ 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. 출력결과는 아래와 같다.


반응형
저작자표시 (새창열림)

'jQuery > w2ui' 카테고리의 다른 글

[w2ui] 팝업창에 기능에 따른 버튼 추가하기  (0) 2016.09.13
[w2ui] w2ui로 팝업창 오픈하기  (0) 2016.09.12
[w2ui] TEXTBOX에 리스트 나타내기  (0) 2016.09.12
[w2ui] w2ui 캘린더 한글 달력으로 변환히기  (0) 2016.09.09
[w2ui] w2ui 설정하기  (2) 2016.09.09

'jQuery/w2ui' Related Articles

티스토리툴바