jQuery Mobile日期選擇器

Question

有沒有人有一個很好的jQuery手機日期選擇器？

我打算讓用戶選擇一個「from」日期和一個「to」日期，但我沒有發現任何對這種情況有好處的東西。

任何想法？

Answer 1

下面是日期選擇器專爲移動

http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

Answer 2

我建議Datebox

https://github.com/jtsage/jquery-mobile-datebox

或Mobiscroll

http://mobiscroll.com/

如果你想在Android味道的東西，盡我自己的摩比選

http://mobipick.sustainablepace.net/

Answer 3

嘗試Mobiscroll，可定製的日期選擇器的觸摸屏設備優化

Answer 4

這裏是我的回答的一個副本在這裏另一職務，涉及到如何整合jquerymobile framwework..hope有幫助，就像如果有人有很多在互聯網上搜索後，現有的:)

，尤其是比較datebox和jQueryUI的日期選擇器（mobiscroll和mobipick它會幫助我jQueryUI的日期選擇器對我不好因爲我'找一個日曆視圖中，我得到的地方，我決定使用UI日期選擇器的幾個原因點：

• 我用它從長期的，我知道這不夠好
• 我需要beforeShowDay （事件，如果它肯定可能有類似的功能使用日期框和事件/回調）來定製日期與類
• 我需要一個頭可能會改變月份和年份（也可能在日期框中）
• 與此實驗我已經有jquerymobile感覺的日期選擇器&外觀

我用它：

• jquery的使用日期選擇器與更近1.8.3
• jquery的移動1.2.0
• jQueryUI的日期選擇器21年8月1日（get it from here）

版本打破月份/年份變化的佈局。

從here，我得到了我需要的文件。我使用了幾個在不同的計算器問題上找到的答案，以進行以下更改：

• jquery.ui.datepicker.mobile沒有變化。CSS

• jquery.ui.datepicker.mobile.js新代碼：

  (function ($, undefined) { 
  
  //cache previous datepicker ui method 
  var prevDp = $.fn.datepicker; 
  
  //rewrite datepicker 
  $.fn.datepicker = function (options) { 
  
  var dp = this; 
  
  //call cached datepicker plugin 
  var retValue = prevDp.apply(this, arguments); 
  
  //extend with some dom manipulation to update the markup for jQM 
  //call immediately 
  function updateDatepicker() { 
      $(".ui-datepicker-header", dp).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all"); 
      $(".ui-datepicker-prev, .ui-datepicker-next", dp).attr("href", "#"); 
      $(".ui-datepicker-prev", dp).buttonMarkup({ iconpos: "notext", icon: "arrow-l", shadow: true, corners: true }); 
      $(".ui-datepicker-next", dp).buttonMarkup({ iconpos: "notext", icon: "arrow-r", shadow: true, corners: true }); 
      $(".ui-datepicker-calendar th", dp).addClass("ui-bar-c"); 
      $(".ui-datepicker-calendar td", dp).addClass("ui-body-c"); 
      $(".ui-datepicker-calendar a", dp).buttonMarkup({ corners: false, shadow: false }); 
      $(".ui-datepicker-calendar a.ui-state-active", dp).addClass("ui-btn-active"); // selected date 
      $(".ui-datepicker-calendar a.ui-state-highlight", dp).addClass("ui-btn-up-e"); // today"s date 
      $(".ui-datepicker-calendar .ui-btn", dp).each(function() { 
       var el = $(this); 
       // remove extra button markup - necessary for date value to be interpreted correctly 
       // only do this if needed, sometimes clicks are received that don't require update 
       // e.g. clicking in the datepicker region but not on a button. 
       // e.g. clicking on a disabled date (from next month) 
       var uiBtnText = el.find(".ui-btn-text"); 
       if (uiBtnText.length) 
        el.html(uiBtnText.text()); 
      }); 
  }; 
  
  //update after each operation 
  updateDatepicker(); 
  
      $(dp).on("click change", function(event, ui) 
  { 
  $target=$(event.target); 
  if(event.type=="click" && ($target.hasClass("ui-datepicker-month") || $target.hasClass("ui-datepicker-year")))   
      event.preventDefault(); 
  else 
      updateDatepicker(event); 
  }); 
  
  //return jqm obj 
  if (retValue) { 
      if (!retValue.jquery) return retValue; 
  } 
  return this; 
  }; 
  
  })(jQuery); 
  

我用（）而不是點擊事件和我的preventDefault上單擊月/年選擇菜單上。

我用這種方式：

$form 
    .trigger("create") 
    .find("input[type='date'], input:jqmData(type='date')") 
    .each(function() 
     { 
     $(this) 
      .after($("<div />").datepicker(
       { 
       altField   : "#" + $(this).attr("id"), 
       altFormat   : "dd/mm/yy", 
       showOtherMonths  : true, 
       selectOtherMonths   : true, 
       showWeek   : true, 
       changeYear   : true, 
       changeMonth   : true, 
       beforeShowDay  : beforeShowDay 
       })); 
     }); 

與beforeShowDay爲返回一個數組的函數（參見jQueryUI的日期選擇器手冊）。

它適用於我這種方式，現在我只需要添加事件，只有在日期輸入獲得焦點時才顯示日曆。

A link to jsbin example

Answer 5

我曾在更新jQuery UI的日期選擇器到最新版本的jQuery，jQueryUI的和jQuery移動的所以jq1.9.1 jqui 1.10.2和JQM 1.3.0。我最好像以前的答案一樣離開，以便了解它是如何演變的。

的changeMonth和changeYear下拉需要特別護理的工作（unstylying是頻繁）

這是我更新的jqmobile實驗jQueryUI的日期選擇器：

js bin code snippet

您可以鏈接到datepicker腳本，而不是整個jqueryui包。

的只讀道具防止鍵盤出現在iOS

這只是一個日期選擇器的的調整，使其在JQM工作，目標是要能夠覆蓋日期選擇控件的_generatehtml功能並且通過能夠給予投入te jquery手機主題使用。所以你不需要那麼多的addClass，並且避免不必要的DOM操作。我只測試了ios 6（iphone，ipad）和桌面（chrome，firefox，safari），讓我們知道其他測試。

希望它可以幫助如玉米粥需要它:)

這裏是HTML分離的所有代碼，js和css：

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Jqueryui 1.10.2 datepicker Integration in jquery mobile 1.3.0 and jquery 1.9.1 by aureltime</title> 
    <link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.css"> 
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script> 
    <script src="//ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
     <h1>jQuery UI's Datepicker Styled for mobile adapted by Aureltime</h1>  
    </div> 
    <div data-role="content"> 
     <form action="#" method="get" id="form"> 
      <div data-role="fieldcontain"> 
       <label for="date">Date:</label> 
       <input type="date" name="date" id="date" value="" /> 
      </div>  
     </form> 
    </div> 
</div> 
</body> 
</html> 

JS

//reset type=date inputs to text 
$.mobile.page.prototype.options.degradeInputs.date = true; 

$("#form").trigger("create"); 
$(document) 
    .on("pageinit", function(){ 

$("#date") 
    .prop("readonly", "true") 
    .on("click", function(){ 
$input=$(this); 
$next=$input.next(); 

if($next.hasClass("hasDatepicker")) 
    $next.hide(); 

$input 
     .hide() 
     .after($("<div />", { id : "datepicker_"+$input.attr("id")}).datepicker(
     { 
      altField   : "#" + $input.attr("id"), 
      altFormat   : "dd/mm/yy", 
      defaultDate  : $input.val(), 
      showOtherMonths : true, 
      selectOtherMonths : true, 
      //showWeek  : true, 
      changeYear  : true, 
      changeMonth  : true, 
      //showButtonPanel : true, 
      //beforeShowDay : beforeShowDay, 
      onSelect   : function(dateText, inst) 
      {    $("#datepicker_"+$input.attr("id")).hide(); 
$input.show(); 
      } 
     })); 
    }); 
     }); 


(function($, undefined) { 

    //cache previous datepicker ui method 
    var prevDp = $.fn.datepicker; 

    //rewrite datepicker 
    $.fn.datepicker = function(options){ 

     var dp = this; 

     //call cached datepicker plugin 
     prevDp.call(this, options); 

     //extend with some dom manipulation to update the markup for jQM 
     //call immediately 
     function updateDatepicker(event){ 

      $(".ui-datepicker-header", dp).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all"); 
      $(".ui-datepicker-prev, .ui-datepicker-next", dp).attr("href", "#"); 
      $(".ui-datepicker-prev", dp).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true}); 
      $(".ui-datepicker-next", dp).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true}); 
      $(".ui-datepicker-calendar th", dp).addClass("ui-bar-c"); 
      $(".ui-datepicker-calendar td", dp).addClass("ui-body-c"); 
      $(".ui-datepicker-calendar a", dp).buttonMarkup({corners: false, shadow: false}); 
      $(".ui-datepicker-calendar a.ui-state-active", dp).addClass("ui-btn-active"); // selected date 
      $(".ui-datepicker-calendar a.ui-state-highlight", dp).addClass("ui-btn-up-e"); // today"s date 

      if(typeof event != "undefined") 
       { 
       var classe= $(event.target).attr("class"); 
       //alert(classe); 
       } 
      $(".ui-datepicker-calendar .ui-btn", dp).each(function(){ 
        var el = $(this); 
        var buttonText = el.find(".ui-btn-text"); 
        // remove extra button markup - necessary for date value to be interpreted correctly 
        if(buttonText.length) 
         el.html(el.find(".ui-btn-text").text()); 
        }); 
     //  } 

     $(dp) 
      .off() 
      .on("click", updateDatepicker) 
      .find("select") 
      .on("change", function(event){updateDatepicker(event);}); 
     } 

     //update now 
     updateDatepicker(); 

     //return jqm obj 
     return this; 
    }; 
})(jQuery); 

CSS

div.hasDatepicker{ display: block; padding: 0; overflow: visible; margin: 8px 0; } 
.ui-datepicker { overflow: visible; margin: 0; max-width: 500px; } 
.ui-datepicker .ui-datepicker-header { position:relative; padding:.4em 0; border-bottom: 0; font-weight: bold; } 
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { padding: 1px 0 1px 2px; position:absolute; top: .5em; margin-top: 0; text-indent: -9999px; } 

.ui-datepicker .ui-datepicker-prev { left:6px; } 
.ui-datepicker .ui-datepicker-next { right:6px; } 
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } 
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; } 
.ui-datepicker select.ui-datepicker-month-year {width: 100%;} 
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;} 
.ui-datepicker table {width: 100%; border-collapse: collapse; margin:0; } 
.ui-datepicker td { border-width: 1px; padding: 0; text-align: center; } 
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em 0; font-weight: bold; margin: 0; border-width: 0; text-align: center; text-decoration: none; } 

.ui-datepicker-calendar th { padding-top: .3em; padding-bottom: .3em; } 
.ui-datepicker-calendar th span, .ui-datepicker-calendar span.ui-state-default { opacity: .3; } 
.ui-datepicker-calendar td a { padding-top: .5em; padding-bottom: .5em; } 

這裏是更新的版本與JQM 1.4的工作：jsbin jqm 1.4.0

它正在jQuery Mobile的1.4的變化的帳戶。0，需要DOM操作

Answer 6

少一點點這個時候，你可能知道，jQuery Mobile的1.4.5有一個（與插件）： http://demos.jquerymobile.com/1.4.5/datepicker/

Answer 7

嘗試Mobiscroll插件。它是一個很棒的插件。我的經驗非常好。我有一個關於設置「開始日期」和「結束日期」的實例。您可以在jsFiddle

Here is source code for start and end date example 
HTML: 
<!DOCTYPE html> 
<html> 
<head> 
<title>jQM Complex Demo</title> 
<meta name="viewport" content="width=device-width; initial-scale=1.0;  maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
<link rel="stylesheet" href="http://example.gajotres.net/iscrollview/mobiscroll-2.4.custom.min.css" />  
<link rel="stylesheet" href="http://www.fajrunt.org/mobiscroll.custom-2.5.1.min.css"/>  
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
<script src="http://example.gajotres.net/iscrollview/mobiscroll-2.4.custom.min.js"></script>   
</head> 
<body> 
<div data-role="page" id="index"> 
    <div data-role="content"> 
     <input name="demo" id="demo" class="i-txt" /> 
    </div> 

    <div data-role="content"> 
     <input name="demo2" id="demo2" class="i-txt" /> 
    </div> 
</div>  
</body> 
</html> 

Javascript & Jquery: 
$(document).on('pagebeforeshow', '#index', function(){  
$('#demo').mobiscroll().date({ 
    //invalid: { daysOfWeek: [0, 6]}, 
    theme: 'android-ics', 
    display: 'inline', 
    mode: 'scroller', 
    dateOrder: 'mm dd yy', 
    dateFormat : "mm-dd-yy", 
    minDate: new Date(2015,03,16), 
    maxDate: new Date(2015,11,03), 


}); 

$('#demo2').mobiscroll().date({ 
    // invalid: { daysOfWeek: [0, 6]}, 
    theme: 'android-ics', 
    display: 'inline', 
    mode: 'scroller', 
    dateOrder: 'mm dd yy', 
    dateFormat : "mm-dd-yy", 
    minDate: new Date(2015,3,21), 
    maxDate: new Date(2015,11,3) 

}); 
$("#demo").change(function(){ 
getNextdate(); 
    }); 
$("#demo2").change(function(){ 
getPdate(); 
    }); 
}); 



function getNextdate() { 
var tt = document.getElementById('demo').value; 

var date = new Date(tt); 
var newdate = new Date(date); 

newdate.setDate(newdate.getDate()+5); 

var dd = newdate.getDate(); 
if(dd<10) {dd='0'+dd} 
var mm = newdate.getMonth()+1; 
if(mm<10) {mm='0'+mm} 
var y = newdate.getFullYear(); 

var someFormattedDate = mm + '-' + dd + '-' + y; 
document.getElementById('demo2').value = someFormattedDate; 
} 

function getPdate() { 
var tt = document.getElementById('demo2').value; 

var date = new Date(tt); 
var newdate = new Date(date); 

newdate.setDate(newdate.getDate()-5); 

var dd = newdate.getDate(); 
if(dd<10) {dd='0'+dd} 
var mm = newdate.getMonth()+1; 
if(mm<10) {mm='0'+mm} 
var y = newdate.getFullYear(); 

var someFormattedDate = mm + '-' + dd + '-' + y; 
document.getElementById('demo').value = someFormattedDate; 
} 

由於Gajotres檢查這個例子中，用於提供初始幫助

Answer 8

這裏是Juery文件的完整代碼：

<!doctype html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Datepicker - Format date</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script> 
    $(function() { 
      $("#datepicker").datepicker(); 
      $("#format").change(function() { 
      $("#datepicker").datepicker("option", "dateFormat", 'yy-mm-dd'); // I am using the internationl date format, you can choose yours following below six options. 
    }); 
    }); 
    </script> 
    </head> 
    <body> 

    <p>Date: <input type="text" id="datepicker" size="30"></p> 
    <p>Format options:<br> 

    </body> 
    </html>` 

聲明： 日期格式有5個選項：

1.mm/dd/yy

2.yy-MM-DD

3.D M，Y

4.D MM，Y

5.DD，d MM， YY

6.'天在今年' d MM ' '的' ' YY