Create Beautiful Datepicker Field in WordPress Admin

In this tutorial I will show you how you can easily create a beautiful datepicker field just like on the screenshot below without any additional JavaScript libraries.

create custom datepicker field in user settings

Let’s assume that you have a text field anywhere in WordPress admin. Just add class="any-custom-class" to it. Example:

<input type="text" class="my-datepicker" />

In case you’re using my Simple Fields plugin for creating meta boxes and options pages, you can add a class attribute like an array key class.

array(
	'id' => 'birthday',
	'label' => 'Birthday',
	'class' => 'my-datepicker' // add CSS class here
),

Now it is time to enqueue some CSS and JavaScript. You might say – “Wait, you’ve just told that we are not going to use any JavaScript libraries!”. That’s true, but I meant additional libraries, but we can still use what is already a part of WordPress Core. It is jQuery UI.

add_action( 'admin_enqueue_scripts', 'rudr_datepicker_css_and_js' );

function rudr_datepicker_css_and_js() {
	wp_enqueue_script( 'jquery-ui-datepicker' );
	wp_enqueue_style( 'custom-css', get_stylesheet_directory_uri() . '/jquery-ui-datepicker-by-misha.css' );
}

I’ve also added my own custom CSS for datepicker, you can find it on GitHub.

The last but not the least, let’s initialize datepicker for every input field with the CSS class my-datepicker.

jQuery( function( $ ) {
	$( '.my-datepicker' ).datepicker();
} );

If you’re looking for some customization, you can can check the official documentation.

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter