詳しい人求む！

jQueryのdatepickerの日付が選択できないバグについて

解決済

質問者：sa--0502
質問日時：2017/01/18 10:16
回答数：3件

こんにちは。

jQuery初心者です。datepickerをスマホページに設置しているのですが、カレンダーボタンをクリックするとカレンダー自体は表示されるのですが、日付を選択することができません。
（日付をタップしても何も起こりません）
ただＰＣで同じスマホページを確認してみると、問題なく日付を選択することができます。
なぜスマホで見たときだけこのような現象が起こるのか全く分からず、困っています・・。

これだけの情報で大変恐縮なのですが、もし心当たりのある方がいらっしゃれば教えて頂けると本当に助かります。

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.3ベストアンサー

回答者： fujillin
回答日時：2017/01/18 16:40

こんにちは

スマホに関してはさっぱりなので、ほとんどが推測になりますが・・・

PCとスマホではイベントが異なるために反応していない可能性があります。
また、iOSとandroidでも挙動が異なる部分があるようです。（少し古い情報ですが）
http://masawada.hatenablog.jp/entry/2015/05/13/2 …

そんなことも併せて考えると、jQueryMobileに対応したライブラリを用いる方がOSやブラウザの差を吸収しやすいのではないかと想像します。
ちなみに、ANo1様がご提示のjQueryサイトのデモは、androidでは動作しますね。（iphoneは手元にないので不明です）

簡単に検索してみたら、datepickerに近いものでjQueryMobile対応のこんなのもあるようです。
まず、動作するかを見てみるのが宜しいかと。
http://d.hatena.ne.jp/Kimura/20120728/p1

- 0
- 件

通報する

この回答へのお礼

お礼が遅くなり申し訳ありません。
丁寧なご回答、誠にありがとうございます。
androidを持っていないため、ご確認頂いたのが本当にありがたいです！

ご提案いただいたjQueryMobileを一度試してみようかと思います。
ありがとうございました。

通報する

お礼日時：2017/01/20 21:05

No.2

回答者： naktak
回答日時：2017/01/18 13:38

Chromeでは、下記で動作しましたが。

<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com//ui/1.12.1/themes/base/j …
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></s …
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min. …
<script>
$(function() {
$(".datepicker").datepicker({
dateFormat : "yy/mm/dd"
,showOn: "button"
,buttonImage:"Calendar.png"
,buttonImageOnly: true
,beforeShow : function(input,inst){
var year = $(this).parent().find(".year1").val();
var month = $(this).parent().find(".month1").val();
var date = $(this).parent().find(".day1").val();
$(this).datepicker("setDate" , year + "/" + month + "/" + date)
},
onSelect: function(dateText, inst){
var dates = dateText.split('/');
$(this).parent().find(".year1").val(dates[0]);
$(this).parent().find(".month1").val(dates[1]);
$(this).parent().find(".day1").val(dates[2]);
}
});
});
</script>
</head>
<body>
<input name="year1" value="" class="year1" /> 年
<input name="month1" value="" class="month1" /> 月
<input name="day1" value="" class="day1" />日
<input type="hidden" value="" class="datepicker" />
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご確認いただきありがとうございます。
chromeとはＰＣでしょうか？スマホでしょうか？
私の方でも、ＰＣのchromeでは動作することは確認できているのですが、
iphoneで閲覧した時に、動作しないのです・・。
確認のためiphoneのchromeで見たらやはり動作しませんでした。

通報する

お礼日時：2017/01/18 14:17

No.1

回答者： naktak
回答日時：2017/01/18 10:54

・対象となっているhtmlソースはどのようになっていますか？

　また、そのhtmlソースを、datepickerを構成するだけの
　簡素なソースで動作させても同様の現象が発生しますか？

・datepickerとは、どのライブラリですか？jQuery UI Datepicker？
　だとしたら下記ページに記されているview sourceのコードから
　求める実装を行っても動作しませんか？
　https://jqueryui.com/datepicker/

・ブラウザのjs実行結果でエラーが発生してませんか？

・動作させているブラウザの種類とバージョンは？

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！

・簡素なソースでは試していなかったです。日付のフォーマットを特殊な形にしなければいけないため下記のような記述にしています。
・ライブラリはjQuery UI Datepickerです。
・PCはchromeで確認していますがエラーは発生していないです。
・ブラウザはiOSのsafariですが、すみませんバージョンがわからないです。

<input name="year1" value="" class="year1" /> 年
<input name="month1" value="" class="month1" /> 月
<input name="day1" value="" class="day1" />日
<input type="text" value="" class="datepicker" style="display:none;" />

【script】
$( ".datepicker" ).datepicker({
dateFormat : "yy/mm/dd"
,buttonImage:"Calendar.png"
,beforeShow : function(input,inst){
var year = $(this).parent().find(".year1").val();
var month = $(this).parent().find(".month1").val();
var date = $(this).parent().find(".day1").val();
$(this).datepicker( "setDate" , year + "/" + month + "/" + date)
},
onSelect: function(dateText, inst){
var dates = dateText.split('/');
$(this).parent().find(".year1").val(dates[0]);
$(this).parent().find(".month1").val(dates[1]);
$(this).parent().find(".day1").val(dates[2]);
}
});