🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
jQuery

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

Q&A

解決済

1回答

3096閲覧

Air Datepickerでカレンダーと手入力を連動させたい

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

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

0グッド

0クリップ

投稿2021/01/15 05:41

編集2021/01/15 05:55

Javascript、jQueryを勉強中です。
Air Datepickerを使用し、inputに日付を入力できる様にしているのですが、西暦だけて入力するとカレンダーの表示が連動しません。

1.inoutをクリックするとカレンダーが表示される。
2.inputには手入力で日付を入れることもできる。
3.月、日にちはて入力するとカレンダーが連動して入力された月に移動し、入力された日にちが選択状態(背景色と文字色が変化)する。
4.3の状態が西暦だと起こらず、カレンダーが移動しないが入力した日付の選択だけはされている。
(例:inputに2000/01/01が入力されており、カレンダーも同日付が表示されている状態でinputに手入力で2021/01/01を入力するとカレンダー表示は2000年1月だが、2021年1月に移動すると1日が選択状態になっている。)

上記状態を西暦でもカレンダー移動して選択されている年月が表示される様にしたいです。

HTML

1<input id="test" data-name="day">

jQuery

1var textarea = $('#test').val(); 2$('input').data('name').selectDate(moment(textarea).toDate());

datepicker.jsの_renderTypesのあたりでカレンダーの選択日付が変化していた様だったのでselectDateを_renderTypesにしたり_getYearsHtmlにしてみたりしたのですがエラー(Uncaught TypeError)になりできませんでした。

西暦入力時もカレンダー表示連動させるにはどうしたらいいのでしょうか?
お手数ですがどなたかお分かりになる方、ご教授頂けますと助かります。

補足
Air Datepicker
https://github.com/t1m0n/air-datepicker

見ているファイル
datepicker.js

見ている箇所

jQuery

1//447行目〜 2selectDate: function (date) { 3 var _this = this, 4 opts = _this.opts, 5 d = _this.parsedDate, 6 selectedDates = _this.selectedDates, 7 len = selectedDates.length, 8 newDate = ''; 9 10 if (Array.isArray(date)) { 11 date.forEach(function (d) { 12 _this.selectDate(d) 13 }); 14 return; 15} 16 17//1721行目〜 18_renderTypes: { 19 days: function () { 20 var dayNames = this._getDayNamesHtml(this.d.loc.firstDay), 21 days = this._getDaysHtml(this.d.currentDate); 22 23 this.$cells.html(days); 24 this.$names.html(dayNames) 25 }, 26 months: function () { 27 var html = this._getMonthsHtml(this.d.currentDate); 28   this.$cells.html(html) 29 }, 30 years: function () { 31  var html = this._getYearsHtml(this.d.currentDate); 32   this.$cells.html(html) 33 } 34},

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

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

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

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

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

m.ts10806

2021/01/15 05:44

>Air Datepickerを使用し 取得先URLなどご提示ください。 できれば「コピペで他者が再現できる内容」で。
guest

回答1

0

ベストアンサー

datepicker.js483行目でカレンダー表示HTMLを作り直す判定に年も含めるように修正したら解決しました。

投稿2021/01/15 07:37

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問