jQuery / Javascript | Jongwan.com

daterangepicker.js

<div class="form-group">
    <div class="input-group input-group-sm" id="default-daterange">
        <input type="text" name="default-daterange" class="form-control" value="<?php echo date("Y-m-d", strtotime("-7 day")) ?> ~ <?php echo date("Y-m-d") ?>" placeholder="기간선택" style="width:200px">
        <span class="input-group-append">
            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
        </span>
    </div>
</div>

<link href="/assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-daterangepicker/moment.js"></script>
<script src="/assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>

<script>
$('#default-daterange').daterangepicker({
	opens: 'right',
	format: 'YYYY-MM-DD',
	separator: ' ~ ',
	startDate: moment().subtract('days', 7),
	endDate: moment(),
	minDate: '<?php echo date("Y-m-d", strtotime("-3 year")) ?>',
	maxDate: '<?php echo date("Y-m-d") ?>',
	locale: {
        "format": "YYYY-MM-DD",
        "separator": " ~ ",
        "applyLabel": "적용",
        "cancelLabel": "취소",
        "fromLabel": "부터",
        "toLabel": "까지",
        "customRangeLabel": "사용자",
        "daysOfWeek": [
            "일",
            "월",
            "화",
            "수",
            "목",
            "금",
            "토"
        ],
        "monthNames": [
            "1월",
            "2월",
            "3월",
            "4월",
            "5월",
            "6월",
            "7월",
            "8월",
            "9월",
            "10월",
            "11월",
            "12월"
        ],
        "firstDay": 1
    }
}, function (start, end) {
	$('#default-daterange input').val(start.format('YYYY-MM-DD') + ' ~ ' + end.format('YYYY-MM-DD'));
});
</script>

jQuery Datepicker – 특정요일만 선택할 수 있도록 제한

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
jQuery(function($) {
	$.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,
		showMonthAfterYear : true,
		yearSuffix : '년'
	};

	$.datepicker.setDefaults($.datepicker.regional['ko']);
});

function onlyMonday(date){
	var day = date.getDay();
	return [(day == 1), ''];
};

$(document).ready(function(){
	$(".datepicker").datepicker({
		beforeShowDay: onlyMonday
	});
});
</script>

jquery datepicker 한글화

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
jQuery(function($) {
  $.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 (DD)',
    firstDay : 0,
    isRTL : false,
    showMonthAfterYear : true,
    yearSuffix : '년'
  };

  $.datepicker.setDefaults($.datepicker.regional['ko']);
});

$(document).ready(function(){
  $(".datepicker").datepicker();
});
</script>

jQuery UI Datepicker() / HTML Parsing Error – KB927917

HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)

jQuery UI 에서 Datapicker 를 사용할 때 인터넷 익스플로러에서 위와 같은 오류가 나올 때가 있다.
항상 오류가 나타나는 것은 아니며,
몇몇 컴퓨터에서만 나타나는 현상이다

[소스]
<input type=”text” id=”sdate” name=”sdate” size=”12″ value=”” />
<script type=”text/javascript”>
<!–
$(“#sdate”).datepicker({dateFormat: “yy-mm-dd”});
//–>
</script>

[해결방법]
<script type=”text/javascript”>
<!–
$(function(){
$(“#sdate”).datepicker({dateFormat: “yy-mm-dd”});
});
//–>
</script>

이미지 클릭시 점선 안나오게 하기

HTML 코딩중 링크가 걸려있는 이미지를 클릭할 경우,
테두리에 점선이 생긴다.

이를 안나오게 하는 자바스크립트 코드이다.

autoBlur.js 로 만들어서
<script type=”text/javascript” src=”autoBlur.js”></script>
처럼 불러와도 되며, 공통으로 사용되는 js 파일에 첨부해도 된다.

function autoBlur()
{
if ( event.srcElement.tagName==”A” || event.srcElement.TagName==”IMG” )
{
document.body.focus();
}
}
document.onfocusin = autoBlur;

자바스크립트 객체생성

자바스크립트 객체

개요

자바스크립트는 완벽하지는 않지만 객체지향적 프로그래밍을 지원합니다.

자바스크립트 클래스 생성 방법

// Class 생성
className = function(parameter) {
…
}

// Class에 Function 추가
className.prototype.function1 = function(parameter) {
…
}

예제

Member = function(id, name) {
this.id = id;
thid.name = name;
}

Member.prototype.setValue = function(newId, newName) {
this.id = newId;
this.name = newName;
}

var mem = new Member(“id01”, “헌이름”); // 클래스 생성
mem.setValue(“newid01”, “새이름”); // 클래스 함수 사용

객체 확장

자바스크립트는 객체에 직접적으로 프로퍼티나 함수를 추가할 수 있는 기능을 제공한다.

// 객체 생성
var mem = new Object();

// 프로퍼티 추가
mem.id = “id01”;
mem.name = “1”;

// 함수 추가
mem.printInfo = function() {
alert(this.id + this.name);
}

mem.printInfo(); // 함수 호출

자바스크립트 정규식

문자	설명
\	다음에 오는 문자를 특수 문자나 리터럴로 표시합니다. 예를 들어, “n”은 문자 “n”과 일치합니다. “\n”은 줄 바꿈 문자와 일치합니다. 시퀀스 “\\”은 “\”와 같고, “\(“는 “(“와 같습니다.
^	입력의 시작 부분을 찾습니다.
$	입력의 끝 부분을 찾습니다.
*	앞에 오는 문자를 0번 이상 찾습니다. 예를 들어, “zo*”를 입력하면 “z” 또는 “zoo”를 찾습니다.
+	앞에 오는 문자를 1번 이상 찾습니다. 예를 들어, “zo+”를 입력하면 “zoo”를 찾지만 “z”는 여기에 포함되지 않습니다.
?	앞에 오는 문자를 0번 이상 찾습니다. 예를 들어, “a?ve?”를 입력하면 “never”에 있는 “ve”를 찾습니다.
.	줄 바꿈 문자를 제외한 단일 문자를 찾습니다.
(pattern)	pattern을 찾고 일치하는 내용을 기억합니다. 일치하는 부분 문자열은 Item [0]…[n]을 사용하여 결과로 나오는 Matches 컬렉션에서 검색할 수 있습니다. 괄호 문자 ( )를 찾으려면 “$” 또는 “$”를 사용합니다.
x\|y	x 또는 y를 찾습니다. 예를 들어, “z\|food”는 “z” 또는 “food”를 찾습니다. “(z\|f)ood”로는 “zoo”나 “food”를 찾을 수 있습니다.
{n}	n은 음이 아닌 정수입니다. 정확하게 n번 일치하는 부분을 찾습니다. 예를 들어, “o{2}”는 “Bob”의 “o”를 찾지 않지만 “foooood”의 처음 두 o를 찾습니다.
{n,}	n은 음이 아닌 정수입니다. 적어도 n번 일치하는 부분을 찾습니다. 예를 들어, “o{2,}”는 “Bob”의 “o”를 찾지 않지만 “foooood”의 o는 모두 찾습니다. “o{1,}”은 “o+”와 같습니다. “o{0,}”은 “o*”과 같습니다.
{n,m}	m과 n은 음이 아닌 정수입니다. 최소 n번, 최대 m번 일치하는 부분을 찾습니다. 예를 들어, “o{1,3}”은 “fooooood”의 처음 세 o를 찾습니다. “o{0,1}”은 “o?”와 같습니다.
[xyz]	문자 집합입니다. 괄호 안의 문자 중 하나를 찾습니다. 예를 들어, “[abc]”는 “plain”의 “a”를 찾습니다.
[^xyz]	문자 집합에 없는 문자를 찾습니다. 괄호 안에 있지 않은 문자 중 하나를 찾습니다. 예를 들어, “[^abc]”는 “plain”의 “p”를 찾습니다.
[a-z]	문자 범위입니다. 지정한 범위에 있는 문자 중 하나를 찾습니다. 예를 들어, “[a-z]”는 “a”에서 “z”까지의 알파벳 소문자를 찾습니다.
[^m-z]	지정한 문자 범위가 아닌 집합입니다. 지정한 범위에 있지 않은 문자 중 하나를 찾습니다. 예를 들어, “[m-z]”는 “m”에서 “z”까지에 없는 문자를 찾습니다.
\b	단어의 경계, 즉 단어와 공백 사이의 위치를 찾습니다. 예를 들어, “er\b”는 “never”의 “er”를 찾지만 “verb”의 “er”는 찾지 않습니다.
\B	단어의 경계에 있지 않은 문자를 찾습니다. “ea*r\B”는 “never early”의 “ear”을 찾습니다.
\d	숫자를 찾습니다. [0-9]와 같습니다.
\D	숫자가 아닌 문자를 찾습니다. [^0-9]와 같습니다.
\f	용지 공급 문자를 찾습니다.
\n	줄 바꿈 문자를 찾습니다.
\r	캐리지 리턴 문자를 찾습니다.
\s	공백, 탭, 용지 공급 등 모든 종류의 공백 문자를 찾습니다. “[ \f\n\r\t\v]”와 같습니다.
\S	공백 문자가 아닌 문자를 찾습니다. “[^ \f\n\r\t\v]”와 같습니다.
\t	탭 문자를 찾습니다.
\v	세로 탭 문자를 찾습니다.
\w	밑줄을 포함한 모든 단어 문자를 찾습니다. “[A-Za-z0-9_]”와 같습니다.
\W	단어가 아닌 문자를 찾습니다. “[^A-Za-z0-9_]”와 같습니다.
\num	num을 찾습니다. 여기서 num은 양의 정수입니다. 이전에 참조한 값을 다시 참조합니다. 예를 들어, “(.)\1″은 연속적으로 같은 문자가 두 번 나오는 것을 찾습니다.
\n	n을 찾습니다. 여기서 n은 8진 제어 값입니다. 8진 제어 값은 1, 2, 3 자리 중 하나라야 합니다. 예를 들어, “\11″과 “\011″은 모두 탭 문자를 나타내지만 “\0011″은 “\001” & “1”과 같습니다. 8진 제어 값은 256을 넘을 수 없습니다. 이 값이 256을 넘는 경우에는 처음 두 자릿수 만이 식을 구성합니다. 정규식에 ASCII 코드를 사용할 수 있습니다.
\xn	n을 찾습니다. 여기서 n은 16진 제어 값입니다. 16진 제어 값은 정확히 두 자리이어야 합니다. 예를 들어, “\x41″은 “A”에 해당하지만 “\x041″은 “\x04” & “1”과 같습니다. 정규식에 ASCII 코드를 사용할 수 있습니다.

정규식에 사용할 수 있는 메소드 : test(), compile(), match(), replace(), search()