JQuery-Mobile UI DatePicker 设置特定的默认日期答案

【问题标题】：JQuery-Mobile UI DatePicker Setting a specific default dateJQuery-Mobile UI DatePicker 设置特定的默认日期
【发布时间】：2011-05-07 20:04:01
【问题描述】：

我在尝试在 JQuery Mobile 的 UI 日期选择器上设置默认日期时遇到问题。

有人可以帮忙吗？

这里是完整的源代码：

<!DOCTYPE html> 
<html> 
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 
    <title>jQuery Mobile Framework - Datepicker</title> 
    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    <link rel="stylesheet"  href="jquery.ui.datepicker.mobile.css" /> 

    <script>
        //reset type=date inputs to text
        $( document ).bind( "mobileinit", function(){
            $.mobile.page.prototype.options.degradeInputs.date = true;
        }); 
    </script>

    <script src="jQuery.ui.datepicker.js"></script>
    <script src="jquery.ui.datepicker.mobile.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
var queryDate = new Date();
queryDate.setFullYear(2009,11,01);
$('#date').datepicker({defaultDate: queryDate});


   });
  </script>

</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>jQuery UI's Datepicker Styled for mobile</h1>       
    </div>

    <div data-role="content">
        <p>The included files extend the jQuery UI datepicker to make it suitable for touch devices. This plugin is not included in jQuery Mobile by default, so you'll need to include the files yourself if you'd like to use them. Scroll down for usage instructions.</p>

        <form action="#" method="get">
            <div data-role="fieldcontain">
                <label for="date">Date Input:</label>
                <input type="date" name="date" id="date" value=""  />
            </div>      
        </form>


        <h2>Usage Instructions</h2>

        <p>The datepicker auto-generates from a regular <code>input</code> element with a <code>type="date"</code> attribute.</p>

        <pre><code>
&lt;label for=&quot;date&quot;&gt;Date Input:&lt;/label&gt;
&lt;input type=&quot;date&quot; name=&quot;date&quot; id=&quot;date&quot; value=&quot;&quot;  /&gt;     
        </code></pre>

        <p>We'd recommend wrapping the label and input in a fieldcontain div for presentation purposes, and these elements should be placed within a <code>form</code> element for C-Grade browser accessibility.</p>

        <p><strong>Note:</strong> This plugin is not included in jQuery Mobile by default, so you'll need to include the following files in order to use it:</p>

<pre><code>
  &lt;link rel=&quot;stylesheet&quot; href=&quot;jquery.ui.datepicker.mobile.css&quot; /&gt; 
  &lt;script src=&quot;jQuery.ui.datepicker.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;jquery.ui.datepicker.mobile.js&quot;&gt;&lt;/script&gt;
</code></pre>

        <p>You'll also want to configure the page plugin to convert "date" input elements to "text" inputs after they're enhanced with our datepicker, so that no native datepicker will conflict with the custom one we're adding. To do this, bind to the "mobileinit" event and set input types of "date" back to text using the page plugin's options:</p>
<pre><code> 
&lt;script&gt;
  //reset type=date inputs to text
  $( document ).bind( &quot;mobileinit&quot;, function(){
    $.mobile.page.prototype.options.degradeInputs.date = true;
  });   
&lt;/script&gt; 
</code></pre>

<p>Be sure to place this event binding in a script that loads after jQuery, but before jQuery Mobile. Check this page's source for an example.</p>





    </div>

</div>



</body>
</html>

谢谢

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

你应该这样做：

$(document).ready(function() { 
  var queryDate = new Date(2009,11,01);
  $('#date').datepicker({defaultDate: queryDate});
});

就是这样。

希望这对干杯有帮助

【讨论】：

我已经尝试过了，它并没有改变任何东西。这让我发疯：o/
这适用于哪个版本的 JQM？，我使用的是 1.4.5，我收到此错误：“Uncaught TypeError: $(...).datepicker is not a function”，我的设置器代码是$('#fechaHastaRegEntrada').datepicker({defaultDate: today});定义是
我也在 jQ 11.1.2 和 jQM 1.4.5 上，它对我不起作用。我不禁想知道 jQ 团队是如何做出如此邪恶的控制的，比如 Date 不是那么必要的信息！？搞笑：/

【解决方案2】：

如果您想同时设置日历日期和输入文本日期，这是我找到的唯一解决方案：

$.datepicker.formatDate('dd/mm/yyyy'); // my data format
var d = new Date(); // today or other date
var curr_date = ("0" + (d.getDate())).slice(-2); // two digits day
var curr_month =("0" + (d.getMonth()+1)).slice(-2); // two digits month
var curr_year = d.getFullYear();
$('#myDatePickerControl').datepicker({defaultDate: d}); // set input text
$('#myDatePickerControl').val(curr_date+'/'+curr_month+'/'+curr_year); // set calendar control

【讨论】：