Initializing the jQuery UI Datepicker plugin in WooCommerce - wordpress

Question

To select a date range, I use the Jquery UI Datepicker plugin. I use a code that shows the number of days when choosing a period.
Register Datepicker jQuery plugin:
add_action('wp_enqueue_scripts', 'enabling_date_picker');
function enabling_date_picker() {
// Only on front-end and product page
if (is_product() && !is_wc_endpoint_url()):
// Load the Datepicker jQuery-ui plugin script
wp_enqueue_style('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css');
wp_enqueue_script('jquery-ui-datepicker');
endif;
}
Plugin Initialization:
// The jQuery script
add_action('wp_footer', 'rental_date_jquery_script');
function rental_date_jquery_script() {
// Only on front-end and product page
if (is_product() && !is_wc_endpoint_url()):
?>
<script>
var from = new Date();
var to = new Date();
var dayDiff = 1;
$(function() {
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd.mm.yy",
minDate: 0,
maxDate: 14,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
if (this.id == "from") {
from = $(this).datepicker('getDate');
if (!(to == "")) {
update_days()
}
}
if (this.id == "to") {
to = $(this).datepicker('getDate');
update_days()
}
}
});
});
function update_days() {
dayDiff = Math.ceil((to - from) / (1000 * 60 * 60 * 24));
$("#days").empty()
$("#days").append(dayDiff)
}
</script>
<?php
endif;
}
But for some reason, the Datepicker does not work and the calendar form is inactive.
// Add a custom field before single add to cart
add_action('woocommerce_before_variations_form', 'display_rental_date_custom_fields', 5);
function display_rental_date_custom_fields() {
echo '<div>
<h3>From:</h3>
<input id="from" type="text" name="from" readonly />
</div>
<div>
<h3>To:</h3>
<input id="to" type="text" name="to" readonly />
</div>
<div>
<span>You have chosen: </span>
<span id="days">< /span> days.
</div>';
}
How to fix my code so that the Datepicker works correctly?

Answer 1

Because You used a function outside jquery. pls try this
<script>
jQuery(function($) {
var from = new Date();
var to = new Date();
var dayDiff = 1;
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd.mm.yy",
minDate: 0,
maxDate: 14,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
if (this.id == "from") {
from = $(this).datepicker('getDate');
if (!(to == "")) {
update_days()
}
}
if (this.id == "to") {
to = $(this).datepicker('getDate');
update_days()
}
}
});
function update_days() {
dayDiff = Math.ceil((to - from) / (1000 * 60 * 60 * 24));
$("#days").empty()
$("#days").append(dayDiff)
}
});
</script>