DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. Add Date Picker to Wordpress Admin Console

Add Date Picker to Wordpress Admin Console

Paul Underwood user avatar by
Paul Underwood
·
Oct. 19, 12 · Interview
Like (0)
Save
Tweet
Share
8.87K Views

Join the DZone community and get the full member experience.

Join For Free

On a previous article we covered how to add default third party applications on your WordPress site.

Here is a list of all the default scripts you can load from WordPress.

One of the useful scripts in this list is the jQuery UI features. In this tutorial you will learn how to add a field in WordPress which uses this jQuery UI to create a field which is a date picker.

Add Input In Admin Screen

When adding fields in the WordPress admin area you would use the function add_settings_field() to add fields to the page. The callback of this will run a function that creates the code to output the field.

To create a datepicker make sure this callback function echo's an input field like below.

add_settings_field( 'example_date_picker', 'Example Date Picker', 'pu_display_date_picker', 'pu_theme_options.php', 'pu_date_section', array() );
add_action( 'admin_enqueue_scripts', 'enqueue_date_picker' );
function pu_display_date_picker($args){
     extract( $args );
     echo '<input type="date" id="datepicker" name="example[datepicker]" value="" class="example-datepicker" />';
}
/**
 * Enqueue the date picker
 */
function enqueue_date_picker(){
                wp_enqueue_script(
			'field-date-js',
			'Field_Date.js',
			array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker'),
			time(),
			true
		);	
		wp_enqueue_style( 'jquery-ui-datepicker' );
}

The above code displays the functionality of the callback function to display a date pick in the admin area of your WordPress site. The callback function will display a input type which has a class of example-datepicker.

We also add an action on to the admin_enqueue_scripts to add some javascript to the page, on this action we then call the function enqueue_date_picker. This function will load a Javascript file called Field_Date.js, but only after it has loaded jQuery UI and jQuery UI Datepicker.

With these Javascript files loaded on the page we can add some Javascript inside the Field_Date.js file to allow the input to use the jQuery UI Datepicker, copy the below code into a new Javascript file and save it as Field_Date.js.

jQuery(document).ready(function(){
	jQuery('.example-datepicker').datepicker();
});

 

 

 

 

WordPress JQuery UI Console (video game CLI)

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Core Machine Learning Metrics
  • Public Cloud-to-Cloud Repatriation Trend
  • Last Chance To Take the DZone 2023 DevOps Survey and Win $250! [Closes on 1/25 at 8 AM]
  • The Role of Data Governance in Data Strategy: Part II

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: