[Résolu] can I make the date field typable

[Auteur]

Publications

[adamP]

Is it possible to make the date field typable (besides using a single line field)?

[Nigel Supporter Languages: Anglais (English ) Espagnol (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Adam

The date field uses the datepicker JavaScript library for users to select a date. All that really does is fill the field with text in a specific format which when the form is handled upon submission is converted to a standard date format (UNIX time) for storing in the database.

If you don't use datepicker and manually enter the date then you run the risk of people mis-entering dates in invalid formats that are not recognised as dates.

The date field is a text form input set to readonly with an event handler to trigger the datepicker UI when the form input (or the adjacent icon) are clicked.

To have it function like a text field for manual date input you need to remove the event handlers and to unset the readonly attribute.

Because the date field can be used on the admin pages and the front end (via CRED), you can't use one of the custom JS boxes to add the code for this, you will need to enqueue a script for it, so there are two steps required, the first to make a small JS file with the required code, the second to edit your functions.php file to enqueue that file.

(If you already have a JS file for theme customisations you can simply add the JS snippet to that.)

So make a file called, say, custom.js and save it in a js/ subdirectory of your theme folder, such as wp-content/themes/twentysixteen/js/custom.js

( function( $ ) {
	$( document ).ready( function(){
		// remove event handlers
		$('.js-wpt-date').off("click focus keydown keypress keyup");
		
		// unset readonly
		$('.js-wpt-date input').attr('readonly', false);

		// remove the clickable icon
		$('.ui-datepicker-trigger').remove();
	});
})( jQuery );

Then add the following to your functions.php file to enqueue the script you just created.

function enqueue_custom_script() {
	wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array( 'jquery', 'wptoolset-field-date' ), '20160926', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_script' ); // omit if only required in WP backend
add_action( 'admin_enqueue_scripts', 'enqueue_custom_script' );

[adamP]

Thanks for the response.

I am actually looking to have both features, datepicker or typable. Like jquery UI and other datepickers are.

So I kept the event handlers and trigger, and only used the readonly script. It should be though:

$('input.js-wpt-datet').attr('readonly', false);

I would like to have it properly format the entry on field exit. Right now If I type 22092016 format, it will jump to the date, and I can press 'enter' and it will fill the field. If I don't press enter, then it will cause a validation error saying "required".

Ideally I would like to be able to type 09/24/16 format and it correctly format it.

It's not a big deal if this isn't possible. I've just had some clients saying they wish they could type the date because it's faster when entering a lot of data.

[Nigel Supporter Languages: Anglais (English ) Espagnol (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Adam

I dug a little deeper and see that for the date field there is a visible field where the date is entered (which has the datepicker attached for selecting the date) and that when a date is selected that updates a hidden field with the date in unix format, so that's what we need to replicate.

Note that the slug name for my date field is "the-date" which is used twice in the following snippet and which you will need to amend accordingly.

( function( $ ) {
	$( document ).ready( function(){

		// remove the clickable icon
		$('.ui-datepicker-trigger').remove();
		
		// unset readonly
		$("input[name='wpcf[the-date][display-only]']").off().attr('readonly', false).blur( function(){

			var $inputDate = $(this).val(),
				$unixDate = new Date( $inputDate );

			// update the hidden date field with the unix date
			$("input[name='wpcf[the-date][datepicker]']").val( $unixDate );
		});

	});
})( jQuery );

The input field should be reasonably forgiving of variations in how the date is entered.

[adamP]

Thanks Nigel. This did not work for me though. It was creating a long text string format date (instead of unix), and was getting a "date format" validation error.

I played around with it though, and came up with the following. It now works for all date fields. It checks for an empty value so to not respond with NaN. Works well for any type similar to 8-9-16 8/9/16, 08 09 16, etc.

jQuery(document).ready(function($) {
  
       // remove the clickable icon
       // $('.ui-datepicker-trigger').remove();
         
        // unset readonly
        $("input.js-wpt-date").off().attr('readonly', false).blur( function(){
 
          	if( !$(this).val() ) {
          		var $unixDate = '';
            } else {
            	var $inputDate = $(this).val();
            	$unixDate = (new Date($inputDate).getTime() / 1000).toFixed(0);  
            }
          	var update = $(this).nextAll(".js-wpt-date-auxiliar");
            
            // update the hidden date field with the unix date
            update.val( $unixDate );
        });
  // end 
  
} );