code

Wordpress는 관리자에게 네이티브 날짜 선택 기능을 제공합니까?

starcafe 2023. 3. 19. 18:23
반응형

Wordpress는 관리자에게 네이티브 날짜 선택 기능을 제공합니까?

플러그인을 개발하고 있으며, 관리 페이지에서 사용자가 입력한 필드에 날짜를 입력합니다.WP Admin I에 사용할 수 있는 네이티브 날짜 피커가 있는지 궁금합니다.

보통은 작은 jQuery datepicker 스크립트를 포함하고 있습니다만, 이미 사용할 수 있는 경우 코드나 UI의 일관성 등의 이유로 사용하고 싶다고 생각하고 있습니다.포함시켜야 할 것 같지만 관리자에서 사용할 수 있는 jQuery에 대한 문서를 찾을 수 없습니다.

이미 답변이 있었습니다만, 이러한 스크립트를 사용하려고 하는 유저에게 도움이 되도록, CSS(Wordpress는 jQuery UI의 스타일시트를 제공하지 않습니다)를 조금 더 추가하고 싶습니다.

기본적으로(그리고 매우 단순하게) 적어도 다음 세 줄의 코드가 필요합니다.

    wp_enqueue_script('jquery-ui-datepicker');
    wp_register_style('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css');
    wp_enqueue_style('jquery-ui');

한 줄 한 줄 설명:

  1. jQuery UI Datepicker를 로드합니다(Wordpress에 이미 등록된 라이브러리이므로 다른 것은 필요 없습니다).
  2. 핸들과 함께 스타일시트 등록jquery-ui(Google에서 주최하는 것을 이용했습니다만, 원하시는 것을 이용하실 수 있습니다.)
  3. 이 페이지의 Wordpress에 의해 로드된 스타일시트에 효과적으로 포함시킵니다.

그리고 이제 데이트 피커들은 모두 멋지고 화려해질 거예요! :)

HTML5 선물

이것은 OP가 요구한 것이 아닙니다만, 어느 정도 질문과 관련이 있습니다.Datepicker를 추가하는 것을 귀찮아하지 않으시면 HTML5를 사용해 보세요.date브라우저가 매우 좋은(기본값) 날짜 선택기를 만들 수 있도록 하는 입력 유형:

<input type="date" name="the_date" />

네, 다른 것은 필요 없습니다(Wordpress 백엔드에서도 동작합니다).https://jsfiddle.net/2jxdvea0/

MDN에 대한 자세한 내용은http://https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date 를 참조해 주세요.

주의: @mark가 지적했듯이 Firefox(다른 브라우저와 마찬가지로)에서는 입력이 작동하지 않습니다.이것은 MDN 페이지에 기재되어 있습니다만, 물론 여기에서도 언급할 필요가 있습니다.물론 이 문제에 대한 회피책이 있지만, 그것에 대해 쓰는 것은 이 질문의 목적 밖입니다.

업데이트 03-11-2017 @koso의 코멘트에 따르면 Firefox는 버전 57에서 지원됩니다.

네, 워드프레스의 핵심에 이런 게 있어요다음은 이에 대한 몇 가지 기사입니다.

WP Codex: 함수 참조/wp enqueue 스크립트

Paul Underwood의 Iris 컬러 피커 튜토리얼 (날짜 피커에도 동일한 원칙 적용)

다음 코드 행을 추가하여 플러그인에서 jquery ui 날짜 선택 라이브러리를 큐에 넣습니다.

wp_enqueue_script('jquery-ui-datepicker');

jquery ui 라이브러리 사이트에서 스타일시트 파일을 다운로드하여 플러그인에 포함할 수 있습니다.다음으로 다음과 같이 CSS 파일을 큐에 넣습니다.

wp_enqueue_style('jquery-ui-css', 'http://www.example.com/your-plugin-path/css/jquery-ui.css');

또는 Google의 jquery ui CSS를 포함할 수 있습니다(이 루트를 사용하는 경우 CSS 파일을 플러그인과 함께 발송할 필요가 없습니다).

wp_enqueue_style('jquery-ui-css', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');

javascript 파일에 다음 JQuery 코드를 추가하여 "custom_date" 클래스의 필드에 날짜 선택기를 첨부합니다.

<script type="text/javascript">
jQuery(document).ready(function($) {
$('.custom_date').datepicker({
dateFormat : 'yy-mm-dd'
});
});
</script>

이제 클래스 "custom_date"를 HTML 코드의 날짜 필드에 추가하면 사용자가 해당 필드를 클릭하면 달력 보기 달력이 표시됩니다.

<input type="text" class="custom_date" name="start_date" value=""/>

언급URL : https://stackoverflow.com/questions/21869120/does-wordpress-provide-native-datepicker-in-admin

반응형