날짜 , 달력 , 시간 관련 js

2022. 1. 14. 02:45

728x90

■ 달력 ( datepicker )

// date-picker
<?
	require_once('../connection.php');
	require_once('../library/json.php'); 
	session_start();	 
?>
<html lang="en" class="no-js">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>ERP SYSTEM</title>
 
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="../../assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
 
		<!-- page specific plugin scripts -->
		<script src="../../assets/js/jquery-ui.min.js"></script>
		<script src="../../assets/js/jquery.min.js"></script>
		<script src="../../assets/js/bootstrap-datepicker.min.js"></script>

	</head>
	<body>
		<span class="input-icon input-icon-right">
			<div class="input-group">
				<input class="date-picker" style="width:120px;height:90px;" type="text" data-date-format="yyyy-mm-dd" name="create_dt" id="create_dt" value="<?=date("Y-m-d")?>" readonly/>
				<span class="input-group-addon">
					<i class="fa fa-calendar bigger-110"></i>
				</span>
			</div>
		</span>
	</body>
</html>

<script type="text/javascript">
(function($){
	$.fn.datepicker.dates['kr'] = {
		days: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일"],
		daysShort: ["일", "월", "화", "수", "목", "금", "토", "일"],
		daysMin: ["일", "월", "화", "수", "목", "금", "토", "일"],
		months: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
		monthsShort: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
	};
}(jQuery));

jQuery(function($) {		
			
	//datepicker plugin
	//link
	$('.date-picker').datepicker({
		autoclose: true,
		todayHighlight: true,
		language: "kr"
	})
	//show datepicker when clicking on the icon
	.next().on(ace.click_event, function(){
		$(this).prev().focus();
	});
});
</script>

//기준일 이전 전택 막기
var first = $("#start_dt").val();
var working_dt = $("#working_dt").val();
if(parseInt(first.replace(/-/g,""),10) > parseInt(working_dt.replace(/-/g,""),10)){
	showAlert("검색일이 현재보다 미래일 수 없습니다");
	return;
}

jQuery(function($){
     
    /*
    //config 값을 json형식으로 만든후 setDefaults로 설정할수도 있음.
    $.datepicker.regional['ko'] = {closeText: '닫기',dayNamesShort: ['일','월','화','수','목','금','토']};
    $.datepicker.setDefaults($.datepicker.regional['ko']);
    */
     
    $(".calander").datepicker({
        changeMonth:true,
        changeYear:true,
        yearRange:"1900:2014",
        showOn:"both",
        buttonImage:"../img/ico/calendar.gif",
        buttonImageOnly:true,
        dateFormat: 'yy-mm-dd',
        showOtherMonths: true,
        selectOtherMonths: true,
        showMonthAfterYear: true,
        dayNamesMin: ['일','월', '화', '수', '목', '금', '토'],
        monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
        monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
        nextText: '다음 달',
        prevText: '이전 달',
        beforeShowDay: disableAllTheseDays 
    });
     
});
 
// 특정날짜들 배열
var disabledDays = ["2013-7-9","2013-7-24","2013-7-26"];
 
// 주말(토, 일요일) 선택 막기
function noWeekendsOrHolidays(date) {
    var noWeekend = jQuery.datepicker.noWeekends(date);
    return noWeekend[0] ? [true] : noWeekend;
}
 
// 일요일만 선택 막기
function noSundays(date) {
  return [date.getDay() != 0, ''];
}
 
// 이전 날짜들은 선택막기
function noBefore(date){
    if (date < new Date())
        return [false];
    return [true];
}
 
// 특정일 선택막기
function disableAllTheseDays(date) {
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    for (i = 0; i < disabledDays.length; i++) {
        if($.inArray(y + '-' +(m+1) + '-' + d,disabledDays) != -1) {
            return [false];
        }
    }
    return [true];
}

// 날짜를 입력 하면 오늘 날짜로부터 숫자만큼 전날의 날짜를 yyyy/mm/dd 형식으로 돌려 준다.
function caldate(day){

	var caledmonth, caledday, caledYear;
	var loadDt = new Date();
	var v = new Date(Date.parse(loadDt) + day*1000*60*60*24);

	caledYear = v.getFullYear();

	if( v.getMonth() < 9 ){
		caledmonth = '0'+(v.getMonth()+1);
	}else{
		caledmonth = v.getMonth()+1;
	}
	if( v.getDate() < 9 ){
		caledday = '0'+v.getDate();
	}else{
		caledday = v.getDate();
	}
	return caledYear+'-'+ caledmonth +'-'+ caledday;
}

// 오늘 날짜 가져오기
	//=========================================
	var today = new Date();
	var dd = today.getDate();
	var mm = today.getMonth()+1;
	var yyyy = today.getFullYear();

	if(dd<10) { dd='0'+dd }
	if(mm<10) { mm='0'+mm }
	today = yyyy+'-'+mm+'-'+dd;
	//=========================================

// https://programmer93.tistory.com/5
// 달력 부트스트랩 (달력으로 날짜 검색하기 CSS)
<?
	require_once('../connection.php');
	require_once('../library/json.php');  
	session_start();	 
?>
<!DOCTYPE html>

<html>
<head>
    <title>Bootstrap datepicket demo</title>

    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="/css/jquery-ui.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
    <script src="/js/bootstrap-datepicker.kr.js" charset="UTF-8"></script>

    <script type='text/javascript'>
        $(function(){
        $('.input-group.date').datepicker({
            calendarWeeks: false,
            todayHighlight: true,
            autoclose: true,
            format: "yyyy-mm-dd",
            language: "kr"
        });

        });
    </script>
</head>
    <body>
        <div class="container" style="background: orange">
        <h1>Bootstrap datepicker 날자 검색하기</h1>

        <div style="float:left; margin-left:5px">
            <div class="input-group date">
                <input type="text" name="start_date" id="start_date" class="form-control" style="width:200px;"/>
                <span class="input-group-addon" style="width:100px;"><i class="glyphicon glyphicon-calendar"></i></span>
            </div> 
        </div> 
        <div style="float:left">&nbsp;&nbsp;~&nbsp;&nbsp;</div>
        <div style="float:left; margin-left:5px">
            <div class="input-group date">
                <input type="text" name="end_date" id="end_date" class="form-control" style="width:200px;"/>
                <span class="input-group-addon" style="width:100px;"><i class="glyphicon glyphicon-calendar"></i></span>
            </div>
        </div>
        </div><br>
        <div align="center">
            <button type="button"  onclick="SearchBTN()" > 검색 </button>
        </div>
        </div>
    </body>
</html>
<script>

(function($){
    $.fn.datepicker.dates['kr'] = {
        days: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일"],
        daysShort: ["일", "월", "화", "수", "목", "금", "토", "일"],
        daysMin: ["일", "월", "화", "수", "목", "금", "토", "일"],
        months: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
        monthsShort: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
    };
}(jQuery));

</script>

■ TimePicker

clockpicker.zip

0.01MB

<!-- %*타임픽커*% -->
<link href="../assets/clockpicker/clockpicker.css" rel="stylesheet" />    
<script src="../assets/clockpicker/clockpicker.js"></script>

<table class="table table-bordered" id="tb">
	<thead>
	   <tr style="background-color:#334252">
			<th style="background-color:#f1f1f1" width="30"><input type="button" class='regist' value="+" onclick="TimePicker()"></th>
			<th style="background-color:#f1f1f1" width="100">타임픽커</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>

<script>
function TimePicker(){
	
	var tag = "";
	var Timeflag = $("#InspectionTimeflag").val();
	
	tag += "<tr>";
	tag += "<td class='center'><i class='delBtn fa fa-minus-square fa-2x' aria-hidden='true' onclick='delTr2(this)'></i></td>";
	tag += "<td>";
		
	tag += "<div class='input-group clockpicker' data-placement='left' data-align='top' data-autoclose='true' id='inspection_start_"+Timeflag+"' style='width:110px;float:left'>";
	tag += "	<input type='text' name='start_time[]' class='form-control' value='<?=date('H:i')?>' readonly>";
	tag += "		<span class='input-group-addon'>";
	tag += "		<span class='glyphicon glyphicon-time'></span>";
	tag += "	</span>";
	tag += "</div>";
	tag += "<div style='width:20px;float:left;center;padding-left:8px'><strong>-</strong>"; 
	tag += "</div>";
	tag += "<div class='input-group clockpicker' data-placement='left' data-align='top' data-autoclose='true' id='inspection_end_"+Timeflag+"' style='width:110px;float:left'>";
	tag += "	<input type='text' name='end_time[]' class='form-control' value='<?=date('H:i')?>' readonly>";
	tag += "	<span class='input-group-addon'>";
	tag += "		<span class='glyphicon glyphicon-time'></span>";
	tag += "	</span>";
	tag += "</div>";
	
	tag+="</td>";
	tag += "</tr>";

	$("#tb tbody").append(tag);
	
	$("#inspection_start_"+Timeflag).clockpicker({
                placement: 'bottom',    // 시계 바인딩 방향 top,bottom,right,left
                //align: 'right',       // 시계 위치 right,left 
                align: 'left',
                autoclose: true,      // 자동 닫기
                //default: '09:00',
                //donetext: ''
	});

	$("#inspection_end_"+Timeflag).clockpicker({
                placement: 'bottom',    // 시계 바인딩 방향 top,bottom,right,left
                //align: 'right',       // 시계 위치 right,left 
                align: 'left',
                autoclose: true,      // 자동 닫기
                //default: '09:00',
                //donetext: ''
	});

	$("#InspectionTimeflag").val( Number(Timeflag)+1 );
}
</script>

■ FullCalendar

참고자료 : https://dotheright.tistory.com/219

아래 파일은 잠겨있습니다 ( 비공개 )

calendar.zip

0.07MB

■ 시간차이 구하기

//자바스크립트  날짜 차이 구하기
  var nowDate = new Date("<?=$date?>");
  var start_dt = new Date(start_dt);
  var diffDay = ( start_dt.getTime() - nowDate.getTime() ) / (1000*60*60*24);  
  if(parseInt(diffDay) < 0) alert(diffDay); 
 
//php 날짜 차이 구하기 https://88240.tistory.com/110
$s_date = '2008-10-25';
$e_date = '2008-11-02';
$term = intval((strtotime($e_date)-strtotime($s_date))/86400); //날짜 사이의 일수를 구한다.
echo $term;
for($i=1; $i<=$term; $i++)
{
 echo date("Y-m-d", strtotime($s_date.'+'.$i.' day')); //두 날짜사이의 날짜를 구한다.
}

// timestamp로 시간차이 구하기.
$total_time = $time - $machine_work_time->start_tm; // 종료timeStamp -  시작timestamp
$days = floor($total_time/86400);
$time2 = $total_time - ($days*86400);
$hours = floor($time2/3600);
$time2 = $time2 - ($hours*3600);
$min = floor($time2/60);
$sec = $time2 - ($min*60);
echo $hours.":".$min.":".$sec;

■ 날자 더하기

<tr>
    <th scope="col">발급일</th>
    <td class="text-center">  
        <div class="form-row py-1">
            <input type="date" id="cv_search_s_date" class="form-control form-control-sm w-auto" value="${startDate}">
            <span class="mx-2">~</span>
            <input type="date" id="cv_search_e_date" class="form-control form-control-sm w-auto" value="${endDate}">
            <div class="col-sm-5 btn-group ml-2" role="group">
                <button type="button" id="cv_now" class="btn btn-sm btn-outline-info cv_add_dt" tag="cv_now">오늘</button>
                <button type="button" id="cv_week" class="btn btn-sm btn-outline-info cv_add_dt" tag="cv_week">일주일</button>
                <button type="button" id="cv_month1" class="btn btn-sm btn-outline-info cv_add_dt active" tag="cv_month1">1개월</button>
                <button type="button" id="cv_month3" class="btn btn-sm btn-outline-info cv_add_dt" tag="cv_month3">3개월</button>
                <button type="button" id="cv_all" class="btn btn-sm btn-outline-info cv_add_dt" tag="cv_all">전체</button>
            </div>
        </div>
    </td> 
</tr>

$(document).ready(function() {
	 
	//main :: 등록일  click
	$(".add_dt").click(function(){
		$(".add_dt").removeClass('active');
		var tag = $(this).attr("tag"); 
		$("#"+ tag ).addClass('active'); 
		   
		var result = new Date();  
		switch( tag ){ 
			case "cpn_week" :  
				result = addDate( result ,0 , 0, 7); 
				$("#search_e_date").val( result.getFullYear() + "-" + _len(result.getMonth()+1) + "-"+  _len(result.getDate()) );
				break;
				
			case "cpn_month1" :  
				result = addDate( result ,0 , 1, 0); 
				$("#search_e_date").val( result.getFullYear() + "-" + _len(result.getMonth()+1) + "-"+  _len(result.getDate()) );
				break;
				
			case "cpn_month3" : 
				result = addDate( result ,0 , 3, 0); 
				$("#search_e_date").val( result.getFullYear() + "-" + _len(result.getMonth()+1) + "-"+  _len(result.getDate()) );
				break;
				
			case "cpn_all" :
				var temp_s_date = new Date( result.getFullYear() , 0 , 1); 
				result = new Date( result.getFullYear() , 11 , 31); 
				$("#search_s_date").val( temp_s_date.getFullYear() + "-" + _len(temp_s_date.getMonth()+1) + "-"+  _len(temp_s_date.getDate()) );
				$("#search_e_date").val( result.getFullYear() + "-" + _len(result.getMonth()+1) + "-"+  _len(result.getDate()) );
				break; 
				
			default :
				$("#search_s_date").val( result.getFullYear() + "-" + _len(result.getMonth()+1) + "-"+  _len(result.getDate()) );
				$("#search_e_date").val( result.getFullYear() + "-" + _len(result.getMonth()+1) + "-"+  _len(result.getDate()) );
				break;
		}    
		//console.log( result.getFullYear() + "-" + _len(result.getMonth()+1) + "-"+  _len(result.getDate()) ); 
	});
});

// 날짜 10 아래 인 경우0 붙여주기
function _len(value){
	return value.toString().length < 2 ? '0' + value : value;
}

// 오늘로 부터 년 월 일 더하기
function addDate(date, year , month , days) { 
	
	if( date instanceof Date && !isNaN(date) ){
		var clone = new Date(date);    
		if(year > 0) clone.setFullYear(date.getFullYear() + year);  
		if(month > 0) clone.setMonth(date.getMonth() + month );  
		if(days > 0) clone.setDate(date.getDate() + days);   
		return clone; 
	} 
}

728x90

B메모장

날짜 , 달력 , 시간 관련 js

■ 달력 ( datepicker )

■ TimePicker

■ FullCalendar

■ 날자 더하기

+ Recent posts

티스토리툴바