如何在jquery移动日期框控件中设置特定日期，在日期选择器中突出显示它

发布于 2024-11-03 03:23:53 字数 3074 浏览 1 评论 0原文

我正在使用 jquery.mobile-1.0a4.1 版本创建一个应用程序。我有一个页面，其中包含输入表单以获取详细信息。它有日期字段，因此我使用了 jquery.mobile.datebox 。请参阅 http://dev.jtsage.com/ 查看其演示。我遇到一个问题，当我在 page-load 上为日期字段设置特定日期值时，该值显示在文本框中。但是，当用户单击日期选择器图标时，日历仍然突出显示今天的日期并仅显示当前月份。

如果有人使用了相同的控件，那么请帮助了解如何实现，如果文本框中有任何日期值，那么当您启动日期选择器时，它应该从该日期开始。例如。这里我设置三月的日期，然后，当用户单击日期选择器时，应该显示三月的日历。

这是我的代码文件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
        <title>Detailed information</title>
        <link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
        <link rel="stylesheet" href="jquery.mobile-1.0a4.1.css" />
        <link type="text/css" href="jquery.mobile.datebox.css" rel="stylesheet" />
        <script type="text/javascript" src="jquery-1.5.min.js"></script>
        <script type="text/javascript">
        $( document ).bind( "mobileinit", function(){
            $.mobile.page.prototype.options.degradeInputs.date = 'text';            

        }); 
        </script>       
        <script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
        <script type="text/javascript" src="jquery.mobile.datebox.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
            //Setting start date value on pageload 
            $('#startdate').val('2011-03-20');
        </script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header" data-position="inline">
                <a href="daily_schedule.html" rel="external" data-icon="arrow-l">back</a>
                <h1>Detailed Information</h1>
            </div>
            <div data-role="content">
                <form action="" method="get" onsubmit="validate();" id="frmdetailedinfo">
                    <div data-role="fieldcontain">
                        <input readonly="true"  name="startdate" type="date" data-role="datebox" id="startdate" data-options='{"mode": "calbox", "useDialogForceFalse": true, "noAnimation": true}'/>
                    </div>
                    <div data-role="fieldcontain">
                        <fieldset class="ui-grid-a">
                            <div class="ui-block-a">
                                <button type="submit" data-theme="a" name="submit" data-icon="check" value="submit-value">
                                    Save
                                </button>
                            </div>
                        </fieldset>
                    </div>
                </form>
            </div>
            <!--content-->
        </div>
        <!--page-->
    </body>
</html>

原文

I am creating one application with jquery.mobile-1.0a4.1 release. I have a page which is having input form to get details. It has date field , so for that I used jquery.mobile.datebox . See http://dev.jtsage.com/ for its demo.
I am facing one issue with it, when I set particular date value for date field on page-load , the value is shown in textbox. But when user click on date-picker icon- the calendar still highlight today's date and show current month only.

If anybody has used the same control then please help about , how to achieve like if there is any date value the text box then when you launch the datepicker, it should start from that date.
For eg. here I am setting date of March month, then ,when user clicks on datepicker , march month calendar should be shown.

Here is my code file.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
        <title>Detailed information</title>
        <link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
        <link rel="stylesheet" href="jquery.mobile-1.0a4.1.css" />
        <link type="text/css" href="jquery.mobile.datebox.css" rel="stylesheet" />
        <script type="text/javascript" src="jquery-1.5.min.js"></script>
        <script type="text/javascript">
        $( document ).bind( "mobileinit", function(){
            $.mobile.page.prototype.options.degradeInputs.date = 'text';            

        }); 
        </script>       
        <script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
        <script type="text/javascript" src="jquery.mobile.datebox.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
            //Setting start date value on pageload 
            $('#startdate').val('2011-03-20');
        </script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header" data-position="inline">
                <a href="daily_schedule.html" rel="external" data-icon="arrow-l">back</a>
                <h1>Detailed Information</h1>
            </div>
            <div data-role="content">
                <form action="" method="get" onsubmit="validate();" id="frmdetailedinfo">
                    <div data-role="fieldcontain">
                        <input readonly="true"  name="startdate" type="date" data-role="datebox" id="startdate" data-options='{"mode": "calbox", "useDialogForceFalse": true, "noAnimation": true}'/>
                    </div>
                    <div data-role="fieldcontain">
                        <fieldset class="ui-grid-a">
                            <div class="ui-block-a">
                                <button type="submit" data-theme="a" name="submit" data-icon="check" value="submit-value">
                                    Save
                                </button>
                            </div>
                        </fieldset>
                    </div>
                </form>
            </div>
            <!--content-->
        </div>
        <!--page-->
    </body>
</html>

分享到QQ

分享到微博

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

发布评论

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

爱给你人给你 2024-11-10 03:23:53

你必须在标签本身中设置它：

<input readonly="true"  
       name="startdate" 
       type="date" 
       data-role="datebox" 
       id="startdate" 
       data-options='{
           "mode": "calbox", 
           "useDialogForceFalse": true, 
           "noAnimation": true
        }'/>

变成这样

    <input readonly="true"  
       name="startdate" 
       type="date" 
       data-role="datebox" 
       id="startdate" 
       data-options='{
           "mode": "calbox", 
           "useDialogForceFalse": true, 
           "noAnimation": true,
           "defaultDate": "1999-03-20" // Add Default Date
        }'/>

You have to set it in the tag itself:

<input readonly="true"  
       name="startdate" 
       type="date" 
       data-role="datebox" 
       id="startdate" 
       data-options='{
           "mode": "calbox", 
           "useDialogForceFalse": true, 
           "noAnimation": true
        }'/>

Becomes this

    <input readonly="true"  
       name="startdate" 
       type="date" 
       data-role="datebox" 
       id="startdate" 
       data-options='{
           "mode": "calbox", 
           "useDialogForceFalse": true, 
           "noAnimation": true,
           "defaultDate": "1999-03-20" // Add Default Date
        }'/>

回复收藏 0 原文

~没有更多了~