jQuery Mobile日付ピッカー
JQuery mobileに適した日付ピッカーを持っている人はいますか？
ユーザーに「開始」日付と「終了」日付を選択させますが、この状況に適したものは見つかりませんでした。
何か案は？
私はDateboxをお勧めします
https://github.com/jtsage/jquery-mobile-datebox
またはMobiscroll
Androidフレーバーで何かが必要な場合は、独自のMobi Pickを試してください
Mobiscroll 、タッチデバイス用に最適化されたカスタマイズ可能な日付ピッカーをお試しください
これがモバイル専用の日付ピッカーです
http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/
Jq1.9.1 jqui 1.10.2およびjqm 1.3.0のために、jquery ui datepickerをjquery、jqueryuiおよびjquery mobileの最新バージョンに更新する作業をしました。あなたがそれがどのように進化したかを見ることができるように、私は以前の答えであるように去ることを好みました。
changeMonthとchangeYearのドロップダウンには、特別な注意が必要でした（不快なことが頻繁にありました）
ここで、jqmobileの実験的なjqueryui datepickerの更新方法を示します。
Jqueryuiパッケージ全体ではなく、datepickerスクリプトにリンクできます。
読み取り専用の小道具は、キーボードがiOSに表示されないようにします
Jqmで動作するようにするのは、datepickerを微調整しただけです。目的は、datepickerウィジェットの_generatehtml関数をオーバーライドし、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.
Jquery mobile 1.4.0の変更を考慮しており、dom操作の必要性が少し少ない
これは、jquerymobile framweworkにjqueryui datepickerを統合する方法に関連する別の投稿への私の答えのコピーです..それが存在する場合に役立ちましたように、それが役立つことを願っています:)
特にdateboxとjqueryui datepickerを比較してインターネットで多くの検索を行った後（カレンダービューを探しているのでmobiscrollとmobipickは私には良くありませんが、いくつかの理由でui datepickerを使用することになりました：
- 私は長年使っています
- 私はbeforeShowDay（日付ボックスとイベント/コールバックを使用して同様の機能を持つことが確かに可能ならイベント）クラスで日をカスタマイズする必要がありました
- 月と年を変更する可能性のあるヘッダーが必要でした（日付ボックスでも可能）
- この実験では、jquerymobileの感触と外観を持つデートピッカーが既にありました
私はそれを使った：
- jquery 1.8.3
- jquery mobile 1.2.0
- jqueryui datepicker 1.8.21（ ここから取得 ）
datepickerをより新しいバージョンで使用すると、月/年の変更時にレイアウトが崩れます。
here から、必要なファイルを取得しました。私はさまざまなstackoverflowの質問で見つけたいくつかの答えを使用して、次の変更を行いました：
- 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);
クリックイベントの代わりにon（）を使用し、月/年選択メニューのクリック時にDefaultを防ぎます。
そして、私はそれをこのように使用します：
$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 datepickerマニュアルを参照）。
このように機能し、日付入力がフォーカスされたときにカレンダーを表示するだけのイベントを追加する必要があります。
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に感謝
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>`
注意： DateFormatには5つのオプションがあります：
1.mm/dd/yy
2.yy-mm-dd
3.d M、y
4.d MM、y
5.DD、d MM、yy
6.「日」d「of」MM「in the year」yy
この時点で、jquery mobile 1.4.5には1つ（プラグイン付き）があります： http://demos.jquerymobile.com/1.4.5/datepicker/