日付を入力するとき、ドラムロールの代わりに、テキストボックスで手入力するのではなく、
カレンダー等からの選択入力したいと思っていますが、実現できず、困っています。
発生している問題・エラーメッセージ
iPadのOSを誤ってバージョンアップしてしまいました。
動作環境
・iPad mini 5 ←既存
・OS 14.2 ←これを13.6からバージョンアップしてしまいました
・Cordova 9.0 ←既存
バージョンアップ前のOSに戻す前に、
Monacaで作成した既存のアプリの動作検証を行っているのですが、
日付の入力項目がドラムロールから、テキストボックスに変わっていることが分かりました。
(14から、日付のUIが変わったとの記述を見つけました)
html
1<!-- 画面ソース --> 2<input type="date" id="hiduke" value="">
元々、上記のように定義して、ドラムロールで選択して入力する形をとっていました。
これがアプリでは、見た目、テキストボックスになりました。
表示時の初期値は、本日日付を設定しています。
例えば、今日が2020年11月13日とすると、
テキストボックスに「2020-11-13」と表示されます。
ただ、バージョンアップしてからは、「2020-11-13」は表示されるものの、
タップしても、当然ドラムロールは表示されないし、
ブラウザで確認した場合に表示されるようなカレンダーも表示されません。
よって、このままの定義では、別日は「2019-11-20」など手入力することになりそうです。
もしくは、年・月・日それぞれのリストボックスを作りこみ、選択する形になるかと。
※操作性が悪くなるので、これは避けたいと思います。
試したこと
Datepickerを使うことを検討したのですが、DatePickerプラグインは、
「Cordova 9.0 以降では廃止」とあがっていて、プラグインとしては使用できなそう。
だったら、Webページとして実績がある、
「JavaScript(jQuery)」と「DatePicker」を採用!と思い、
検索して出てくる使い方から設定方法、日本語化までたくさんの技術がありましたので、
それぞれのページ記載のやり方で、試してみたりしたのですが、
どれを採用しても、テキストボックスのまま、日付が選択できるもの(カレンダーなど)は表示されません。
以下の方法で、それぞれ試しました。
①JSとCSSを、リンク先から読み込むパターンでの設定(<script src="//ajax.googleapis・・・など)
②Monacaで、JS/CSSコンポーネントの追加から、jQuery、jquery-ui.min.js などを読み込むパターンでの設定
③JSとCSSを、それぞれダウンロード&保存して、Monacaにそれぞれ保存しなおして読み込むパターンでの設定
CSS
1<link href="保存先/jquery-ui.css" rel="stylesheet" type="text/css"> 2<link href="保存先/jquery-ui.structure.css" rel="stylesheet" type="text/css"> 3<link href="保存先/jquery-ui.theme.css" rel="stylesheet" type="text/css">
JavaScript
1<script type="text/javascript" src="保存先/jquery-1-7.js"></script> 2<script type="text/javascript" src="保存先/jquery-ui.js"></script> 3<script type="text/javascript" src="保存先/datepicker-ja.js"></script> 4<script> 5$(function(){ 6 $("#hiduke").datepicker(); 7}); 8</script>
HTML
1<input type="text" class="datepicker" name="hiduke" id="hiduke" value="" placeholder="クリックして入力"></input>
大まかには、どのパターンであっても、ほぼ上記のような記述になりますが、
どれも試しても、期待する動きにはならず、テキストボックスのままでした。
最新OSでも、これまでと操作性が変わらないようにしたいので、ご教授ください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。