Javascript 일수 계산 - Javascript ilsu gyesan

반응형

var toDate = new Date($("#toDate").val());
var fromDate = new Date($("#fromDate").val());
var dateGap = Math.ceil(
      (toDate.getTime() - fromDate.getTime()) / (1000 * 3600 * 24)
    );

ex)

fromDate : 2021-04-30

toDate : 2021-05-01

dateGap : 1 

 

반응형

공유하기

게시글 관리

구독하기메리

'코딩 관련 > Javascript와 jQuery, JSON' 카테고리의 다른 글

[JavaScript]for문에서 Ajax 사용 / ajax 반복사용  (0)2021.05.18[JavaScript] 로컬 JSON파일 가져오기, JSON 파일 읽기/ javascript json 읽기  (2)2021.05.14TypeError: Cannot read property '0' of undefined  (0)2021.05.14[JavaScript] 방금 클릭한 checkbox, 방금 클릭한 요소 컨트롤, checkbox 컨트롤  (0)2021.05.12[JavaScript] 동적으로 생성된 DOM에 이벤트 생성  (0)2021.05.12

JavaScript | 해당 월의 일수 계산하기

Dev/JavaScript | React 2020. 5. 3. 16:57

 

해당 월이 몇일인지 javascript 로 알아보기

 

 

프로젝트에서 

React + Typescript 사용했기 때문에 

코드에서 Typescript가 적용되어 있다.

 

 

00. useState 사용

 

Javascript 일수 계산 - Javascript ilsu gyesan

monthDay 에 계산한 값을 넣어주기

(useState 사용해서 state 처리 해주기)

 

 

01. 날짜 가져오기

 

Javascript 일수 계산 - Javascript ilsu gyesan

오늘? 날짜랑 년도 달 날 설정해주기

 

 

02. 계산 

 

Javascript 일수 계산 - Javascript ilsu gyesan

 

계산되는 부분 

var days = new Date(day1.getFullYear(), day1.getMonth(), 0).getDate();
// 31

31 값이 나온다. 

 

값 넣어주기 

setMonthDay(days);

 

공유하기

게시글 관리

구독하기sooblogya

'Dev > JavaScript | React' 카테고리의 다른 글

React | 리액트 Hooks 공부하기 2 (useEffect , useTitle, useClick, useConfirm, usePreventLeave)  (0)2020.04.04React | 리액트 Hooks 공부하기 1 (useState, useInput, useTabs)  (0)2020.04.03누구든지 하는 리액트  (0)2020.01.11

TAG

JavaScript

관련글 관련글 더보기

  • React | 리액트 Hooks 공부하기 2 (useEffect , useTitle, useClick, useConfirm, usePreventLeave)
  • React | 리액트 Hooks 공부하기 1 (useState, useInput, useTabs)
  • 누구든지 하는 리액트

댓글 0

댓글 접기 댓글 펼치기

이전 댓글 더보기

댓글

비밀글

등록

Javascript 일수 계산 - Javascript ilsu gyesan

 

Date 객체를 이용하여 월의 일수를 구할 수 있다.

 

new Date(YYYY, M, 0).getDate()


new Date(2019,2,0).getDate()

//28

Date 객체에 구하고싶은 년도,월과 0일을 넣고 getDate 를 하면 일수를 구할 수 있다.

 

new Date(2020,2,0).getDate()

//29

2020년은 2월이 29일로 윤년인것을 알 수 있다.

공유하기

게시글 관리

구독하기코딩벌레

저작자표시

'Web > JavaScript' 카테고리의 다른 글

[JS] 자바스크립트 날짜정보 가져오기(년,월,일)  (0)2019.11.05[JS] 자바스크립트 공백제거(replace,trim)  (0)2019.10.29[JS] 배열속 원하는 값 찾기(indexOf, includes)  (0)2019.10.28

Javascript - Date 날짜 계산 [더하기, 빼기, 설정]

  • 프로그래밍/자바스크립트
  • 2021. 4. 19.

 오늘은 Date 객체가 가진 get, set 함수를 통해 날짜 및 시간 데이터를 가져오고 설정하는 방법에 대해서 이야기하려고 합니다. Date 객체를 사용하는 기초적인 부분을 아직 잘 모르시거나 조금 더 알고 배워보고 싶으신 분은 먼저 이전에 작성한 글을 통해 학습 후 이 글을 통해 조금은 더 능숙하게 Date 객체를 다뤄보시기를 추천드립니다.

 

Javascript - Date 기초 배우기 [new Date()]

맨 처음 자바스크립트를 통해 만난 Date는 생각보다 사용하기도 어렵고 어?라고 할 정도로 모호하고 쓰기 불편한 점이 많습니다. Java의 Date, Calendar 만큼 개발을 하는데에 편의성이나 활용도가 떨

7942yongdae.tistory.com

날짜 설정하기

const nextYear = new Date();
nextYear.setFullYear(2021);

 Date 객체는 생성해서 바로 사용할 수 도 있지만, 주어진 상황에 따라서는 Date 객체에  임의의 수를 더하거나 빼서 기능 구현을 해야 하는 상황이 발생합니다.

Javascript 일수 계산 - Javascript ilsu gyesan
setFullYear 함수를 통해 Date의 값을 수정

 Date의 날짜 및 시간을 설정을 하기 위해 다음과 같은 함수가 제공되며 Local time을 기반으로 설정됩니다.

setFullYear: 연도를 설정한다.
setMonth:(0 ~ 11) 월 [ 여기서 1월은 0이고 12월은 11이다 ]을 설정한다.
setDate: (0 ~ 31). 날짜 [0을 설정한 경우 이전 달의 가장 마지막 날을 설정한다.]를 설정한다. 
setHours: (0 ~ 23). 시간을 설정한다.
setMinutes: (0 ~ 59). 분을 설정한다.
setSeconds: (0 ~ 59). 초를 설정한다.
setMilliseconds: (0 ~ 999). 밀리 초를 설정한다.

 

getFullYear: 연도를 반환한다.
getMonth:(0 ~ 11) 월 [ 여기서 1월은 0이고 12월은 11이다 ]을 반환한다.
getDate: (1 ~ 31). 날짜를 반환한다.
getHours: (0 ~ 23). 시간을 반환한다.
getMinutes: (0 ~ 59). 분을 반환한다.
getSeconds: (0 ~ 59). 초를 반환한다.
getMilliseconds: (0 ~ 999). 밀리 초를 반환한다.

 

 Date 객체의 월(Month) 개념은 zero-indexed 기반이기 때문에 setMonth를 사용하는 경우에 0을 설정하면 1월이 설정되니, 인지하고 사용해야 합니다.

const january = new Date();
january.setMonth(0);

console.log(january);
Javascript 일수 계산 - Javascript ilsu gyesan
setMonth()

 Date의 날짜 및 시간을 설정하는 함수를 통해 값을 변경하는 경우 기존에 만들어진 객체를 설정해서 사용하기보다는 새로운 객체를 만들어 사용하는 방법을 권장합니다. 새로운 객체를 생성해 값을 설정하여 사용하기를 권장하는 이유는 객체가 불변하지 않은 특성(mutable)을 가지고 있기 때문이며 불변하지 않은 특성(mutable)은 문제를 야기시킬 수 있습니다.

Javascript 일수 계산 - Javascript ilsu gyesan
getMonth() 와 setMonth()

 

 

날짜 더하고 빼기 [계산] - 날짜 설정 응용하기

 날짜를 설정하는 방법을 활용해서 일자를 기준으로 계산을 하는 코드를 작성해보면 다음과 같다.

const today = new Date();

const tomorrow = new Date(today);
const yesterday = new Date(today);

tomorrow.setDate(today.getDate() + 1);
console.log(tomorrow);

yesterday.setDate(today.getDate() - 1);
console.log(yesterday);
Javascript 일수 계산 - Javascript ilsu gyesan
일자를 더하고 빼기

 함수를 만들어 응용하면 조금 더 쉽게 일자를 더하거나 뺄 수 있습니다. 아래에 작성한 코드는 일자를 더하거나 뺄 수 있는 함수를 작성한 코드로 Date 객체에서 제공하는 get, set의 범주인 년, 월, 시간, 분, 초 도 활용이 가능합니다.

function addDays(date, days) {
  const clone = new Date(date);
  clone.setDate(date.getDate() + days)
  return clone;
}

const today = new Date();

const tomorrow = addDays(today, 1);
console.log(tomorrow);

const yesterday = addDays(today, -1);
console.log(yesterday);

 날짜를 더하거나 빼는 개념과 같이 알아두면 좋은 개념은 Date 객체가 가진 Overflow 현상입니다. Date 객체의 경우 값을 설정할 때 임계값을 넘은 값을 설정하면 Overflow와 같이 자동으로 다음 날짜로 설정이 됩니다.

const today = new Date(2021, 3, 30);

const nextDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 1
);

 // 2021년 5월 1일
console.log(nextDate);
Javascript 일수 계산 - Javascript ilsu gyesan
Date Overflow

정리하기

 이번 글에서는 Date가 가진 날짜 값을 가져오고 설정하는 기능을 알아보고, 그 기능들을 활용해서 날짜를 더하거나 빼는 기능까지 다루어보았습니다. Date는 사용하기 편리하다고는 할 수 없지만 Date의 기본 기능만 숙지한다면 날짜 설정과 관련된 기능은 어렵지 않게 구현할 수 있습니다.

반응형

공유하기

게시글 관리

구독하기프로그래머 YD

저작자표시 비영리 변경금지

  • 카카오스토리
  • 트위터
  • 페이스북

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

Javascript - Date 시계 만들기  (5)2021.04.21Javascript - Date 날짜 계산 [날짜 비교, 날짜 차이]  (0)2021.04.21Javascript - Date 날짜 형식 [yyyy-MM-dd]  (0)2021.04.20Javascript - Date 사용법 알아보기  (0)2021.04.17Javascript - console.log 사용하는 팁  (14)2021.04.05

Date overflow, Date set/get, Date 날짜 더하기, Date 날짜 빼기, Date 날짜 설정 응용하기, Date 날짜 설정하기, Date 년월일 설정하기, JavaScript, 날짜 계산하기, 자바스크립트