WordPress.org

Forums

How to add Jquery Datepicker (13 posts)

  1. kvhrao
    Member
    Posted 3 years ago #

    Hello

    I am new to wordpress, I would like to know how to enable jquery datepicker to a textbox, I have been to wp_enqueue_script, but It is very difficult for me to understand, can some one please give me simple example and also let me know in which file goes what code?

    Thanks & Regards
    Rao

  2. David Gwyer
    Member
    Posted 3 years ago #

    The date picker is now included in the WP core.

    Just enqueue the date picker JS file, plus a custom JS file to initialize the date picker on a particular text box id (add the date picker JS file as a dependency).

    Where are you trying to do this by the way, on the front end, or a Plugin/theme options page?

  3. kvhrao
    Member
    Posted 3 years ago #

    Hi David Gwyer

    Thanks for your reply.
    I am trying to add it in the front end.
    As I said earlier I am new to the wordpress, can you please give me steps involved in doing this in detail please?

    Thanks & Regards
    Rao

  4. qualsh
    Member
    Posted 3 years ago #

    David, when you instruct a person asking a question to do something why can't you simply link them to the example of how to do it, or provide it here in the forum. I appreciate your wanting to help, but you leave me and this other user looking for an answer still. If you're going to help, then help, either that, or it's just as good as not saying anything at all. This happens through this stupid support forum. FAIL!

  5. David Gwyer
    Member
    Posted 3 years ago #

    The point of this forum is to help people learn more about WordPress not just as a place to get free complete worked solutions to your problems.

    I don't always have time to dig out links, or provide complete steps for a solution. The best way to learn is to look at any responses you get to questions and then do your own research.

  6. David Gwyer
    Member
    Posted 3 years ago #

    You might also want to check out my recently released Plugin:

    http://wordpress.org/extend/plugins/jquery-ui-widgets/

    This will let you add any jQuery UI widget, including the datepicker, on the front end of your site.

  7. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 3 years ago #

    qualsh please be respectful. This was your first post here so I really can't see that you have any cause for complaint about the forums. Please read the forum welcome page http://codex.wordpress.org/Forum_Welcome and try to behave a bit more like an adult.

  8. kvhrao
    Member
    Posted 3 years ago #

    Hello All

    The code to add Jquery DatePicker is as given below, which has to be added in the page within the php tag

    <?php
    wp_enqueue_script('jquery-ui-datepicker');
    wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');
    ?>

    In the form

    <input type="text" id="MyDate" name="MyDate" value=""/>

    In the JavaScript section the code is as below

    jQuery(document).ready(function() {
        jQuery('#MyDate').datepicker({
            dateFormat : 'dd-mm-yy'
        });
    });

    It may not be the correct way, but it is working for me.

    I tried my level best to do it by myself for many days, since I was unable to do that I posted in the forum.

    Since David has replied, no one has viewed this and it was unresolved for me.

    Thanks
    Rao

  9. Dominor Novus
    Member
    Posted 2 years ago #

    @kvhrao: Thanks for outlining your solution and breaking it down.

    For anyone unsure of where kvhrao is adding his code blocks, read on...

    <?php
    wp_enqueue_script('jquery-ui-datepicker');
    wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');
    ?>

    ...is added to your child theme's functions.php file (How to create a WordPress child theme).

    <input type="text" id="MyDate" name="MyDate" value=""/>
    
    <script type="text/javascript">
    
    jQuery(document).ready(function() {
        jQuery('#MyDate').datepicker({
            dateFormat : 'dd-mm-yy'
        });
    });
    
    </script>

    ...is added to your page template file (How to create a WordPress page template).

    If you want to use more than one datepicker per page, use the following instead of the above second block of code:

    <input type="text" class="MyDate" name="MyDate_a" value=""/>
    <input type="text" class="MyDate" name="MyDate_b" value=""/>
    <input type="text" class="MyDate" name="MyDate_c" value=""/>
    
    <script type="text/javascript">
    
    jQuery(document).ready(function() {
        jQuery('.MyDate').datepicker({
            dateFormat : 'dd-mm-yy'
        });
    });
    
    </script>

    The only difference is that the id has been changed to a class in the HTML and JavaScript code.

    The difference between id and class

  10. LukeJonGibson
    Member
    Posted 2 years ago #

    Does anybody here know how would you add the date picker to the "Schedule post" feature on the edit post page? I've been searching everywhere, but I can't find any good examples or clear instructions. I've read through the WordPress Codex, as usual it's explanations are cryptic to all but those who are fairly familiar with the topic, and everything else I've found so far is really vague or no longer works.

    Any ideas?

  11. Dominor Novus
    Member
    Posted 2 years ago #

    Have you read through this tutorial?:

    http://wp.tutsplus.com/series/incorporating-the-jquery-date-picker-into-the-post-editor/

    Not sure if it's exactly what you're looking but it does break down how to add a jquery datepicker to the edit post page.

  12. Dominor Novus
    Member
    Posted 2 years ago #

    Here's a documented example of what you're looking for:

    The brainstorming: http://wordpress.stackexchange.com/questions/50433/schedule-posts-to-publish-from-dates-times-pre-set-by-admin

    The plugin: https://github.com/c3mdigital/WP-Schedule

    Though it adds the datepicker to the post schedule field, it additionally goes one step further by allowing you to restrict posting for specific time ranges.

  13. LukeJonGibson
    Member
    Posted 2 years ago #

    Thank you, that seems to be a much more in depth guide. Your assistance is very much appreciated :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags