> PHP 프레임워크 > YII > Yii 프레임워크의 달력 제어: 날짜 선택기 구현

Yii 프레임워크의 달력 제어: 날짜 선택기 구현

王林
풀어 주다: 2023-06-21 11:47:22
원래의
1171명이 탐색했습니다.

웹 애플리케이션이 점점 더 복잡해짐에 따라 강력한 웹 프레임워크가 점점 더 중요해지고 있습니다. 고려해 볼 만한 프레임워크 중 하나는 Yii입니다. Yii는 최신 웹 애플리케이션의 신속한 개발을 위한 고성능 구성 요소 기반 프레임워크입니다. 다른 많은 기능 외에도 Yii는 날짜 선택기를 매우 간단하게 만드는 내장 달력 컨트롤도 제공합니다.

이 글에서는 Yii의 캘린더 컨트롤을 살펴보고 이를 애플리케이션에서 사용하는 방법과 필요에 맞게 사용자 정의하는 방법을 알아봅니다.

Yii의 캘린더 컨트롤은 어떻게 사용하나요?

Yii의 캘린더 컨트롤은 jQuery UI Datepicker를 기반으로 하므로 사용하기 전에 jQuery 및 jQuery UI 라이브러리가 설치되어 있는지 확인해야 합니다. Yii 버전 1.1.15부터 Yii에 "yiijui[DatePicker](http://www.yiiframework.com/doc/api/1.1/CJuiDatePicker)"라는 위젯이 추가되어 Datepicker 사용이 더욱 간편해졌습니다.

먼저 "yiijui" 패키지를 설치해야 합니다.

composer require yiisoft/yii2-jui
로그인 후 복사

다음으로 DatePicker를 사용하려면 뷰에 다음 콘텐츠를 추가하세요.

<?=$form->field($model, 'attribute')->widget(yiijuiDatePicker::class, [
    'dateFormat' => 'yyyy-MM-dd',
    'options' => [
        'class' => 'form-control',
    ],
])?>
로그인 후 복사

여기서 'attribute'는 모델에서 사용되는 속성입니다. 컨트롤러와 데이터 전달을 확인하세요. 위 코드에서 DatePicker 위젯에는 선택한 날짜를 어떤 형식으로 표시할지 알려주는 'dateFormat'과 스타일 클래스 이름을 지정하는 'options'와 같은 다양한 옵션이 포함되어 있습니다.

또한 DatePicker에는 경고, 오류 및 성공 상태에 대한 몇 가지 스타일이 제공되므로 사용자가 잘못된 날짜를 선택하면 자동으로 오류 상태로 표시될 수 있습니다.

Yii의 캘린더 컨트롤을 어떻게 맞춤설정하나요?

Yii의 DatePicker에는 몇 가지 훌륭한 기본 설정이 제공되지만, 일부를 사용자 정의해야 할 수도 있습니다. 예를 들어 다른 위젯과 연결하거나 기본 모양을 변경할 수 있습니다.

Custom Options

기본 설정을 수정하려면 'options' 옵션을 통해 배열을 전달하세요. 예를 들어 기본 날짜 형식을 변경하려면 다음 코드를 사용하세요.

<?=$form->field($model, 'attribute')->widget(yiijuiDatePicker::class, [
    'dateFormat' => 'dd M yy',
    'options' => [
        'class' => 'form-control',
    ],
])?>
로그인 후 복사

위 코드에서는 'dateFormat' 옵션을 사용하여 날짜 형식을 'dd M yy'로 변경했습니다.

사용자 정의 이벤트

DatePicker는 사용자가 날짜를 선택할 때 사용자 정의 논리를 트리거하는 다양한 이벤트도 지원합니다. 예를 들어 아래 코드에서는 'beforeShow' 이벤트를 사용하여 날짜를 선택하기 전에 일부 값을 계산합니다.

<?=$form->field($model, 'attribute')->widget(yiijuiDatePicker::class, [
    'dateFormat' => 'dd M yy',
    'options' => [
        'class' => 'form-control',
    ],
    'clientOptions' => [
        'beforeShow' => "function(date, inst) {
            // 自定义逻辑
        }",
    ],
])?>
로그인 후 복사

여기에서는 'clientOptions' 옵션을 사용하여 우리가 원하는 값이 포함된 JavaScript 개체를 전달합니다. 이벤트와 해당 핸들러를 사용자 정의하고 싶습니다. 이 예에서는 'function(date, inst)'라는 익명 함수를 트리거하고 계산 논리를 처리하도록 'beforeShow' 이벤트를 설정합니다.

Custom Styles

마지막으로 DatePicker의 기본 모양을 변경할 수 있습니다. 스타일을 사용자 정의하려면 'clientOptions' 또는 'options' 옵션 중 하나를 사용할 수 있습니다. $options 옵션에 제공된 HTML 속성을 사용하여 직접 조작하거나 'messages', 'events' 또는 'cssFile'과 같은 다른 키를 사용하여 고급 조작할 수 있습니다.

결론

Yii의 달력 컨트롤은 날짜 선택기를 빠르게 구현하는 데 도움이 되고 다양한 맞춤 설정 옵션을 제공하는 매우 강력한 위젯입니다. 사용하기 전에 jQuery 및 jQuery UI 라이브러리에 익숙하고 필요한 경우 사용자 정의할 수 있는지 확인하세요. 향후 프로젝트에서는 Yii의 DatePicker 위젯을 사용하여 코드를 단순화하고 개발 효율성을 높이는 것을 고려해 보십시오.

위 내용은 Yii 프레임워크의 달력 제어: 날짜 선택기 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿