Date and Time Picker for WordPress

Date Time Picker Field is a WordPress plugin that allows you to apply a simple Date and Time picker field to any input field using CSS Selectors.

After you install the plugin, go to the Settings page under Settings > DateTime Picker. There you’ll find the plugin options.

The most important thing to get started is to know the CSS selector of the input field that you want to apply the datetime picker. There are numerous youtube tutorials that describe techniques to do this, if you don’t know how yet.

Once you apply set the css selector and save the changes the plugin should convert that field into a date/time picker.

See how it looks below:

By default, the value above will be the next available time slot, based on the site’s timezone, which is currently UTC

 

Screenshots

Settings Screen

Download the Plugin

PRO VERSION

There’s a PRO version of the plugin, where you can set different rules for different input fields and even enable a time range, using 2 fields.

Date and Time Picker Field Pro

only $29.90

Credits

The original datetime picker jquery script that the plugin uses was developed by Valeriy Chupurnov under MIT License.

Github

You can find the latest development version on the github page for the plugin.

36 Replies to “Date and Time Picker for WordPress”

  1. Hi, very nice plugin, easy to install and to use,
    but I have one problem:
    How can I set an inital date-value? It always shows
    the current time.

    Reply

    1. Hi Rudolf, I see you already commented on the support forum, I’ll follow up there.

      Reply

  2. Hi Carlos,

    Just found this plug-in, I installed it and it works but I have some UI feedback.

    1.) It’s way too small. Especially on mobile. Old people will NOT be able to use this.

    2.) There are issues when re-clicking to change a date if you made a mistake for example. The opening and closing is somewhat choppy.

    3.) Function wise, why is there only 1 calendar available? For example, my website has 3 different booking forms that would benefit 3 different calendars.

    4.) Also, let’s say you wanted a separate input for date and time, you can’t do that because you are limited to one calendar. If you had multiple calendars, you could have one for date and one for time. This would be helpful because the UI is way too small.

    5.) I don’t like the colors, both light and dark skins do not have enough CONTRAST. Unavailable days do not stand out enough. And since it’s so tiny, using on mobile is a too difficult because you can’t see what is and what isn’t available because your fingertip is still too big for the date squares.

    It’s good that it works, but these problems make contact form 7 native calendar much better.

    My advice:

    1) make the calendar BIGGER, it’s just WAY TOO SMALL@
    – make it max-width:100% @media under 600px widths
    – make it max-width:500px @media over 600px widths

    2) make the colors have more contrast, for example on light skin:
    – unavailable date numbers #ccc / background #aaa
    – available dates numbers #000 / background #fff

    3) add the option for multiple calendars

    Thanks Carlos

    Let me know if you’d like any more feedback

    Reply

    1. Hi Jay, thank you so much for the valuable feedback. For the plugin I basically included the already available jQuery plugin by xdsoft.net, I didn’t change the styling, I focused on the available options. This is a free side project that unfortunately I can’t spend much time on. It has lots of space for improvement as your precious feedback proves it and I hope one day I’ll be able to implement better styling and other advanced options. Thank you

      Reply

  3. This immediately made the on/off dates better:

    .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled, .xdsoft_datetimepicker .xdsoft_time_box > div > div.xdsoft_disabled {
    opacity: .05;
    -ms-filter: “alpha(opacity=5)”;
    cursor: default;
    }

    Reply

  4. I choose a birthday and send it and the form always send it today

    I don’t understand what the problem is.

    Help pls.

    Reply

    1. Hello;
      the problem is gone, but I don’t know how.

      and this plugin very very good.. thank you

      Reply

  5. Great plugin, thank you.
    Do have one question / request.

    Is it possible to change the options on different pages. I would like to have an inline date picker on one page but have multiple non inline on other pages. Can I change the “inline”:”on” parameter on the individual pages in any way ?

    Thanks

    Reply

    1. Hi Adrian, currently it’s not possible, the options will target all date pickers. You would need your own custom javascript to do these things. But I might have a ‘Premium’ version at some point in the future where this will be possible in an integrated way.

      Reply

  6. Premium version looks great Carlos 🙂

    I know there is an option for the time picker to be the 24-hour clock, is there any option to make the hours and minutes on separate spin boxes? I would need to include every minute of every hour.

    Thanks in advance

    Reply

    1. No, that option is not included.
      For that you could build a normal dropdown, with all the options for example.

      Reply

  7. Also, under “When to Load”
    if I select “Only when shortcode [datetimepicker] exists on a page.”
    the date time picker does not detect the CSS code in my contact form 7 page and therefore does not work.

    Inspecting the code on the page I do see the class sfdatefield as specified under “CSS Selector”

    Reply

    1. Did you add the shortcode [datetimepicker] somewhere on the page?

      Reply

      1. AHH, OK, so even though the css field is there you still need the [datetimepicker] on the page? I thought it was one or the other

        “Choose to search for the css selector across the website or only when the shortcode [datetimepicker] exists on a page”

        Reply

  8. Hi, I like the plugin but I have a small clash.

    The plugin seems to clash with the popular Events-calender plugin. When side-wide is enabled the event time fields are published in the wrong timezone. When I disable the side-wide option in the Data & Time picker plugin it is correct again, solved.

    However I do not a -datetimepicker- shortcode on the page but use the CSS selector so no it Date & Time picker is not working on my form anymore? Is there not a “active/work on this page” options? or how can I hidden set a shortcode to activate as I enable it on a input field with CSS, not date?

    Thanks for any suggestions.

    Reply

    1. OK partly solved, I found a way to add the shortcode properly so the pluing works on a specific appointed page(s) now.

      Cause of the issue in a sidewide setting is stil lthere, so it does clash with event calendar iin regards to the timezone – event times fields – where they are published in wrong timezone (probably taking the server timezone not the sidewide or event calendar ones.

      Thanks Dennis D

      Reply

    2. Hi, the timezone issue will be fixed in the next update. You can already download the fixed version from github: https://github.com/carmoreira/date-time-picker-field

      Reply

  9. Hi there.

    I have a small car rental in Albania and I’m trying to pick the date from your plug in.
    Correctly I’m native WordPress car rental plug in.
    https://albaniaonline.org
    How can I pick the date and time from your plug in ?

    Thanks

    Reply

    1. Hi! Seems your site already has a datepicker in the booking form. You want to replace it, is that it? You can open a ticket here: https://wordpress.org/support/plugin/date-time-picker-field/ if you have any particular issue. Greetings, Carlos

      Reply

  10. Hi Carlos,

    how can i implement your plugin in the checkoutfield of woocommerce?

    Kind regards,

    Hans

    Reply

    1. Hi Hans
      If you can get the CSS selector for the field you want, yes you can.

      Reply

  11. Excelent plugin. It is light and easy to manage. The best is the customer support! 5 star!

    Reply

  12. It doesnt work on popup, any solution?
    am using popup builder plugin

    Reply

    1. Please open a support ticket sharing the link to your page here: https://wordpress.org/support/plugin/date-time-picker-field/

      Reply

  13. Does there any option to select timezone? I want user can submit time and date can convert targeted timezones, like user can submit any according to local timezone but in the end it should convert to targeted timezone.

    Reply

    1. Hi! No, the plugin doesn’t have any timezone option. It will automatically assume the dates are in the timezone selected in your WordPress settings.

      Reply

  14. Neeraj Dhiman July 21, 2020 at 1:05 pm

    Hi, I want to disable the present date? how is it possible in this plugin.

    Reply

    1. Set the minimum date to ‘+1 day’.
      Greetings, Carlos

      Reply

  15. Hi Carlos, great plugin and great idea!
    I need to ask you something.
    I would like to show the plugin also to non admin users, as the editor for example. So they will be able to close some dates without asking me.
    Do there is a setting for this in the plugin?
    Or I can use the plugin “User role editor” maybe but which capability is required to view the admin menu for your plugin?
    Thank you!

    Reply

    1. Hi Lia, this would need a custom modification. Write me through the details in the contact me page and I’ll provide more info.

      Reply

  16. Hi Carlos,

    Thank you for these great plugin. I’m using it on a WP restaurant website http://www.dennieuwenhommel.be . However they only want to accept reservations 24 hour upfront. Now, I have set +1 day, but the customers are still able to make a reservation the next day (which is logical) but earlier than 24 hours. Is there a solution to set hours instead of days as minimum date?

    Thank you very much,

    Gunter

    Reply

    1. Hi Gunter, explore the ‘offset’ option, which will work better.

      Reply

  17. Hey there,

    great work with all of your plugins!

    Is it possible to stop the possibility of choosing chosen dates? I want to use your Plugin for giving people the possibility to book a phone call with me. It would be great, if whenever one person bookes a date and time, the next person cant book it anymore.

    Reply

    1. No, unfortunately not. The plugin does not have booking abilities.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.