Jquery에서 날짜/시간을 설정하는 방법

웹 애플리케이션의 인기로 인해 날짜 및 시간 처리는 웹사이트 개발에서 매우 중요한 측면이 되었습니다. jQuery는 개발자가 웹사이트에서 날짜와 시간을 쉽게 처리할 수 있도록 도와주는 인기 있는 JavaScript 라이브러리입니다. 이 기사에서는 jQuery를 사용하여 날짜 및 시간 선택기를 설정하는 방법과 jQuery를 사용하여 페이지의 날짜 및 시간을 동적으로 수정하는 방법을 소개합니다.

1. 날짜 및 시간 선택기

jQuery UI는 웹 애플리케이션용으로 특별히 설계된 UI(사용자 인터페이스) 라이브러리입니다. 개발자는 jQuery UI를 사용하여 웹 페이지에 날짜 및 시간 선택기를 쉽게 추가할 수 있습니다.

jQuery UI를 사용하면 날짜 선택기를 쉽게 추가할 수 있습니다. 먼저 페이지에 jQuery 라이브러리와 jQuery UI 라이브러리를 추가해야 합니다. 그런 다음 HTML 코드에 입력 요소를 추가하고 해당 유형 속성을 "날짜"로 설정합니다.

다음 코드를 사용하여 날짜 선택기를 만듭니다.

<input type="date" id="datepicker">

페이지에 jQuery UI 라이브러리를 추가하려면 다음 코드를 사용합니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

그런 다음 날짜 선택기는 다음 코드를 사용하여 초기화할 수 있습니다.

$( function() {
  $( "#datepicker" ).datepicker();
});

" datepicker" 메소드가 날짜 선택기를 초기화한 후 입력 상자 아래에 날짜 선택기가 자동으로 생성됩니다.

다음 코드를 사용하여 시간 선택기를 초기화할 수도 있습니다.

$( function() {
  $( "#timepicker" ).timepicker();
});

시간 선택기를 추가하려면 시간 선택기 플러그인 라이브러리를 도입해야 합니다. 시간 선택기 플러그인 라이브러리는 https://github.com/jonthornton/jquery-timepicker에서 찾을 수 있습니다.

2. 페이지의 날짜와 시간을 동적으로 업데이트하세요

페이지가 로드될 때 jQuery UI 라이브러리를 사용하여 날짜 및 시간 선택기를 추가하는 것 외에도 jQuery 코드를 사용하여 페이지의 날짜와 시간을 동적으로 업데이트할 수도 있습니다. .

다음은 jQuery를 사용하여 날짜와 시간을 동적으로 업데이트하는 샘플 코드입니다.

$( function() {
//获取当前时间
  var date = new Date();
  //使用getFullYear()、getMonth()、getFullYear()等方法获取年、月、日等日期信息
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var year = date.getFullYear();
  //将日期信息赋值给页面元素
  $("#date").html(day + "/" + month + "/" + year);
  //使用getHours()、getMinutes()、getSeconds()等方法获取时、分、秒等时间信息
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  //将时间信息赋值给页面元素
  $("#time").html(hours + ":" + minutes + ":" + seconds);
  //使用setTimeout()函数每秒钟更新时间
  setTimeout( function() {
    updateTime();
  }, 1000);
});

function updateTime(){
  //获取当前时间
  var date = new Date();
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var year = date.getFullYear();
  $("#date").html(day + "/" + month + "/" + year);
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  $("#time").html(hours + ":" + minutes + ":" + seconds);
  setTimeout( function() {
    updateTime();
  }, 1000);
}

이 코드는 "날짜" 및 "시간" 요소 ID가 포함된 페이지 요소를 동적으로 업데이트합니다. 요소 ID는 필요에 따라 변경할 수 있습니다.

3. 요약

jQuery UI 라이브러리를 사용하면 웹 페이지에 날짜 및 시간 선택기를 쉽게 추가할 수 있습니다. "datepicker" 메소드를 사용하여 날짜 선택기를 추가하고 시간 선택기 플러그인 라이브러리를 사용하여 시간 선택기를 추가할 수 있습니다.

페이지가 로드될 때 jQuery 코드를 사용하여 페이지의 날짜와 시간을 동적으로 업데이트합니다. Date 개체의 메서드를 사용하여 날짜 및 시간 정보를 얻은 다음 jQuery를 사용하여 이를 페이지 요소에 할당할 수 있습니다. 매초마다 시간을 업데이트하려면 setTimeout() 함수를 사용하십시오.

위 코드는 웹사이트 개발자가 필요에 따라 수정하고 확장할 수 있는 기본 예제입니다.

위 내용은 Jquery에서 날짜/시간을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!