Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 24, 2017 at 6:10 pm #881354
    henningtillmann

    Hi,

    I would like to add a datepicker outside of the contacts form element. I know that jQuery-UI is only loaded when a contact form element is on a page, so I take care of that manually.

    If I add another input field with class=”avia_datepicker”, it should also become a datepicker, since this code is added by Enfold:

    jQuery(document).ready(function(){ jQuery(".avia_datepicker").datepicker({ ... });

    But I don’t know why, any element outside the contact form does not get transformed into a datepicker element. Am I missing something?

    Thanks in advance
    Henning

    November 25, 2017 at 7:05 am #881494
    Nikko

    Hey Henning,

    Can you post a link of the page mentioned? so we can check.

    Best regards,
    Nikko

    November 26, 2017 at 3:46 pm #881900
    henningtillmann

    Hi Nikko,

    here’s an example on my private website (it also doesn’t work on other instances).

    datepicker

    As you can see, the text input above has also the class attribute “avia_datepicker”. It should also get the datepicker options because the jQuery code at the end of the site, but it doesn’t. So is there a special ingredient I am missing?

    Thanks in advance!
    Henning

    November 26, 2017 at 5:46 pm #881934
    Victoria

    Hi Henning,

    There is an error in JavaScript. And all the scripts are on the page, so it’s not clear what is causing the error.

    Best regards,
    Victoria

    November 27, 2017 at 12:28 pm #882186
    henningtillmann

    Hi Victoria,

    the JavaScript error does not have anything to do with the Datepicker. You can replicate the missing functionality on any Enfold installation.

    The question still is, how to create a datepicker element outside the contact form element.

    Best,
    Henning

    November 29, 2017 at 9:16 am #882968
    Ismael

    Hi,

    Remove the class “hasDatepicker” in the input field. Example:

    <input type="text" id="custom_datepicker">

    In the functions.php file, add this script.

    // custom script
add_action( 'wp_footer', 'ava_custom_script' );
function ava_custom_script() {
?>
<script type="text/javascript">
(function($) {
	$(document).ready(function() {
		$("#custom_datepicker").datepicker({
			showButtonPanel: true,
			changeMonth: true,
			changeYear: true,
			yearRange: "c-80:c+10"
		});
	});
})(jQuery);
</script>
<?php
}

    Best regards,
    Ismael

    June 21, 2018 at 10:57 am #975743
    zovict

    Hi, I try but I get error

    (index):547 Uncaught TypeError: $(…).datepicker is not a function
    at HTMLDocument.<anonymous> ((index):547)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)

    June 22, 2018 at 6:25 am #976098
    Ismael

    Hi,

    You have to load the “jQuery-UI” library manually.

    /**
 * Enqueue the jQuery UI datepicker script
 */
function wpdocs_scripts_datepicker() {
    wp_enqueue_script( 'jquery-ui-datepicker' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_datepicker' );

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.