Bootstrap日历选中日期转JS变量再传至PHP变量的问题解决

我来帮你一步步搞定这个问题～你遇到的核心问题有两个：JavaScript变量作用域导致存值失败，以及前端JS和后端PHP的数据传递，咱们逐个解决：

一、先搞定JS变量存值的问题 #

你之前的代码问题出在变量作用域和未正确赋值上：

• 第一次尝试里，neueDaten是post()函数内部的局部变量，函数外部根本访问不到，所以你在函数外写console.log(neueDaten)肯定拿不到值；
• 第二次尝试只是调用了$('input.form-control').val()获取值，但没把它赋值给任何变量，自然也存不下来。

正确的JS存值写法 #

根据你的需求，分两种场景：

1. 只在函数内部使用变量

function post() {
    // 声明变量并赋值（获取输入框的日期）
    var neueDaten = $(".form-control").val();
    // 此时在函数内部可以正常使用这个变量
    console.log(neueDaten); // 这里能打印出选中的日期
}

2. 需要在函数外部也能访问变量
   把变量声明在全局作用域，然后在函数内赋值：

// 全局作用域声明变量
let neueDaten;

function post() {
    // 给全局变量赋值
    neueDaten = $(".form-control").val();
}

// 先调用函数触发赋值，再打印
post();
console.log(neueDaten); // 现在能拿到日期值了

二、把JS变量传递到PHP变量 #

因为JS是前端运行，PHP是后端运行，必须通过HTTP请求来传递数据，常用两种方式：

方式1：表单提交（刷新页面） #

给输入框加上name属性，通过表单提交到PHP文件：

<!-- 表单指定提交地址和方法 -->
<form method="POST" action="your-handler.php">
    <!-- 给输入框加name，PHP通过这个name取值 -->
    <input type='text' class="form-control" name="selected_date"/>
    <!-- 点击按钮触发你的post函数，同时提交表单 -->
    <button type="submit" onclick="post()">提交日期</button>
</form>

然后在your-handler.php里接收并存储：

<?php
// 判断是否是POST请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取前端传来的日期，记得做过滤验证
    $selectedDate = isset($_POST['selected_date']) ? $_POST['selected_date'] : '';
    
    // 现在$selectedDate就是PHP变量了，可以存数据库、做逻辑处理等
    echo "你选中的日期是：" . $selectedDate;
}
?>

方式2：AJAX异步提交（不刷新页面） #

如果不想刷新页面，用jQuery的AJAX发送请求：

function post() {
    var neueDaten = $(".form-control").val();
    
    // 发送AJAX请求到PHP
    $.ajax({
        url: 'your-handler.php', // PHP处理文件地址
        method: 'POST',
        data: { selected_date: neueDaten }, // 传递的数据，key对应PHP的$_POST键名
        success: function(response) {
            // 请求成功后的回调，response是PHP返回的内容
            console.log("数据已传到PHP，后端返回：" + response);
        },
        error: function(xhr, status, error) {
            // 请求失败的处理
            console.error("提交出错：" + error);
        }
    });
}

对应的PHP处理代码和上面一致，同样通过$_POST['selected_date']获取日期值。

小提醒 #

• 确保你的Bootstrap日历已经正确初始化，能把选中的日期填充到input.form-control里；
• 处理用户输入时，PHP端一定要做数据验证和过滤，比如检查日期格式是否合法，防止恶意输入；
• 如果用jQuery的AJAX，要确保页面已经引入了jQuery库哦～

内容的提问来源于stack exchange，提问作者noSkill06s