jQuery格式化日期范围

时间:2013-10-12 17:39:10

标签: jquery html mysql date

我有一个页面,允许用户选择日期范围,然后从具有所选范围之间的日期的数据库创建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>

2 个答案:

答案 0 :(得分:3)

您可以使用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

答案 1 :(得分:0)

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

有一个示例here,文档为here