Timeline Express - Enable Announcement Date & Time Pickers

custom-function.php

<?php
/**
* Add date/time picker field to Timeline Express announcements
*
* @param array $custom_field Array of custom fields to append to our announcements.
*/
function add_custom_fields_to_announcements( $custom_fields ) {

	$custom_fields[] = array(
		'name' => esc_html__( 'Announcement Date & Time', 'text-domain' ),
		'desc' => esc_html__( 'Select the time that this announcement occured or will occur on.', 'text-domain' ),
		'id'   => 'announcement-time',
		'type' => 'text_datetime_timestamp',
	);

	$full_date   = get_option( 'date_format' ) . ' ' . get_option( 'time_format' );
	$time_format = get_option( 'time_format' );

	// wp_die( print_r( $custom_fields ) );
	$custom_fields[] = array(
		'name' => esc_html__( 'Announcement Date Type', 'text-domain' ),
		'desc' => esc_html__( 'Customize the date format for this announcement.', 'text-domain' ),
		'id'   => 'announcement-date-format',
		'type' => 'radio',
		'default' => $full_date,
		'options' => [
			$full_date   => 'Full Date',
			'Y'          => 'Year Only',
			$time_format => 'Time Only',
		],
	);

	return $custom_fields;

}
add_filter( 'timeline_express_custom_fields', 'add_custom_fields_to_announcements' );

/**
 * Hide the original "Announcement Date" field/row.
 *
 * @return mixed Style tag to hide the original date picker
 */
function hide_default_announcement_date_picker() {

	$screen = get_current_screen();

	if ( isset( $screen->base ) && 'te_announcements' === $screen->id ) {

		?><style>.cmb2-id-announcement-date { display: none; }</style><?php

	}

}
add_action( 'admin_head', 'hide_default_announcement_date_picker' );

/**
 * Append new announcement time and date on the frontend
 *
 * @return string New string to append to our announcement date.
 */
function display_announcement_date( $date ) {

	global $post;

	$announcement_date = get_post_meta( $post->ID, 'announcement-time', true );
	$date_format       = get_post_meta( $post->ID, 'announcement-date-format', true );

	$format = $date_format ? $date_format : get_option( 'date_format' ) . ' ' . get_option( 'time_format' );

	return date_i18n( $format, $announcement_date );

}
add_filter( 'timeline_express_frontend_date_filter', 'display_announcement_date' );

/**
 * Filter the Timeline Express query 'orderby' param & add a date fallback
 *
 * Timeline Express sorts by the announcement date by default.
 * Use this function to fallback to the published date when two
 * or more announcements are using the same announcement date.
 * This allows for manual control over the order of announcements.
 *
 * Source Code: https://github.com/EvanHerman/timeline-express/blob/master/lib/classes/class.timeline-express-initialize.php#L86
 */
function timeline_express_sort_by_published_date_fallback( $args, $post, $atts ) {

	$args['meta_key'] = 'announcement-time';

	// Order by announcement-time. If time & date matches, fallback to post published date.
	$args['orderby'] = [
		'meta_value_num' => $args['order'],
		'date'           => $args['order'],
	];

	return $args;

}
add_filter( 'timeline_express_announcement_query_args', 'timeline_express_sort_by_published_date_fallback', 10, 3 );