点击图标唤起日期选择器后，如何保存并获取选中值？

嘿，我看你已经成功唤起AUI的日期选择器了，但拿不到选中的值对吧？这是因为AUI的datePicker组件默认不会直接把值绑定到你点击的<span>元素上——毕竟span不是表单控件，val()方法对它根本不起作用。咱们来调整一下代码就能搞定：

1. 先添加一个隐藏的input存储日期值 #

首先修改你的UI代码，增加一个隐藏的input元素，专门用来存选中的日期：

<input type="hidden" id="selected-delete-date" />
<span class="aui-icon aui-icon-small aui-iconfont-configure aui-date-picker" id="edit-delete-date" style="cursor: pointer">Configure</span>

2. 通过onSelect回调捕获选中值并保存 #

然后调整JavaScript代码，给datePicker配置onSelect回调函数，当用户选中日期时，把值存入隐藏input，之后就能随时从这个input里读取啦：

// 初始化日期选择器并绑定选择事件
AJS.$('#edit-delete-date').datePicker({
    'overrideBrowserDefault': true,
    onSelect: function(dateText) {
        // 将选中的日期文本存入隐藏input
        AJS.$('#selected-delete-date').val(dateText);
        // 这里可以直接处理选中的值，比如打印或者提交到后端
        console.log("选中的日期：" + dateText);
    }
});

// 后续如果需要获取保存好的值，直接从隐藏input取值即可
// var savedDate = AJS.$('#selected-delete-date').val();
// console.log("已保存的日期：" + savedDate);

为什么之前的代码不行？ #

你原来的代码里，初始化datePicker后立即调用val()，这时候用户还没选择任何日期，而且<span>本身没有value属性，自然拿不到值。必须通过onSelect事件监听用户的选择动作，才能捕获到选中的日期，再把它存到合适的地方（比如隐藏input）。

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