29 January 2025

How to add google auto search places and change date picker format in elementor's input?

Add google auto search places and change date picker format in elementor's input

add_action('wp_footer',function(){

    ?>


<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js" integrity="sha512-K/oyQtMXpxI4+K0W7H25UopjM8pzq0yrVdFdG21Fh5dBe91I40pDd9A4lzNlHPHBIP2cwZuoxaUSX0GJSObvGA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPvILrgZkge5Bhu37t6Vi4kL-iSwx3t-k&libraries=places" defer></script>


<script>

    jQuery(document).ready(function($) {


        $('input[name="form_fields[field_0b486bd]"], input[name="form_fields[field_ffb1494]"]').each(function() {

            var input = this; 


            if (typeof google !== 'undefined') {


                var autocomplete = new google.maps.places.Autocomplete(input, {

                    componentRestrictions: { country: 'ca' },  

                    types: ['geocode']  

                });


                google.maps.event.addListener(autocomplete, 'place_changed', function() {

                    var place = autocomplete.getPlace();

                    if (place.geometry) {


                        console.log("Selected place: ", place);

                    } else {

                        console.log("Place not found");

                    }

                });

            }

        });


    });


jQuery(document).ready(function($){


    setTimeout(function() {

        flatpickr(".flatpickr-input", {

            minDate: "today",  

            dateFormat: "Y-m-d", 

        });

    }, 1000); 

});


</script>


<?php

});

No comments:

Post a Comment

How to create multi step form with validations?

Create multi step form with validations  <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8...