質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
iPad

iPadは、Appleがデザインしたタブレット型コンピュータです。iPadアプリケーションは通常Xcode IDEのObjective-Cで書かれますが、iPadアプリケーションを組むためのほかのツールを使うことも可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

3713閲覧

日付をカレンダーから選択したい(iPad OS14.2)

lucky-ponta

総合スコア74

iPad

iPadは、Appleがデザインしたタブレット型コンピュータです。iPadアプリケーションは通常Xcode IDEのObjective-Cで書かれますが、iPadアプリケーションを組むためのほかのツールを使うことも可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2020/11/13 02:20

日付を入力するとき、ドラムロールの代わりに、テキストボックスで手入力するのではなく、
カレンダー等からの選択入力したいと思っていますが、実現できず、困っています。

発生している問題・エラーメッセージ

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でも、これまでと操作性が変わらないようにしたいので、ご教授ください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決です。JSが不足していました。

<script src="保存先/jquery.ui/ui/widgets/datepicker.js"></script>

これで合っているのかどうかは別として、期待通りの結果となりましたので、
解決とします。

お騒がせしました。


【追記です(2020/11/26)】
その後、Cordova10のサポートが開始されたとのお知らせを受け、
Monacaのバージョンを全てアップしてアプリの動作確認をしておりますが、
日付はドラムロールでの選択になっておりましたので、併せて報告します。
(IOS他をアップする前の日付と同じUI)
結局のところ、動作確認中のアプリについては、
カレンダー選択ではなく、これまで通りにすることになりました。

投稿2020/11/13 04:23

編集2020/11/26 00:10
lucky-ponta

総合スコア74

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問