使用jQuery在WooCommerce Bookings日历中获取所选日期

下面的脚本在playcode.io（或其他）中运行良好，但在注入我的站点时无法检测到单击。我更像是一名PHP开发人员，我确信我在这里犯了一些新手JS错误

脚本的目的是检测Woocommerce Bookings日历上的单击，并确定单击的日期是否符合条件，如果符合条件，则设置表单字段的值并隐藏该字段所在的

，以防止用户手动选择

该脚本目前正在通过my child主题中的footer.php文件注入。它显示在靠近底部的/woocommerce脚本/comment下面

是否有方法使用

的属性：“数据处理程序='selectDay'”和/或“数据事件='click'”通过被动事件侦听器检测单击

有没有办法用纯JS做到这一点

有没有什么WordPress的事情我没有在这里做，让它在WP内部工作

以下是我在playcode上成功使用的代码：

Javascript

    jQuery(document).ready(function(){
    //detect a click in a <td> within the woocommerce bookings calendar <table>
    jQuery(document).on('click', '.ui-datepicker-calendar td', function() {
    //DEBUG ONLY - CONFIRM CLICK IS DETECTED - DELETE WHEN WORKING.
    //alert('click detected');
        // get the closest TD in the current row
        var currentRow = jQuery(this).closest("td");
        // get the year from the wc attribute
        var rawyear = parseInt(jQuery(this).attr("data-year"));
        //get the month from the wc attribute
        var rawmonth = parseInt(jQuery(this).attr("data-month"));
        //get the day from the text inside the <td>
        var rawday = parseInt(currentRow.find(".ui-state-default").html()); 
        //use the month, day and year to set the selected start date.           
        var startDate = new Date(rawyear, rawmonth, rawday, 0, 0, 0);
        //get the current date      
        var today = new Date();
        //set the year for the cutoff date
        var compYear = today.getFullYear();
        //set the month for the cutoff date
        var compMonth = today.getMonth();
        //set how many days into the future is the cuttoff (4-days in this case)
        var compDay = today.getDate() + 4;  
        //set full cuttoff date as variable     
        var cuttoffDate = new Date(compYear, compMonth, compDay, 0, 0, 0);
        //compare the date clicked with the cuttoff date. if the start date is less than or equal to the cutoff date...     
        if(startDate <= cuttoffDate && currentRow[0].className.includes('bookable')) {
            //set deposit option form field to "pay-in-full"
            pif = document.getElementById("wc-option-pay-full");
            pif.checked = true;
            //hide the deposit options
            document.getElementsByClassName('wc-deposits-wrapper')[0].style.display = 'none';
            //output the cutoff date to the console for debugging
            console.log('Pay-in-full on or before', cuttoffDate);
        } else {
    //set deposit option form field to "pay-deposit"
            pd = document.getElementById("wc-option-pay-deposit");
            pd.checked = true;
            //show the deposit options
            document.getElementsByClassName('wc-deposits-wrapper')[0].style.display = 'block';
    //log deposit allowed for debug
    console.log("Deposit allowed");
  }
    });
});

---

对于单个产品页面上的“预订”产品类型的WooCommerce预订，要检测所选日期和所有相关数据，您必须使用委派事件“

所选日期”

，如本例所示：

add_action( 'wp_footer', 'bookable_product_script_js');
function bookable_product_script_js() {
    global $product;

    // Only on single bookable products
    if( is_product() && $product->is_type('booking') ) :

    ?>
    <script type='text/javascript'>
    jQuery(function($){
        // Get the date selected value
        $("#wc-bookings-booking-form > fieldset").on('date-selected', function( event, fdate ) {
            console.log( 'Timestamp in seconds: ' + event.timeStamp ); // the selected date timestamp
            console.log( 'Formatted chosen date: ' + fdate ); // The selected formated date in "YYYY-MM-DD" format

            var date  = new Date(Date.parse(fdate)), // The selected DATE Object
                year  = date.getFullYear(), // Year in numeric value with 4 digits
                month = date.getMonth(), // Month in numeric value from 0 to 11
                day   = date.getDate(), // Day in numeric value from 1 to 31
                wDay  = date.getDay(); // Week day in numeric value from 0 to 6

            console.log('Year: '+year+' | month: '+month+' | day: '+day+' | week day: '+wDay);
        });
    });
    </script>
    <?php
    endif;
}

add_action（'wp_footer'，'bookable_product_script_js'）；
函数可预订\u产品\u脚本\u js（）{
全球$产品；
//仅适用于单个可预订产品
如果（is_product（）&&$product->is_type（'booking'）：
?>
jQuery（函数（$）{
//获取所选日期值
$（“#wc预订预订表单>字段集”）。在（'date-selected'，函数（event，fdate）{
console.log（'Timestamp in seconds:'+event.Timestamp）；//所选日期时间戳
console.log（'Formatted selected date:'+fdate）；//所选格式化日期为“YYYY-MM-DD”格式
var date=新日期（date.parse（fdate）），//所选日期对象
year=date.getFullYear（），//年，以4位数字表示
month=date.getMonth（），//数值范围为0到11的月份
day=date.getDate（），//数字值为1到31的日期
wDay=date.getDay（）；//以0到6的数值表示的星期天
log（'Year:'+Year+'| month:'+month+'| day:'+day+'| week day:'+wDay）；
});
});
基于LoicTheAztec非常有用的答案，以下是我的最终工作代码：

/**
 * Add Woocommerce Deposit Cutoff Date
 * Currently set to 9-days in the future.
 * If a user selects a booking date sooner than "10" days from today,
 * Deposit option is set to "pay-in-full" and deposit options are hidden.
 * If a user selects a booking date later than "10" day from today,
 * Deposit option is set to "pay deposit" and deposit options are displayed.
*/
add_action( 'wp_footer', 'bookable_product_script_js');
function bookable_product_script_js() {
    global $product;

    // Only on single bookable products
    if( is_product() && $product->is_type('booking') ) :

    ?>
    <script type='text/javascript'>
    jQuery(function($){
        // Get the date selected value
        $("#wc-bookings-booking-form > fieldset").on('date-selected', function( event, fdate ) {
            console.log( 'Timestamp in seconds: ' + event.timeStamp ); // the selected date timestamp
            console.log( 'Formatted chosen date: ' + fdate ); // The selected formated date in "YYYY-MM-DD" format

            var date  = new Date(Date.parse(fdate)), // The selected DATE Object
                year  = date.getFullYear(), // Year in numeric value with 4 digits
                month = date.getMonth(), // Month in numeric value from 0 to 11
                day   = date.getDate(), // Day in numeric value from 1 to 31
                wDay  = date.getDay(); // Week day in numeric value from 0 to 6

            //get the current date      
            var today = new Date();
            //set the year for the cutoff date
            var compYear = today.getFullYear();
            //set the month for the cutoff date
            var compMonth = today.getMonth();
            //set how many days into the future is the cuttoff (4-days in this case)
            var compDay = today.getDate() + 9;  
            //set full cuttoff date as variable     
            var cuttoffDate = new Date(compYear, compMonth, compDay, 0, 0, 0);
            //compare the date clicked with the cuttoff date. if the start date is less than or equal to the cutoff date...     
            if(date <= cuttoffDate) {
                //set deposit option form field to "pay-in-full"
                pif = document.getElementById("wc-option-pay-full");
                pif.checked = true;
                //hide the deposit options
                document.getElementsByClassName('wc-deposits-wrapper')[0].style.display = 'none';
                //output the cutoff date to the console for debugging
                //console.log('Pay-in-Full Cutoff: ', cuttoffDate);
            } else {
                //set deposit option form field to "pay-in-full"
                pd = document.getElementById("wc-option-pay-deposit");
                pd.checked = true;
                //hide the deposit options
                document.getElementsByClassName('wc-deposits-wrapper')[0].style.display = 'block';
                //output for debug
                //console.log("Deposit allowed");
            }
            //for debug.
            //alert('Years: '+year+' | months: '+month+' | days: '+day+' | week days: '+wDay);
        });
    });
    </script>
    <?php
    endif;
}

/**
*添加商业存款截止日期
*当前设置为未来9天。
*如果用户选择的预订日期早于今天起的“10”天，
*存款选项设置为“全额支付”，并且存款选项被隐藏。
*如果用户选择的预订日期晚于今天起的“10”天，
*存款选项设置为“支付存款”，并显示存款选项。
*/
添加动作（'wp_footer'、'bookable_product_script_js'）；
函数可预订\u产品\u脚本\u js（）{
全球$产品；
//仅适用于单个可预订产品
如果（is_product（）&&$product->is_type（'booking'）：
?>
jQuery（函数（$）{
//获取所选日期值
$（“#wc预订预订表单>字段集”）。在（'date-selected'，函数（event，fdate）{
console.log（'Timestamp in seconds:'+event.Timestamp）；//所选日期时间戳
console.log（'Formatted selected date:'+fdate）；//所选格式化日期为“YYYY-MM-DD”格式
var date=新日期（date.parse（fdate）），//所选日期对象
year=date.getFullYear（），//年，以4位数字表示
month=date.getMonth（），//数值范围为0到11的月份
day=date.getDate（），//数字值为1到31的日期
wDay=date.getDay（）；//以0到6的数值表示的星期天
//获取当前日期
var today=新日期（）；
//设置截止日期的年份
var compYear=today.getFullYear（）；
//设置截止日期的月份
var compMonth=today.getMonth（）；
//设置截止日期为未来几天（本例中为4天）
var compDay=today.getDate（）+9；
//将完整截止日期设置为变量
var截止日期=新日期（年、月、日、0、0）；
//将单击的日期与截止日期进行比较。如果开始日期小于或等于截止日期。。。
如果（date Hi，Mitch-你是否确保脚本在加载时没有错误，并且以已知的工作形式与浏览器和页面缓存进行比较？谢谢Loic！这成功了。还感谢正确的钩子，因为这是我的下一次探索。对不起，@LoicTheAztec。这是我的第一篇帖子，我不知道解决问题的正确方法。）他的。我已将其更改为您的正确答案。我很抱歉。似乎在各种预订条件下，脚本会将整个日历转换为一个href，以“#”作为页面顶部的目标。您可以在此处看到它的作用：但不在此处：@MItchGould我的代码此处仅是基于专用“选定日期”的示例来自WooCommerce Bookings的委派事件…您必须根据您的预订设置和所需功能调整此示例。出于某些原因，此最终脚本将各种产品的日历转换为指向页面顶部的hrefs锚定链接。这使您无法选择日期。请参阅对的评论链接@洛伊奇的回答。
add_action( 'wp_footer', 'bookable_product_script_js');
function bookable_product_script_js() {
    global $product;

    // Only on single bookable products
    if( is_product() && $product->is_type('booking') ) :

    ?>
    <script type='text/javascript'>
    jQuery(function($){
        // Get the date selected value
        $("#wc-bookings-booking-form > fieldset").on('date-selected', function( event, fdate ) {
            console.log( 'Timestamp in seconds: ' + event.timeStamp ); // the selected date timestamp
            console.log( 'Formatted chosen date: ' + fdate ); // The selected formated date in "YYYY-MM-DD" format

            var date  = new Date(Date.parse(fdate)), // The selected DATE Object
                year  = date.getFullYear(), // Year in numeric value with 4 digits
                month = date.getMonth(), // Month in numeric value from 0 to 11
                day   = date.getDate(), // Day in numeric value from 1 to 31
                wDay  = date.getDay(); // Week day in numeric value from 0 to 6

            console.log('Year: '+year+' | month: '+month+' | day: '+day+' | week day: '+wDay);
        });
    });
    </script>
    <?php
    endif;
}

/**
 * Add Woocommerce Deposit Cutoff Date
 * Currently set to 9-days in the future.
 * If a user selects a booking date sooner than "10" days from today,
 * Deposit option is set to "pay-in-full" and deposit options are hidden.
 * If a user selects a booking date later than "10" day from today,
 * Deposit option is set to "pay deposit" and deposit options are displayed.
*/
add_action( 'wp_footer', 'bookable_product_script_js');
function bookable_product_script_js() {
    global $product;

    // Only on single bookable products
    if( is_product() && $product->is_type('booking') ) :

    ?>
    <script type='text/javascript'>
    jQuery(function($){
        // Get the date selected value
        $("#wc-bookings-booking-form > fieldset").on('date-selected', function( event, fdate ) {
            console.log( 'Timestamp in seconds: ' + event.timeStamp ); // the selected date timestamp
            console.log( 'Formatted chosen date: ' + fdate ); // The selected formated date in "YYYY-MM-DD" format

            var date  = new Date(Date.parse(fdate)), // The selected DATE Object
                year  = date.getFullYear(), // Year in numeric value with 4 digits
                month = date.getMonth(), // Month in numeric value from 0 to 11
                day   = date.getDate(), // Day in numeric value from 1 to 31
                wDay  = date.getDay(); // Week day in numeric value from 0 to 6

            //get the current date      
            var today = new Date();
            //set the year for the cutoff date
            var compYear = today.getFullYear();
            //set the month for the cutoff date
            var compMonth = today.getMonth();
            //set how many days into the future is the cuttoff (4-days in this case)
            var compDay = today.getDate() + 9;  
            //set full cuttoff date as variable     
            var cuttoffDate = new Date(compYear, compMonth, compDay, 0, 0, 0);
            //compare the date clicked with the cuttoff date. if the start date is less than or equal to the cutoff date...     
            if(date <= cuttoffDate) {
                //set deposit option form field to "pay-in-full"
                pif = document.getElementById("wc-option-pay-full");
                pif.checked = true;
                //hide the deposit options
                document.getElementsByClassName('wc-deposits-wrapper')[0].style.display = 'none';
                //output the cutoff date to the console for debugging
                //console.log('Pay-in-Full Cutoff: ', cuttoffDate);
            } else {
                //set deposit option form field to "pay-in-full"
                pd = document.getElementById("wc-option-pay-deposit");
                pd.checked = true;
                //hide the deposit options
                document.getElementsByClassName('wc-deposits-wrapper')[0].style.display = 'block';
                //output for debug
                //console.log("Deposit allowed");
            }
            //for debug.
            //alert('Years: '+year+' | months: '+month+' | days: '+day+' | week days: '+wDay);
        });
    });
    </script>
    <?php
    endif;
}