如何設置jQuery Mobile的datebox控制特定日期，突出顯示在日期選擇器

我創造與jquery.mobile-1.0a4.1發佈一個應用程序。我有一個頁面，它具有輸入表單以獲取詳細信息。它有日期字段，所以我使用jquery.mobile.datebox。其演示參見http://dev.jtsage.com/。我正面臨着一個問題，當我在頁面加載時爲日期字段設置特定的日期值時，該值顯示在文本框中。但是當用戶點擊日期選擇器圖標時，日曆仍然會突出顯示當天的日期並僅顯示當前的月份。如何設置jQuery Mobile的datebox控制特定日期，突出顯示在日期選擇器

如果有人使用了相同的控制，請您幫助一下，如何實現一樣，如果有任何日期值的文本框，然後當您啓動的日期選擇器，它應自該日起開始。例如。這裏我設置3月份的日期，然後，當用戶點擊日期選擇器時，應顯示3月份的日曆。

這是我的代碼文件。

<!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>

來源

2011-04-23 lucentmind

你必須將其設置在標籤本身：

<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 
     }'/>

來源

2011-04-23 19:12:32

謝謝你，你的解決方案的工作perfectly.However，它不與Firefox 3.5然而工作，它適用於基於Android的設備-Nexus。所以，它解決了我的問題。 – lucentmind 2011-04-26 05:50:29

嗨我無法讓startDate在iOS，firefox，safari或chrome上工作。我正在使用最新的jQuery Mobile，並在輸入html標記中設置以下選項，data-options =「{'mode'：'calbox'，'defaultDate'：'1999-03-20'，'dateFormat' ：'YYYY-MM-DD'，'headerFormat'：'YYYY-MM-DD'}「任何幫助將不勝感激。謝謝加里 – Gary 2011-06-20 18:16:09

開發人員總是在改進插件，我會檢查：https：//github.com/jtsage/jquery-mobile-datebox和http://dev.jtsage.com/jQM-DateBox/或放他一個電子郵件以及。 – 2011-06-20 18:38:20

如何設置jQuery Mobile的datebox控制特定日期，突出顯示在日期選擇器

回答

相關問題