如何使用 javascript 获取 MetroUI CSS Datepicker 值答案

【问题标题】：How to get MetroUI CSS Datepicker value with javascript如何使用 javascript 获取 MetroUI CSS Datepicker 值
【发布时间】：2016-02-12 04:11:35
【问题描述】：

我希望能够使用 javascript 查看使用 Metro UI CSS 日期选择器选择的日期。最终，此数据将用于构建要在 AJAX 请求中发送的 JSON 对象。不过现在，我很乐意在浏览器警报消息中看到它。

这里是日期选择器控件：http://metroui.org.ua/datepicker.html 注意第二个日期选择器有一个默认值。

如何使用浏览器控制台将该默认值转换为警报消息？当然我遗漏了一些明显的东西，但是我没有运气做检查输入元素的“val()”等事情。

【问题讨论】：

标签： javascript datepicker metro-ui-css

【解决方案1】：

我刚刚找到了一个小解决方法（又快又脏）：给<input type="text"... 提供一个唯一的ID 到<div class="input-control text"... 中，然后让JQuery 来创造奇迹！代码如下：

<div id="dpContainer" class="input-control text">
    <input id="inputToRead" type="text">
    <button class="btn-date"></button>
</div>

<script>
    function getDPValue(){
      var selectedDate = $('#inputToRead').val();
      return selectedDate;
    }
</script>

我知道它有点脏，也许你可以从http://metroui.org.ua/calendar.html函数中得到一些有用的提示。

更快更脏：

<script>
  function getDPValue(){
    return $('#dpContainer').children('input[type=text]').val();
  }
</script>

HTH, 斯蒂法诺。

【讨论】：

这很好用，而且我之前也没有注意到日历页面上的所有示例（不知道我是如何错过它们的#shrug...）。不错的答案！

【解决方案2】：

datepicker 里面有一个calendar 控件。您可以获取运行.calendar('getDate') 的日历控件的选定日期。然后让 JQuery 完成他的工作并到达 datepicker 内的 calendar 控件。

<div id="myDate" class="input-control text" data-role="datepicker" data-preset="2016-01-01">
    <input type="text">
    <button class="button"><span class="mif-calendar"></span></button>
</div>

<script>
    function getMyDate(){
        return $('#myDate .calendar').calendar('getDate');
    }
</script>

<button class="button" onclick="alert(getMyDate())">Show My Date</button>

【讨论】：

你真的应该在你的答案中添加一些解释性文字。
虽然此代码块可能回答了这个问题，但最好能稍微解释一下它为什么这样做。