jquery에서 날짜를 문자열로 변환하는 방법

프런트 엔드 개발에서 날짜 처리는 일반적인 문제입니다. jQuery로 개발할 때 날짜를 문자열로 변환하는 것도 일반적인 요구 사항입니다. 이 기사에서는 jQuery datepicker 플러그인을 도입하여 날짜를 문자열로 변환하는 방법을 보여줍니다.

1. jQuery datepicker

jQuery datepicker는 jQuery UI 스타일을 사용하고 날짜 선택을 위한 대화형 기능을 제공하는 날짜 선택기 플러그인입니다. jQuery 날짜 선택기 플러그인을 사용하면 쉽게 날짜를 선택하고 문자열 형식으로 지정할 수 있습니다.

1. jQuery datepicker 설치

먼저 jQuery 및 jQuery UI의 라이브러리 파일과 jQuery datepicker의 라이브러리 파일을 HTML 페이지에 도입해야 합니다. 해당 라이브러리 파일은 jQuery 공식 홈페이지(https://jquery.com/)와 jQuery UI 공식 홈페이지(https://jqueryui.com/)에서 다운로드할 수 있습니다. 또는 CDN을 사용하여 로드하세요.

162af23817261d4fc6ac1b65cbd537d02cacc6d41bbb37262a98f745aa00fbf0
905931de479ae13e7066559442f61c942cacc6d41bbb37262a98f745aa00fbf0
68d0a4e6ced28a273c3d79055b054066
59b6d67fe367fb48a6e5c040a90080832cacc6d41bbb37262a98f745aa00fbf0
4ad3dd4eb25b99d9f9719c7b8fcc808e

2. jQuery datepicker 사용

jQuery datepicker를 사용하려면 날짜 입력 상자에 클래스를 추가한 다음 JavaScript에서 datepicker 함수를 호출하기만 하면 됩니다.

HTML 코드:

dce39bab25e8c23ccacfef3c0853299c

JavaScript 코드:

$(document).ready(function(){

$(".datepicker").datepicker();

});

그렇습니다 날짜 입력 상자를 클릭하면 날짜 선택 창이 나타납니다.

2. 날짜를 문자열로 변환

날짜를 문자열로 변환하는 작업에는 주로 날짜를 가져오고 문자열로 형식을 지정하는 두 가지 프로세스가 포함됩니다.

1. 날짜 가져오기

jQuery datepicker를 사용하면 함수를 통해 날짜를 가져올 수 있습니다. 예를 들어, 날짜 선택기가 나타날 때 기본 날짜를 얻으려면:

$(".datepicker").datepicker("getDate")

이 함수는 JavaScript 날짜 유형 개체를 반환합니다.

2. 문자열 형식으로 지정

JavaScript의 날짜 유형을 사용하면 toDateString(), toLocaleDateString() 등을 포함한 일부 날짜 형식 지정 방법이 제공됩니다. 그러나 이러한 방법의 단점은 형식을 사용자 정의할 수 없다는 것입니다.

날짜 형식을 편리하게 지정하기 위해 매우 편리한 날짜 처리 방법을 제공하는 타사 라이브러리 moment.js(https://momentjs.com/)를 사용할 수 있습니다.

예를 들어 날짜 형식을 yyyy-mm-dd 형식으로 지정하려면 moment.js의 format() 메서드를 사용할 수 있습니다.

moment(date).format("YYYY-MM-DD")

그 중 date는 서식을 지정할 날짜를 나타내는 JavaScript Date 형식 개체입니다. format() 메소드의 매개변수는 출력 형식을 지정하는 데 사용되는 문자열입니다. YYYY는 4자리 연도, MM은 월, DD는 일 수를 나타냅니다.

전체 코드는 다음과 같습니다.

HTML 코드:

dce39bab25e8c23ccacfef3c0853299c
4797d5dc76168908abb933b8eb61aabfConvert65281c5ac262bf6d81768915a4a77ac0
15a000ca5f4f8f1a50d933234580971594b3e26ee717c64999d7867364b1b4a3

JavaScript 코드:

$(document).ready(function(){

$(".datepicker").datepicker();
$("#btnConvert").click(function(){
    var date = $(".datepicker").datepicker("getDate");
    var dateString = moment(date).format("YYYY-MM-DD");
    $("#result").text(dateString);
});

});

먼저 날짜 입력 상자에 datepicker 클래스를 추가합니다. . 그런 다음 날짜 변환 프로세스를 트리거하는 버튼이 정의됩니다. 버튼을 클릭하면 getUserDate() 함수가 날짜를 가져오고 moment.js를 사용하여 날짜를 문자열로 형식화합니다.

3. 요약

jQuery 날짜 선택기 플러그인을 사용하면 날짜 선택기를 빠르게 구현할 수 있습니다. moment.js를 사용하면 날짜를 문자열로 쉽게 변환하고 날짜 형식을 사용자 정의할 수 있습니다. 이 기사의 설명을 통해 모든 사람이 jQuery가 날짜를 문자열로 변환하는 방법을 더 깊이 이해하게 될 것이라고 믿습니다.

위 내용은 jquery에서 날짜를 문자열로 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!