'JavaScript &amp; jQuery' 카테고리의 글 목록 (15 Page)

'JavaScript & jQuery'에 해당되는 글 69건

[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기

Posted at 2018. 8. 20. 10:42 | Posted in JavaScript & jQuery/jQuery

■ 캘린더( DatePicker ) 사용시 시작일 / 종료일 예외처리

사이트 제작중 검색할 데이터의 시작일과 종료일을 설정하는 경우는 자주 있는 일이다.

그렇다면 검색 조건을 시작일이 종료일보다 이후에 오면 안되고,

종료일이 시작일보다 먼저일 수 없게 예외처리를 해두기 위해 스크립트를 짜게 되었고.

아래와 같이 정리해 두었다.

# 소스코드

<html>
<head>
<title>:: 시작일 / 종료일 체크하기 ::</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">
    .datePicker {
        text-align:center;
        width:80px;
    }

    ul {
        list-style:none;
        margin:0;
        padding:0;
    }

    li {
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        border : 0;
        float: left;
    }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
   jQuery(document).ready(function() {

        jQuery(".datePicker").datepicker();

       // jQuery UI Datepicker 한글 변환
       jQuery.datepicker.regional['ko'] = {
              closeText : "닫기"
           , prevText : ""
           , nextText : ""
           , currentText : "오늘"
           , monthNames : ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
           , monthNamesShort : ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
           , dayNames : ["일", "월", "화", "수", "목", "금", "토"]
           , dayNamesShort : ["일", "월", "화", "수", "목", "금", "토"]
           , dayNamesMin : ["일", "월", "화", "수", "목", "금", "토"]
           , weekHeader : "Wk"
           , dateFormat : "yy-mm-dd"
           , firstDay : 0
           , isRTL : false
           , yearSuffix : " 년"
           , showMonthAfterYear : true
           , changeMonth : true
           // , changeYear : true
           // , autoSize : true

           , beforeShow:function(input) {
               var position = jQuery(input).position();
               setTimeout(function() {
                   jQuery("#ui-datepicker-div").css({"left":position.left});
               })
           }
       };
       jQuery.datepicker.setDefaults(jQuery.datepicker.regional['ko']);
   });

    function inputDateComparison(obj) {

        // 현재 엘리먼트의 부모(li) > 부모(ul) > 첫번째자식(li) > 첫번째자식(input)
        let startDate = inputDateSplit(obj.parentNode.parentNode.firstElementChild.firstChild.value);    // 시작일

// 현재 엘리먼트의 부모(li) > 부모(ul) > 마지막자식(li) > 첫번째자식(input)

        let endDate = inputDateSplit(obj.parentNode.parentNode.lastElementChild.firstChild.value);        // 종료일

        let objDate = inputDateSplit(obj.value);    // 입력한 엘리먼트의 일자
        // 입력일을 확인하는 이유는 현재 작성한 일자가 시작일인지 종료일인지 확인하기 위해서이다.

        if(startDate == objDate && startDate > endDate) {
            alert("시작일이 종료일보다 이 후 일수는 없습니다.\n다시 선택하여 주시기 바랍니다.");
            obj.parentNode.parentNode.firstElementChild.firstChild.value = "";
            // obj.parentNode.parentNode.firstElementChild.firstChild.focus();
        }

        else if(endDate == objDate && endDate < startDate) {

            if(obj.parentNode.parentNode.firstElementChild.firstChild.value == "") {
                alert("시작일이 입력되지 않았습니다.\n시작일을 먼저 입력해주세요");
                obj.parentNode.parentNode.lastElementChild.firstChild.value = "";
                // obj.parentNode.parentNode.firstElementChild.firstChild.focus();
            }

            else {
                alert("종료일이 시작일보다 이 전 일수는 없습니다.\n다시 선택하여 주시기 바랍니다.");
                obj.parentNode.parentNode.lastElementChild.firstChild.value = "";
                // obj.parentNode.parentNode.lastElementChild.lastChild.focus();
            }
        }

        else {
            return false;
        }
    }

// 날짜형식에 "-"이 사용된 경우에 한하여 날짜값에서 "-" 기호를 제거한다.
function inputDateSplit(obj) {

        let dateArray = obj.split("-");
       return dateArray[0] + dateArray[1] + dateArray[2];
   }
</script>
</head>
<body>

<ul>

</ul>

</body>
</html>

# 출력결과

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기 (0)	2018.09.17
[jQuery] jQuery 셀렉터 정리 (0)	2018.09.10
[jQuery] 커스텀 팝업창 오픈하기 (0)	2018.08.14
[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기 (0)	2018.08.09
[jQuery] SNS 공유 팝업창 제작(심화) (0)	2018.06.07

[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스

Posted at 2018. 8. 17. 17:57 | Posted in JavaScript & jQuery/JavaScript

■ 텍스트 박스에 시간 입력시 콜론(HH:MM) 자동 삽입

jQuery 캘린더와 같이 jQuery모듈들 중에도 시간을 선택하게 해주는 모듈들이 상당히 있었으나.

분단위를 세세하게 지정하기 힘든등의 무언가 마음에 들지 않는 부분들이 있어 제작하게 되었다.

HHMM 식으로 콜론없이 쭉 4개의 숫자를 자동으로 입력하면 HH:MM형식으로 숫자가 자동으로 기입되는 그런 구조이다.

# 소스코드

<html>
<head>
<title>:: 시간 자동 콜론 삽입(HH:MM) ::</title>
<style type="text/css">
   .timeBox {
       text-align:center;
       width:60px;
   }
</style>
<script type="text/javascript">
   function inputTimeColon(time) {

// replace 함수를 사용하여 콜론( : )을 공백으로 치환한다.
var replaceTime = time.value.replace(/\:/g, "");

        // 텍스트박스의 입력값이 4~5글자 사이가 되는 경우에만 실행한다.
       if(replaceTime.length >= 4 && replaceTime.length < 5) {

           var hours = replaceTime.substring(0, 2);      // 선언한 변수 hours에 시간값을 담는다.
           var minute = replaceTime.substring(2, 4);    // 선언한 변수 minute에 분을 담는다.

            // isFinite함수를 사용하여 문자가 선언되었는지 확인한다.
           if(isFinite(hours + minute) == false) {
               alert("문자는 입력하실 수 없습니다.");
                time.value = "00:00";
               return false;
           }

            // 두 변수의 시간과 분을 합쳐 입력한 시간이 24시가 넘는지를 체크한다.
           if(hours + minute > 2400) {
               alert("시간은 24시를 넘길 수 없습니다.");
                time.value = "24:00";
               return false;
           }

            // 입력한 분의 값이 60분을 넘는지 체크한다.
           if(minute > 60) {
               alert("분은 60분을 넘길 수 없습니다.");
                time.value = hours + ":00";
               return false;
           }

            time.value = hours + ":" + minute;
       }
   }
</script>
</head>
<body>
   <h2>시간을 입력해 주세요</h2>

# 출력결과 - 정상적인 시간을 입력한 경우

# 예외처리① - 문자를 입력한 경우

# 예외처리② - 24시를 넘긴 시간을 입력한 경우

# 예외처리③ - 60분을 넘긴 시간을 입력한 경우

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] Session 데이터 읽고, 쓰기 (0)	2018.09.04
[JavaScript] Cookie 생성, 삭제 및 읽어오기 (4)	2018.09.03
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입 (7)	2018.08.21
[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입 (0)	2018.08.20
[JavaScript] 카드번호 입력폼 예제 (0)	2018.04.18

[jQuery] 커스텀 팝업창 오픈하기[jQuery] 커스텀 팝업창 오픈하기

Posted at 2018. 8. 14. 17:25 | Posted in JavaScript & jQuery/jQuery

다운로드 : https://www.jqueryscript.net/

Simple Plain Dialog Popup Plugin For jQuery Alerts이라는 jQuery 모듈을 사용하게 되었다.

이런 기존의 Dialog 경고창을 대신해 주는것을 jAlert이라고 하는 것 같은데 이건 그 수많은 모듈중 한가지일 뿐이다.

사용방법이 굉장히 단순해서 포스팅할 것 까지는 없었지만.

몇가지 기능적인 부분을 사용중 답답함을 느껴 이렇게 포스팅 하게 되었다.

■ 경고(Alert)창 팝업

#01. 기본 경고(Alert)창 팝업

# 소스코드

# 출력결과

#02. 콜백 기능을 이용한 경고(Alert)창 팝업

사실 해당 글을 포스팅하게 된 이유는 이것이다.

기본적인 alert창의 경우 alert창이 뜨게 되면 확인 버튼을 클릭하기 전까지

다음 작업이 진행되지 않지만, 이 jAlert의 경우는 창이 오픈됨과 동시에 바로 다음 작업이 진행되기 떄문에.

jAlert창이 팝업이 되고 정상적으로 OK 버튼을 누른 이후에 작업을 진행하기 위해서, 콜백 기능을 사용하게 되었다,

# 소스코드

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 심플 다이얼로그 팝업 ::</title>
<link rel="stylesheet" href="jquery.alerts.css">
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="jquery.alerts.js" ></script>
<script type="text/javascript">
    function callbackAlertWindow() {
        jAlert("피카부", "#VELVET", function() {
            window.location.href = "http://magic.wickedmiso.com/";
        });
    }
</script>
</head>
<body>
    <h1>CALLBACK ALERT</h1>
    <input type="button" onClick="callbackAlertWindow();" value="경고창"/>
</body>
</html>

# 출력결과

■ 확인(Confirm)창 팝업

# 소스코드

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 심플 다이얼로그 팝업 ::</title>
<link rel="stylesheet" href="jquery.alerts.css">
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="jquery.alerts.js" ></script>
<script type="text/javascript">
    function choiceConfirmWindow() {
        jConfirm("빨간맛", "#RED", function(result) {
            if(result == true) {
                alert("빨간맛 궁금해 허니");
            } else if(result == false) {
                alert("내가 제일 좋아하는건 여름에 너어~");
            }
        });
    }
</script>
</head>
<body>
    <h1>CALLBACK ALERT</h1>
    <input type="button" onClick="choiceConfirmWindow();" value="경고창"/>
</body>
</html>

# 출력결과

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] jQuery 셀렉터 정리 (0)	2018.09.10
[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기 (1)	2018.08.20
[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기 (0)	2018.08.09
[jQuery] SNS 공유 팝업창 제작(심화) (0)	2018.06.07
[jQuery] 움직이는 팝업 레이어 만들기 (0)	2018.05.29

[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기

Posted at 2018. 8. 9. 23:43 | Posted in JavaScript & jQuery/jQuery

■ jQuery :: sortable()을 이용한 레이어 재배치

sortable 기능을 사용하면 클릭 드래그 형태로 이미 지정된 엘리먼트의 위치를, 변경하고, 지정할 수 있다.

해당 포스팅은 단순히 엘리먼트의 위치를 지정하는데 그치지 않고.

지정된 위치에따른 값을 재배치할 수 있게 재배치된 순서(indxe)값을 전송하는 것까지 목표로 하였다.

# 소스코드 - 테이블 행의 순서를 변경하고 그 값을 전송할 sortable_transmit.php

sortable_transmit.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 마우스 드래그 테이블 ::</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">
    body { text-align:center; }
    .girlGroup { list-style-type:none;margin:0;padding:0;width:100%; }
    .girlGroup li { margin:3px;padding:0.4em;font-size:1em;height:18px;text-align:center; }
    .memberRow { border:solid 1px #C5C5C5;background:#F6F6F6; }
</style>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {

        // sortable은 객체의 순서를 재배치 할 수 있다.
        jQuery(".girlGroup").sortable();

        jQuery(".memberRow").mouseover(function() {

            jQuery(".memberRow").css("border", "solid 1px #C5C5C5").css("background", "#F6F6F6");

            var idx = jQuery(".memberRow").index(this);
            jQuery(".memberRow").eq(idx).css("border", "solid 3px #FF0000").css("background", "#FFC0CB");
        });
    });

    function wujuSonyeoTransmit() {

        var girls = "";

       // memberRow의 개수만큼 반복문을 돌리면서 enName값을 콤마로 구분하여 하나의 문자열로 만든다.
        jQuery(".memberRow").each(function(idx) {

            // 한글 이름을 전송
            // girls += jQuery(".memberRow").eq(idx).text + ", ";

            // 영문 이름을 전송
            girls += jQuery(".memberRow").eq(idx).attr("enName") + ",";
        });

        // 마지막 콤마 제거 후, 값을 cosmicGirls 에 담는다.
        jQuery("#cosmicGirls").val(girls.slice(0, -1));

        jQuery("#sortTableForm").attr("action", "./sortable_receive.php");
        jQuery("#sortTableForm").submit();
    }
</script>
</head>
<body>
<form method="post" id="sortTableForm" name="sortTableForm">
<input type="hidden" id="cosmicGirls" name="cosmicGirls" value=""/>
    <h1>우 주 소 녀</h1>
    <ul class="girlGroup">
    <li class="memberRow" enName="seola">설아</li>
    <li class="memberRow" enName="xuanyi">선의</li>
    <li class="memberRow" enName="bona">보나</li>
    <li class="memberRow" enName="exy">엑시</li>
    <li class="memberRow" enName="soobin">수빈</li>
    <li class="memberRow" enName="luda">루다</li>
    <li class="memberRow" enName="dawon">다원</li>
    <li class="memberRow" enName="eunseo">은서</li>
    <li class="memberRow" enName="chengxiao">성소</li>
    <li class="memberRow" enName="meiqi">미기</li>
    <li class="memberRow" enName="yeoreum">여름</li>
    <li class="memberRow" enName="dayoung">다영</li>
    <li class="memberRow" enName="yeonjung">연정</li>
    </ul>
    <br/>
    <input type="button" onClick="wujuSonyeoTransmit();" value="전송"/>
</form>
</body>
</html>

# 소스코드 - 테이블 행의 순서를 변경하고 그 값을 전송받을 sortable_receive.php

sortable_receive.php

<?php
    $wujuSonyeo = explode(",", $_POST['cosmicGirls']);

    echo "<pre>";
    print_r($wujuSonyeo);
    echo "</pre>";
?>

# 출력결과

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기 (1)	2018.08.20
[jQuery] 커스텀 팝업창 오픈하기 (0)	2018.08.14
[jQuery] SNS 공유 팝업창 제작(심화) (0)	2018.06.07
[jQuery] 움직이는 팝업 레이어 만들기 (0)	2018.05.29
[jQuery] 따라다니는플로팅 배너 제작 (0)	2018.04.23

Prev Next

1 ··· 12 13 14 15 16 17 18

'JavaScript & jQuery'에 해당되는 글 69건

[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[jQuery] 커스텀 팝업창 오픈하기[jQuery] 커스텀 팝업창 오픈하기

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바