Question

我正在尝试在点击图标时显示日期选择器。到目前为止，我可以在单击图标时显示图标但我无法检索所选值。这是代码：

UI代码

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

Javascript代码

AJS.$('#edit-delete-date').datePicker({
    'overrideBrowserDefault': true}
);
var newDate = AJS.$("#edit-delete-date").val();
console.log("Print date" +newDate)

newDate始终为null。如何检索所选值？

我也试过

var date = AJS.$('#edit-delete-date').datePicker({
        'overrideBrowserDefault': true}
    ).val();

但是浏览器抱怨.val不是有效的功能

Answer 1

您无法从<span>元素中检索值，因为它没有此类属性。

如果您希望将datepicker绑定到<span>元素，而不实际显示单独的<input>字段，那么我建议使用隐藏的输入字段。

<input id="date" type="hidden">
<span id="configure">Configure</span>

然后，您可以将click事件绑定到<span>元素，以触发datepicker。

$('#date').datepicker();

$('#date').on('change', (e) => {
    console.log(e.target.value);
});

$('#configure').on('click', (e) => {
    $('#date').datepicker('show');
});

这是一个基本的工作示例：https://codepen.io/anon/pen/QrMyLp?editors=0010

单击图标时如何保存选定的日期选择器值？

1 个答案: