LoginSignup
6
3

More than 5 years have passed since last update.

textareaにdatepickerで選択した日付を表示する

Posted at

jQueryのdatepickerをtextareaで使おうとしてうまくいかなかったのでメモ

もともとinputでdatepickerを使っていたんですが、一つの入力ボックスで日付と改行がある文字列を入力したかったのでtextareaに変更しました。しかし、カレンダーはそれ以降顔を出してくれません...
少し調べてみると同じ問題にぶちあったってる方を発見!しかも回答付です。さすがstackoverflowです!
どうやらdatepickerはtextareaをサポートしていないみたいですね...残念です。
http://stackoverflow.com/questions/4117727/why-jquery-datepicker-doesnt-work-on-textarea-but-only-on-input

上記記事を参考にtextareaにではなくinputを経由してdatepickerのカレンダーで選択された日付を取得する。

calendar.html
<textarea id="display">ここにカレンダー日付が出力されるよ!</textarea>
<input id="datepicker" type="hidden">
calendar.js
$(function () {
    $('#datepicker').datepicker({
        dateFormat: "yy/mm/dd",
        showOn: "button", // inputは非表示にしているのでボタンを表示させる
        buttonText: "カレンダー",
        onSelect: function (selected_date) {
            $('#display').val(selected_date);
        }
    });
});

動作確認用にjsfiddleのリンクも載せときます。
http://jsfiddle.net/rukurx/9qyzsh47/

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3