Event Date & Time Inputs on Safari

I am experiencing the same issue.

And on Google Chrome and Firefox it removes the dates on editing the event.

I don’t know why this has been marked as resolved. It’s still an issue. You list as a plugin feature, “Cross Browser Support – (Chrome, Firefox, Safari, Opera, Etc.)” but this is not true, yet.

Doesn’t work for me either after the 3.3.0 update.

I have a workaround until the developer solves this. I use the jQuery datepicker by doing the following:

First create a js file which I’ve called Field_Date.js and place it in the /js directory of your theme (or child theme)

ie /wp-content/themes/*theme-name*/js

put this code in it:

jQuery(document).ready(function(){

	jQuery('input[type="date"].widefat').datepicker({
   		dateFormat: 'yy/mm/dd',
    }); 
	
    jQuery('input[type="time"].widefat').timepicker(); 
	
});

Next enqueue the jQuery datepicker function by adding the following to your functions.php (or use code snippets)

function enqueue_date_picker() {
    wp_enqueue_script(
        'field-date-js',
        get_stylesheet_directory_uri() . '/js/Field_Date.js',
        array('jquery'),
	time(),
        true
    );
}
add_action( 'admin_enqueue_scripts', 'enqueue_date_picker' );

This is for a child theme. If you’re not using a child theme then replace

get_stylesheet_directory_uri() with get_template_directory_uri()

The above works for me, I would really like the datepickers to have a bit more intelligence, eg the end_date can’t be before the start_date. Also it would be useful if the end_date was automatically set to be the start_date by default. That bit of intelligence is beyond my coding skills!

I decided to have a go at adding the intelligence to the date fields and came up with the following which works for me. Note that the date and time pickers only work for the first set of dates. Subsequently added dates don’t work yet as they have a different implementation for the ‘name’ field which I haven’t figured out how to use yet.

So with empty fields, setting the start_date also sets the end_date, but you can then modify the end_date. You can’t set the end_date before the start_date. If the end_date is already set it won’t be changed unless the start_date is set beyond it.

Similar for the start/end time except end_time can be before start_time as they can be on different days.

jQuery(document).ready(function(){

	jQuery('[name ="event_start_date"].widefat').datepicker({
   		dateFormat: 'yy/mm/dd',
		onSelect: function() {
		      var StartDate = jQuery(this).datepicker('getDate');
			  var EndDate = jQuery('[name ="event_end_date"].widefat').datepicker('getDate');
			  jQuery('[name ="event_end_date"].widefat').datepicker("option",'minDate', StartDate);
			  if (EndDate == null) jQuery('[name ="event_end_date"].widefat').datepicker('setDate', StartDate);

		}
    }); 
	
	jQuery('[name ="event_end_date"].widefat').datepicker({
   		dateFormat: 'yy/mm/dd',
    }); 
	
	
	jQuery('[name ="event_start_time"].widefat').timepicker({
//		controlType: 'select',
		onClose: function() {
			var StartDate = jQuery(this).datetimepicker('getDate');
			var EndDate = jQuery('[name ="event_end_time"].widefat').datetimepicker('getDate');
			if ((EndDate==null) || (StartDate>EndDate))
				jQuery('[name ="event_end_time"].widefat').datetimepicker('setDate', StartDate);
		}
    }); 
	
	jQuery('[name ="event_end_time"].widefat').timepicker({
    }); 
		
});