当前位置： 文江博客话题详情

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

发布于 2024-11-05 20:18:01 字数 4331 浏览 2 评论 0原文

我在尝试在 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>

谢谢

原文

I am having problems trying to set the default date on JQuery Mobile's UI datepicker.

Can someone please help?

Here is the full source code:

<!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>
<label for="date">Date Input:</label>
<input type="date" name="date" id="date" value=""  />     
        </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>
  <link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" /> 
  <script src="jQuery.ui.datepicker.js"></script>
  <script src="jquery.ui.datepicker.mobile.js"></script>
</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> 
<script>
  //reset type=date inputs to text
  $( document ).bind( "mobileinit", function(){
    $.mobile.page.prototype.options.degradeInputs.date = true;
  });   
</script> 
</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>

Thanks

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

堇色安年 2024-11-12 20:18:01

你应该这样做：

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

就是这样。

希望这有帮助干杯

You should do:

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

And that's it.

Hope this helps Cheers

回复 原文
婴鹅 2024-11-12 20:18:01

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

$.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

If you want to set both the calendar date and the input text date this is the only solution that I found:

$.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
回复 原文
~没有更多了~

关于作者

青春有你

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

linfzu01

文章 0 评论 0

§对你不离不弃

文章 0 评论 0

可遇━不可求

文章 0 评论 0

枕梦

文章 0 评论 0

qq_3LFa8Q

文章 0 评论 0

JP

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文