Ready to get started?Download WordPress


How to include a jquery datepicker in a wordpress post (4 posts)

  1. christianhau
    Posted 3 years ago #

    I am sure this is really simple, but I have been struggling with it for a few hours. I want to include a date picker for a form that I am putting on my website. There are several good jquery datepickers available online, but I havent gotten one single one of them to work.

    I get them working when I just create a simple HTML page and open it on my server with all the files included, but when I try to do the same thing on my wordpress page I get nothing. I have googled read and looked for a solution, but I think it mostly lies with my lack of understanding.

    Have anyone gotten a datepicker working and are able to give me a more detailed walkthrough?

    Thank you so much!

  2. ambrosite
    Posted 3 years ago #

  3. christianhau
    Posted 3 years ago #

    Thanks, using the link you gave me this is how I would go about including it on my page. Please do correct me when I'm wrong!

    1. Downloaded the date.js from http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
    2. Putting this line of code in the html box of my page:

    <?php wp_enqueue_script( "datepicker", "scripts/date.js"); ?>

    Now, the datepicker consists of two scripts, date.js and jquery.datePicker.js. How do I successfully include both of these?

    I thenk instantiate the script by adding an input field like this:

    <input name="date1" id="date1" class="date-pick" />

    So my question is then, how do I include the scripts properly on my page, and is it ok to include another css file even though I am already using one on my theme?

    Thank you again!

  4. SpankMarvin
    Posted 3 years ago #

    You need to enqueue the scripts in your theme. E.g. in your functions.php file:

    wp_enqueue_script( "datepicker", get_bloginfo( 'template_url' ) . "/scripts/jquery.datePicker.js");
    wp_enqueue_script( "datejs", get_bloginfo( 'template_url' ) . "/scripts/date.js", array("datepicker"));

    This is assuming that your scripts folder is contained in the theme's root. This code should order the js files correctly. Remember that there might be some issues using this jQuery plugin. If you get funny admin issues after including the scripts, you might want to wrap the above in an if( !is_admin() ) clause.


Topic Closed

This topic has been closed to new replies.

About this Topic