jQuery格式化日期范围答案

【问题标题】：jQuery formatting a date rangejQuery格式化日期范围
【发布时间】：2013-10-20 15:50:25
【问题描述】：

我有一个页面，允许用户选择一个日期范围，然后从数据库中创建一个 pdf 报告，该报告具有所选范围之间的日期。在我意识到我不能使用 html input 类型 date 之前，这一切正常。只有某些浏览器支持它。所以我正在使用这个 jQuery：http://jqueryui.com/datepicker/#date-range 但是，现在日期格式全错了。 MySQL 采用yyyy-mm-dd 的日期格式，并将其作为mm/dd/yyyy 发送。我尝试过像这样更改格式，但没有任何变化。有什么想法吗？

 <body>
    <div class="dateselectwrap">
        <form action="reports/arrivals.php" method="post">
            <div class="dateselect">
                <input type="text" class="datepicker" name="start" id="from" required="yes" />
                <input type="text" class="datepicker" name="finish" id="to" required="yes" />
                <p >Format options:<br />
                  <select id="format">
                    <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
                  </select>
                </p>
            </div>
            <div class="datesubmit">
                <input type="Submit" name="Submit">
            </div>
            <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
              <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
              <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
              <link rel="stylesheet" href="/resources/demos/style.css" />
              <script>
              $(function() {
                $( ".datepicker" ).datepicker();
                $( "#format" ).change(function() {
                  $( ".datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
                });
              });
              </script>
              <script>
              $(function() {
                $( "#from" ).datepicker({
                  defaultDate: "+1w",
                  changeMonth: true,
                  numberOfMonths: 3,
                  onClose: function( selectedDate ) {
                    $( "#to" ).datepicker( "option", "minDate", selectedDate );
                  }
                });
                $( "#to" ).datepicker({
                  defaultDate: "+1w",
                  changeMonth: true,
                  numberOfMonths: 3,
                  onClose: function( selectedDate ) {
                    $( "#from" ).datepicker( "option", "maxDate", selectedDate );
                  }
                });
              });
              </script>

        </form>
    </div>
</body>

【问题讨论】：

标签： jquery html mysql date

【解决方案1】：

您可以使用dateformat，例如：dateFormat: 'yy-mm-dd'

     <script>
          $(function() {
            $( "#from" ).datepicker({
              defaultDate: "+1w",
              dateFormat: 'yy-mm-dd',  
              changeMonth: true,
              numberOfMonths: 3,
              onClose: function( selectedDate ) {
                $( "#to" ).datepicker( "option", "minDate", selectedDate );
              }
            });
            $( "#to" ).datepicker({
              defaultDate: "+1w",
              dateFormat: 'yy-mm-dd',
              changeMonth: true,
              numberOfMonths: 3,
              onClose: function( selectedDate ) {
                $( "#from" ).datepicker( "option", "maxDate", selectedDate );
              }
            });
          });
          </script>

此处提供的文档：

http://api.jqueryui.com/datepicker/#option-dateFormat

http://api.jqueryui.com/datepicker/#utility-formatDate

【讨论】：

它实际上是dateFormat: 'yy-mm-dd',，否则它就像20132013--mm-dd。非常感谢！

【解决方案2】：

jQueryUI Datepicker 小部件有一个dateFormat 选项，您可以在创建小部件时使用，也可以在事后使用.datepicker("option", "dateFormat", ...) 函数。

有一个例子here，文档是here。

【讨论】：

我相信只包含链接的答案是不受欢迎的。输入一些详细信息，然后链接到它们以获取更多信息，例如 rkp 的答案。
被谁诟病？我不确定简单地提供代码本质上是回答每个问题的最佳方式，尤其是在我看来，当它是一个单行修复并且文档非常简单时。教人们使用文档很重要。尤其是在这种情况下，提问者只需要在不了解代码如何工作的情况下将示例中的代码复制和粘贴在一起，就不需要付出更多的努力。
来自meta.stackexchange.com/questions/8231/… - 我认为链接很棒，但它们绝不应该是您答案中的唯一信息。
感谢您链接到该讨论。我理解所提出的观点，linkrot 特别有效，我没有考虑过，但我仍然不同意单独的链接永远无法做出好的答案。第一篇文章中的类比是有缺陷的——这个人不是在问到下一栋楼的路，而是在要求某人带他或她到那栋楼！考虑到 OP 提供的代码，实际上包括示例中的复制/粘贴代码，我不认为为答案本身提供代码是有帮助的，因为它会导致更多的复制粘贴和更少的理解。
您至少可以说“使用dateFormat: 选项，它的文档在这里，示例在这里”。读者至少应该通过阅读来了解答案的要点。不要忘记，您的答案的目标读者不仅仅是 OP，他们是其他通过搜索找到问题的人。