jquery로 시간 제어를 선택하는 방법-프런트엔드 Q&A-php.cn

jquery로 시간 제어를 선택하는 방법

WBOY

풀어 주다： 2023-05-23 20:47:06

원래의

2087명이 탐색했습니다.

인터넷이 발전하면서 시간 선택 컨트롤이 웹 개발에 점점 더 일반적으로 사용되고 있습니다. 그중 jQuery 시간 선택기 플러그인은 간단한 조작과 아름다운 효과라는 점에서 확실한 이점을 갖고 있으며 개발자들로부터 널리 환영받고 지원됩니다. 이 기사에서는 개발자가 시간 선택 제어를 더 빠르고 쉽게 구현하는 데 도움이 되는 jQuery 시간 선택기 플러그인을 사용하는 방법을 소개합니다.

1. jQuery 시간 선택기 플러그인 소개

jQuery 시간 선택기 플러그인은 빠르고 유연한 크로스 브라우저 날짜 및 시간 선택기 플러그인으로, jQuery 라이브러리를 사용하며 적응형, 확장이 쉽고 스타일이 아름답습니다. 사용이 간편하고, 다국어를 지원하며, 고도로 사용자 정의가 가능하고, 풍부한 이벤트 콜백 기능을 제공합니다. 개발자는 관련 JS 및 CSS 파일을 도입하고 간단히 호출하여 시간 선택 제어를 구현하면 됩니다. 현재 jQuery 시간 선택기 플러그인에는 여러 버전이 있습니다. 이 문서에서는 버전 번호 2.1.9의 플러그인을 참조합니다.

2. jQuery 시간 선택기 플러그인 사용

관련 파일 소개

먼저 jQuery 시간 선택기 플러그인의 관련 JS 및 CSS 파일과 jQuery 라이브러리를 소개해야 합니다. HTML 파일의 head 태그입니다.

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.css">
</head>

로그인 후 복사

HTML 페이지 레이아웃

다음으로 시간 선택기의 컨테이너로 페이지에 입력 태그를 추가합니다.

<input type="text" class="timepicker" />

로그인 후 복사

그 중 클래스 속성 값이 timepicker로, 이는 이 입력 태그가 시간 선택기임을 나타냅니다.

플러그인 초기화

jQuery 시간 선택기 플러그인의 timepicker() 메서드를 호출하여 시간 선택기를 초기화합니다.

$(document).ready(function() {
  $('.timepicker').timepicker();
});

로그인 후 복사

그 중 JavaScript 코드를 실행하기 전에 문서가 완전히 로드되었는지 확인하기 위해 Ready() 메서드가 사용됩니다. timepicker() 메서드는 다양한 선택적 매개변수가 있고 세부적으로 사용자 정의할 수 있는 시간 선택기를 초기화하는 데 사용됩니다.

고급 기능 사용법

jQuery 시간 선택기 플러그인은 기본 시간 선택 외에도 시간 형식 설정, 분 간격 설정, 시간 제한 추가, 언어 변경 등과 같은 많은 고급 기능을 제공합니다. 아래에서는 이러한 공통 기능의 구현을 각각 소개합니다.

(1) 시간 형식 설정

format 속성을 설정하여 시간 선택기의 형식을 설정할 수 있습니다. 형식 옵션에는 날짜 형식, 시간 형식, 초기 시간(초기 시간을 표시하려면 해당 시간을 설정해야 함)이 포함될 수 있습니다.

$(function() {
  $("#timepicker").timepicker({
    timeFormat: "HH:mm:ss",
    dateFormat: "yy-mm-dd",
    dateTimeFormat: "yy-mm-dd HH:mm:ss",
    initialValue: "09:00"
  });
});

로그인 후 복사

위 코드는 시간 선택기의 시간 형식을 "HH:mm:ss"로, 날짜 형식을 "yy-mm-dd"로, 날짜 및 시간 형식을 "yy-mm-dd HH:"로 설정합니다. mm:ss"입니다. 초기 시간은 "09:00"입니다.

(2) 분 간격 설정

단계 속성을 설정하면 시간 선택기의 분 및 초 간격을 설정할 수 있습니다(예: 15분).

$(function() {
  $("#timepicker").timepicker({
    step: 15 * 60  // 单位为秒
  });
});

로그인 후 복사

위 코드는 시간의 분 간격을 설정합니다. 15분으로 선택하세요.

(3) 시간 제한 추가

minTime 및 maxTime 속성을 설정하면 시간 선택기의 시간 범위를 제한할 수 있습니다(예: 9:00~17:00).

$(function() {
  $("#timepicker").timepicker({
    minTime: "9:00",
    maxTime: "17:00"
  });
});

로그인 후 복사

위 코드는 가장 빠른 시간을 설정합니다. 시간 선택기의 시간은 9시이고, 가장 늦은 시간은 17시입니다.

(4) 언어 변경

언어 팩을 설정하면 타임피커의 언어를 변경할 수 있습니다.

$(function() {
  $("#timepicker").timepicker({
    timeFormat: "HH:mm",
    lang: "zh"
  });
});

로그인 후 복사

위 코드는 시간 선택기의 시간 형식을 "HH:mm"로 설정하고 언어를 중국어로 설정합니다.

3. 요약

이 글에서는 jQuery 시간 선택기 플러그인을 사용하여 시간 선택 제어를 구현하는 방법을 소개합니다. 관련 파일을 도입하고 HTML 페이지 레이아웃을 추가하고 플러그인을 초기화하면 아름답고 실용적인 시간 선택기를 빠르게 만들 수 있습니다. 또한 시간 형식, 분 간격, 시간 제한 및 언어 팩과 같은 고급 기능을 설정하여 시간 선택기를 추가로 사용자 정의할 수 있습니다. 따라서 시간 선택기를 개발하는 개발자에게는 jQuery 시간 선택기 플러그인 사용법을 배우는 것이 매우 필요한 기술입니다.

위 내용은 jquery로 시간 제어를 선택하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!