I managed to make my code working via codepen as you can see if you visit the link here

Now trying to implement on a WordPress test site it looks like my javascript is not working as well as the fontawesome is not being loaded properly.
Here is the link for the test site

Here it is my js:

$(document).ready(function() {
  var txtFromDate, txtToDate;
  $("#txtFrom").datepicker({
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtFromDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() + 1);
      $("#txtTo").datepicker("option", "minDate", dt);
    }
  });
  $("#txtTo").datepicker({
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtToDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() - 1);
      $("#txtFrom").datepicker("option", "maxDate", dt);
    }
  });

  $('.submit-here').click(function() {
    // var link = day_1+month_1+year;
    var date1 = $("#txtFrom").datepicker('getDate'),
        day_1  = date1.getDate(),  
        month_1 = date1.getMonth() + 1,              
        year_1 =  date1.getFullYear();

    var date2 = $("#txtTo").datepicker('getDate'),
        day_2  = date2.getDate(),  
        month_2 = date2.getMonth() + 1,              
        year_2 =  date2.getFullYear(); 

    var where = $('#selection :selected').text();
    var people = $('#people :selected').text();

    console.log('www.lekkeslaap.co.za/akkommodasie-in/'+where+'?q='+where+'&start='+day_1+'+'+month_1+'+'+year_1+'&end='+day_2+'+'+month_2+'+'+year_2+'&pax='+people);   
  });
});

And here it is for my functions.php:

function testsite_scripts() {
    wp_enqueue_style( 'testsite-style', get_stylesheet_uri() );
    wp_enqueue_style( 'fontawesome', get_template_directory_uri() . 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '1.0.0', 'all' );
    wp_enqueue_script( 'testsite-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20151215', true );

    wp_enqueue_script( 'testsite-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'testsite_scripts' );

function testsite_load_scripts(){

    wp_enqueue_style( 'font_extra', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css', array(), '1.0.0', 'all' );
    wp_enqueue_script( 'plugin_script', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js', array('jquery'), '20151215', true );
    wp_enqueue_script( 'calendario', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js', array('jquery'), '20151215', true );
    wp_enqueue_script( 'calendario', get_template_directory_uri() . '/js/calendario.js', array('jquery'), '20151215', true );
}

add_action( 'wp_enqueue_scripts', 'testsite_load_scripts' );

Read more here: javascript and css not loading properly in WordPress site


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: