کنترل Datepicker

کنترل Datepicker یک رابط برای انتخاب تاریخ و زمان خاص و خروجی آن در قالب انتخابی شما است.

کنترل Datepicker از کتابخانه Flatpickr برای ارائه یک رابط انتخاب تاریخ قوی استفاده می‌کند. از Bricks 1.9.8 یک ویژگی options اضافه شده که امکان سفارشی‌سازی بیشتر را فراهم می‌کند.

خواص:

ویژگی: options (از 1.9.8)

• نوع: آرایه (تداعی)
• توضیحات: با ارسال یک آرایه associative از گزینه‌های تعریف‌شده در کتابخانه Flatpickr، سفارشی‌سازی date picker را فعال می‌کند.
• مقادیر پیش فرض:
• enableTime: به طور پیش‌فرض روی true قرار می‌گیرد، مگر اینکه به صراحت از طریق یک ویژگی تصویب شده تنظیم شود.
• altInput: به طور پیش‌فرض به true می‌رسد، مگر اینکه از طریق یک خاصیت ارسال شده به طور دیگری مشخص شده باشد.

نمونه استفاده:

$this->controls['date'] = [
  'tab' => 'content',
  'label' => esc_html__('Date', 'bricks'),
  'type' => 'datepicker',
  'options' => [
    'enableTime' => true,  // Enables time selection.
    'time_24hr' => true,   // Displays time picker in 24-hour mode.
    'noCalendar' => true   // Hides the calendar day selection.
  ]
];

در این مثال، آرایه options برای ایجاد یک انتخابگر زمان پیکربندی شده است که در قالب ۲۴ ساعته بدون نمایش تقویم عمل می‌کند. گزینه enableTime روی true تنظیم شده، time_24hr برای قالب ۲۴ ساعته فعال است، و noCalendar برای مخفی کردن مؤلفه تقویم روی true تنظیم شده است.

برای لیست کامل گزینه‌های قابل تنظیم Flatpickr، لطفاً به اسناد Flatpickr Options مراجعه کنید.

خاصیت: enableTime

• نوع: بولی
• توضیحات: تعیین می‌کند که آیا انتخاب زمان فعال است یا خیر. اگر تنظیماتی در ویژگی options ارسال شود لغو می‌شود.
• پیش‌فرض: true

خاصیت: altInput

• نوع: boolean
• توضیحات: یک سبک ورودی جایگزین و کاربرپسندتر را فعال می‌کند. اگر تنظیماتی در ویژگی options ارسال شود لغو می‌شود.
• پیش‌فرض: true

مثال: المان شمارش معکوس

// Example: Countdown element
class Prefix_Element_Countdown extends \Bricks\Element {
  public $category = 'general';
  public $name     = 'countdown';
  public $icon     = 'ti-timer';
  public $scripts  = ['bricksCountdown'];

  public function get_label() {
    return esc_html__( 'Countdown', 'bricks' );
  }

  public function set_controls() {
    $this->controls['date'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Date', 'bricks' ),
      'type' => 'datepicker',
      'options' => ['enableTime' => true, 'altInput' => true],
      'default' => '2019-01-01 12:00',
    ];

    $this->controls['format'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Format', 'bricks' ),
      'type' => 'text',
      'default' => '%D days %H hours %M minutes %S seconds.',
      'description' => sprintf(
        '%s <a target="_blank" href="http://hilios.github.io/jQuery.countdown/documentation.html#directives">%s</a>.',
        esc_html__( 'For formatting options see', 'bricks' ),
        esc_html__( 'directives', 'bricks' )
      ),
    ];
  }

  public function render() {
    $this->set_attribute( 'wrapper', 'class', 'countdown-wrapper' );

    $countdown_options = [
      'date' => isset( $this->settings['date'] ) ? $this->settings['date'] : '',
      'format' => isset( $this->settings['format'] ) ? $this->settings['format'] : '',
    ];

    $this->set_attribute( 'wrapper', 'data-bricks-countdown-options', wp_json_encode( $countdown_options ) );

    // Render
    if ( ! isset( $this->settings['date'] ) || ! isset( $this->settings['format'] ) ) {
      return $this->render_element_placeholder( [
        'icon-class' => 'ti-timer',
        'text'       => esc_html__( 'No date/format set.', 'bricks' ),
      ] );
    } else {
      echo '<div ' . $this->render_attributes( 'wrapper' ) . '></div>';
    }
  }
}