javascript - MooTools DatePicker 库 : 'value' is empty if the form is submitted

Question

我正在尝试将 DatePicker 库用于日期字段，但是当提交表单时，输入字段的“值”为空。
我从这里复制了代码:http://www.monkeyphysics.com/mootools/script/2/datepicker

<script>           
        window.addEvent('load', function() {
        new DatePicker('.demo_vista', { pickerClass: 'datepicker_vista' });
        new DatePicker('.demo_dashboard', { pickerClass: 'datepicker_dashboard' });
        new DatePicker('.demo_jqui', { pickerClass: 'datepicker_jqui', positionOffset: { x: 0, y: 5 } });
        new DatePicker('.demo', { positionOffset: { x: 0, y: 5 }});

         });
</script>
    <li>*DATE : <input name='date' type='text' value='' class='date demo_vista'  /></li>

这是我的网站:http://iconceptsolutions.com.my/projects/grandevest/online-product-registration/

Answer 1

这个库的要点是您写入 HTML 文档的字段与浏览器显示的字段不同。

当您构建DatePicker 对象时，它会获取与其第一个参数匹配的输入字段，并为每个输入字段构建另一个输入字段 实际上获取用户选择的日期并由浏览器显示。

因此，要获得您要查找的值，您必须获得对原始输入字段 的引用，并用它调用 MooTools 函数 getNext()，这样您就可以检索到想要的值:

所以，对于这个 HTML:

<input name='date' type='text' value='' class='date demo' id='dateField' />

你可以用这段代码得到想要的值:

$('dateField').getNext().get('value')

可以调用 Wich，例如，当用户单击提交按钮时。如果您需要处理表单的 PHP 脚本中的值，则可以使用上面的 MooTools 行设置原始 input field 的值，然后将其发送到 PHP。

---

更新

我已经设置了 this JsFiddle用于测试目的。