templates_fields_datepicker.php

<?php
/**
 * Datepicker Template
 *
 * @var $args array
 */
$field              = $args['field'];
$field->source_name = $field->source_name . '_timestamp';
$classes            = ! empty( $args['classes'] ) ? implode( ' ', (array) $args['classes'] ) : '';

$queried_search = findstr( $args['fieldGroup'] )->get_field_queried_search( $field );
$default_value  = '';

if ( ! empty( $queried_search['value'] ) ) {
  if ( is_array( $queried_search['value'] ) ) {

    // Format the dates
    $dates = array_map(
      function( $date ) {
        return wp_date(
          \FindStr\Template::get_date_formats( 'short' ),
          $date,
          new DateTimeZone( 'UTC' )
        );
      },
      $queried_search['value']
    );

    //if the date is the same, we don't need to display it twice
    $dates = array_unique( $dates );

    //let the opportunity to translate the separator
    $separator = _x( 'to', 'datepicker separator', 'findstr' );

    $default_value = implode( " {$separator} ", $dates );
  }
}

// Check if the field is inline
$inline               = ! empty( $field->options['inline'] );
$queried_search_value = ! empty( $queried_search['value'] ) ? $queried_search['value'] : array();
?>
<div
class="findstrFieldContainer">
  <div
    class="findstr-sr-only"
    id="findstr-datepicker-status-<?php echo esc_attr( $field->id ); ?>-<?php echo esc_attr( $args['fieldGroup'] ); ?>"
    aria-live="polite"
    aria-atomic="true"
    role="status"></div>
  <input id="findstr-<?php echo esc_attr( $field->id ); ?>"
    type="text"
    readonly="readonly"
    name="<?php echo esc_attr( $field->source_name ); ?>"
    value="<?php echo esc_attr( $default_value ); ?>"
    placeholder="<?php echo ! empty( $args['placeholder'] ) ? esc_attr( $args['placeholder'] ) : esc_attr( $field->name ); ?>"
    aria-label="<?php echo esc_html_x( 'Enter to open the datepicker.', 'datepicker aria label', 'findstr' ); ?>"
    class=""
    data-findstr
    data-field-type="datepicker"
    data-findstr-id="<?php echo esc_attr( $field->id ); ?>"
    data-findstr-group="<?php echo esc_attr( $args['fieldGroup'] ); ?>"
    data-findstr-selected-dates="<?php echo esc_attr( wp_json_encode( $queried_search_value ) ); ?>"
    style="<?php echo ( $inline ) ? 'display: none;' : ''; ?>"
    <?php if ( ! $inline ) : ?>
    aria-haspopup="dialog"
    aria-controls="findstr-datepicker-<?php echo esc_attr( $field->id ); ?>"
    aria-expanded="false"
  <?php endif; ?>
  />
  <wc-datepicker
    id="findstr-datepicker-<?php echo esc_attr( $field->id ); ?>-<?php echo esc_attr( $args['fieldGroup'] ); ?>"
    <?php
    /**
     * This filter is used to set the first day of the week for the datepicker.
     *
     * @hook findstr_datepicker_first_day_of_week
     *
     * @param {int} $first_day_of_week Default is 1 (Monday)
     *
     * @return {int} $first_day_of_week
     */
    ?>
    first-day-of-week="<?php echo esc_attr( apply_filters( 'findstr_datepicker_first_day_of_week', 1 ) ); ?>"
    <?php if ( ! empty( $field->options['dateType'] ) && 'range' === $field->options['dateType'] ) : ?>
      range
    <?php endif; ?>
    <?php
    if ( ! empty( $field->options['displayButtons'] ) &&
      (
        ( true === is_array( $field->options['displayButtons'] ) && true === in_array( 'today', $field->options['displayButtons'], true ) ) ||
        ( true === is_string( $field->options['displayButtons'] ) && 'today' === $field->options['displayButtons'] )
      )
    ) :
      ?>
      show-today-button
    <?php endif; ?>

    <?php
    if ( ! empty( $field->options['displayButtons'] ) &&
      (
        ( true === is_array( $field->options['displayButtons'] ) && true === in_array( 'clear', $field->options['displayButtons'], true ) ) ||
        ( true === is_string( $field->options['displayButtons'] ) && 'clear' === $field->options['displayButtons'] )
      )
    ) :
      ?>
      show-clear-button
    <?php endif; ?>

    <?php
    /**
     * This filter is used to set the locale for the datepicker.
     *
     * @hook findstr_datepicker_locale
     *
     * @param {string} $locale Default is the WordPress locale with underscores replaced by hyphens
     *
     * @return {string} $locale
     */
    ?>
    locale="<?php echo esc_attr( apply_filters( 'findstr_datepicker_locale', str_replace( '_', '-', get_locale() ) ) ); ?>"
    <?php if ( ! empty( $queried_search_value ) && isset( $queried_search_value[0] ) ) : ?>
      start-date="<?php echo esc_attr( wp_date( 'Y-m-d', $queried_search_value[0], new DateTimeZone( 'UTC' ) ) ); ?>"
    <?php endif; ?>
    <?php if ( ! $inline ) : ?>
      style="display: none;"
      role="dialog"
    <?php endif; ?>
  ></wc-datepicker>
</div>