WP Datepicker


WP Datepicker is a lightweight WordPress Plugin with variety of options without worrying about jQuery scripts for every other field in your scripts.

It’s a FREE plugin for advanced users obviously, because they can extend it with a little effort. Advanced version is also available with most of the demanded/common parameters under settings page.

I hope you will enjoy this plugin and will feel it a convenience in your life.

Video Tutorial:

Compatibility List:

  • GuavaPattern
  • Genesis
  • Thesis
  • WooThemes
  • Gantry
  • Carrington Core
  • Hybrid Core
  • Options Framework
  • Redux Framework
  • SMOF
  • UPThemes
  • Vafpress
  • Codestar

Arbitrary section

I would appreciate the suggestions related to new features. Please don’t forget to support this free plugin by giving your awesome reviews.

A brief Markdown Example

Ordered list:

  1. Can be used with WooCommerce
  2. Exceptional support is available
  3. Developed according to the WordPress plugin development standards


This WordPress Plugin is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
any later version.

This free software is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this software. If not, see http://www.gnu.org/licenses/gpl-2.0.html.


  • WP Datepicker > Default Settings Page - 1
  • WP Datepicker > Preview - 2
  • WP Datepicker > Preview - 3
  • WP Datepicker > Preview - 4
  • WP Datepicker > Implementation inside content editor
  • WP Datepicker > Preview - 5
  • WP Datepicker > Settings Page - 2
  • WP Datepicker > Settings Page - 3


How to install the plugin and get it working:


  1. Go to your wordpress admin “yoursite.com/wp-admin”

  2. Login and then access “yoursite.com/wp-admin/plugin-install.php?tab=upload

  3. Upload and activate this plugin

  4. Now go to admin menu -> settings -> WP Datepicker


  1. Download the WP Datepicker installation package and extract the files on

    your computer.

  2. Create a new directory named WP Datepicker in the wp-content/plugins

    directory of your WordPress installation. Use an FTP or SFTP client to

    upload the contents of your WP Datepicker archive to the new directory

    that you just created on your web host.

  3. Log in to the WordPress Dashboard and activate the WP Datepicker plugin.
  4. Once the plugin is activated, a new WP Datepicker sub-menu will appear in your WordPress admin -> settings menu.


Is this compatible with all WordPress themes?

Yes, it is compatible with all WordPress themes which are developed according to the WordPress theme development standards.

Is everything ready in this plugin for final deployment?

Every theme will have different global styles so a few stylesheet properties will be required to be added and/or modified.

How to install WP Datepicker and Configure

1) Go to plugin section (wp-admin) click on add new and then write wp datepicker in search bar
2) Click on install button wp datepicker and then click on activate respectively
3) Settings Menu > WP Datepicker > Settings Page

Here we have a few options:

a) First option is Configure WP Datepicker by Input field’s Id
b) Second option is Configure WP Datepicker by Input field’s Class
c) Third option is Configure WP Datepicker by Input field’s attribute.
e.g. name, type and HTML5 data

How to install WP Datepicker and Configure it with Contact Form 7

Go to Contact Menu (wp-admin) after installation of contactform7 plugin, click on Contact forms and here we have a contact form 1 by default, click on it.
You will see something like this:

Your Name (required) [text* your-name]
Your Email (required) [email* your-email]
Date 2 [date date-134 class:dp]
Subject [text your-subject]
Your Message [textarea your-message]
[submit “Send”]

Create a new field with an id “#Calendar” Like: Date [date date-726 id:calendar]
Create second field with a class “.dp” Like: Date 2 [date date-134 class:dp]
Create second field with a class “.dp” like: Date 3 [date date-499] having no id and class

I) Now go to the options panel in the input field write id of the first input field with hash sight #calendar and click on save
then refresh page, here first input field have a calendar and other two fields do not have this calendar.

II) Now we configure with second option write second input field’s class here with dot sign by separating with comma like #calendar, .bday
then refresh your page and here the second field also has this calendar.

III) Now configure with input field’s name, write it by separating comma like #calendar, .bday, input [name=”datepicker”]
and refresh your page. Click on the third field to try, this field will also have this calendar option.

The first “Date” field is configured with id, second “Date 2” with input field’s class and third “Date 3” with input field’s name.

How can i report an issue to the plugin author?

It’s better to post on support forum but if you need it be fixed on urgent basis then you can reach me through my blog too. You can find my blog link above.


March 11, 2019
this plugin is very bad , and you have to buy for getting the features!
March 8, 2019
Its installation is simple and fast. It integrates perfectly with the Contact Form 7 plugin. In the Pro version you can choose between several designs and you can also customize colors and typography. It also includes a "Code snipet" to perform even more customizations. Of course, it is necessary to have sufficient knowledge to write that code. If you do not have that knowledge (as is my case), the author offers very fast and efficient assistance. He also, welcome any suggestions to improve the plugin giving it more features and options. A highly recommended plugin.
June 27, 2018
I was trying to make a form that used a datepicker to enter and format the date. It then needed to send dates in the correct format to populate a new form on another site. (method="get"). Great Support! This plugin was one of the options I was looking at, but it wasn't playing nicely on mobile devices for me. After starting a thread in support about my problem, Fahad was quick to address my issue. With a bit of raw install testing to replicate the issue, Fahad had found the problem, retested and issued an update fixing the bug. Thank You Fahad Great Plugin! It does what its meant to do well. Makes it easy to add a datepicker to any of your forms and works across mobiles. Just follow the simple instructions and your good to go. Quick tip for anyone looking to do what I was trying to achieve: Use the type=text element for your datepicker with autocomplete=off and use the readonly attribute. Will save you a headache on mobiles.
May 23, 2018
Excellent, got me out of a fix. Took me a while to figure out how to use with contact form 7, maybe better documentation in that regard is required for people who like to solve stuff themselves. Overall I'm very happy. Thank you developer!
Read all 27 reviews

Contributors & Developers

“WP Datepicker” is open source software. The following people have contributed to this plugin.


Translate “WP Datepicker” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.



  • Faizan-e-Madina premium style added. [Thanks to Bolekula]


  • Google Fonts will not load until you will select one of those. [Thanks to Justin Chalfant]


  • Calendar icon to the datepicker fields. [Thanks to pansuriya123]


  • Readonly field value saving issue on settings page fixed. [Thanks to Paul Singh]


  • Default date option added in free version. [Thanks to princebhalani143]


  • Custom style screenshots fixed. [Thanks to Rais Sufyan]


  • Custom style issue fixed.


  • Settings page revised.



  • Font selection reviewed. [Thanks to Rafa / X2CREATIVOS]


  • Inline position feature restricted with an extra condition.


  • Inline position feature added. [Thanks to Benji McKinney / Moxa Media]


  • More languages added. [Thanks to Abu Usman]


  • Contact form 7 video tutorial added on settings page. [Thanks to Trish Parr]


  • Contact form 7 video tutorial added. [Thanks to Paul Scollon]


  • Read-only and editable option added through settings page. [Thanks to bjoern76]


  • Each selector should have a separate default value. [Thanks to Raul Pinto]


  • Autocomplete OFF. [Thanks to Michael Ellis]


  • Update regional settings with dateFormat overridden possibility. [Thanks to Jmashweb]


  • Added a textarea field for beforeShowDay. [Thanks to William V. Hughes]


  • Added extra checks for front end scripts. [Thanks to Ricardo Orozco Vergara]


  • Added a check for admin side scripts. [Thanks to rabidin]


  • JS interval based errors are stopped. [Thanks to Arnold S]


  • Custom colors are improved. [Thanks to Dalia Herceg]


  • Weekends can be turned off now. [Thanks to Tem Balanco]


  • Language selection refined and today button functionality added. [Thanks to Richard Rowley]


  • Default value issue reported and fixed. [Thanks to Guy Hagen]


  • Capabilities and roles related bug fixed. [Thanks to Paul Munro]


  • Sanitized input and fixed direct file access issues.


  • Multilingual months can be in short and full. These are now capitialize as well. [Thanks to Jose BraƱa]


  • Change year related option refined. [Thanks to Makenzi Edwin]


  • Repeater fields compatibility refined


  • Repeater fields compatibility added


  • Datepicker dateFormat option provided.
  • Translated in German language.


  • Datepicker options refined.


  • Datepicker with 74 languages.


  • jQuery live to on [Thanks to nickylew]


  • minDate & maxDate added in Pro version.


  • Fixed: Stopping google translate from translating datepicker.


  • A few minor fixes.
  • FAQ’s are added.


  • Code Generator Added.


  • An important fix related to mobile responsive layout.


  • An important fix.


  • A few important tweaks.


  • A javascript file excluded.


  • More styles are added.


  • Options & ColorPicker added for Pro Users.


  • Initial Commit