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

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

ただいまの
回答率

90.51%

  • JavaScript

    16486questions

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

  • jQuery

    6726questions

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

flatpicker.jsで選択した日付から前後の日付を取得したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 198

M.Takeshita

score 3

flatpicker.jsという日付け選択ライブラリを利用して、日付を取得し、その日付から1週間をリストにしたいと考えています。

flatpicker.js 日本語

 やりたいこと

  1. カレンダーで選択した日付から1週間をliに入れたい
  2. できたら曜日表示を英語から日本語にしたい
  3. 回答いただいた1週間の日付表示と併用できないかと企んでいました(現状できてません)
    今日質問した内容:jsで1週間分の日付と曜日を表示したい

 HTML

<div class="dateSlide" data-wrap="true" data-clickOpens="false">
<a class="input-button" title="toggle" data-toggle>
<p><img src="img/calendar.png" alt=""></p>
</a>
<ul class="dateList">
        <li><input class="datePick" type="text" data-altinput=true data-input></li>
        <li>00</li>
        <li>00</li>
        <li>00</li>
        <li>00</li>
        <li>00</li>
        <li>00</li>
    </ul>
</div>

 JS

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
const config = {
defaultDate: 'today',
dateFormat: 'm月d日(D)',
}
flatpickr('.dateSlide', config);
</script>

「根本的に間違ってる」というご意見でも結構です。助言いただけると大変ありがたいです。よろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

<script src="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/l10n/ja.min.js"></script>
flatpickr.localize(flatpickr.l10ns.ja);
const config = {
    defaultDate: 'today',
    dateFormat: 'm月d日(D)',
    onChange: function(selectedDates, dateStr, instance) {
        let selectedDate = selectedDates[0];

        // 一週間表示(略)。
    }
};
flatpickr('.datePick', config);


参考にしたドキュメントに書いてあるようですよ……
https://tr.you84815.space/flatpickr/eventsAndHooks.html#onchange

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/12 17:30

    ご指摘ありがとうございます!
    onChangeのところは昨日から試しているのですが、1週間の表示との組み合わせができていません。

    const config = {
    defaultDate: 'today',
    dateFormat: 'm月d日(D)',

    onChange: function(selectedDates, dateStr, instance) {
    let selectedDate = selectedDates[0];

    var now = new Date();
    var wd = ['日', '月', '火', '水', '木', '金', '土'];

    $('.dateSlideList .children').text(function(){ // liに.childrenをつけました
    var m=now.getMonth()+1;
    var d=now.getDate();
    var w=wd[now.getDay()];
    now.setDate(now.getDate()+1);
    return m+"月"+d+"日"+"("+w+")";
    });
    }
    };
    flatpickr('.dateSlide', config);

    ち、、違うのかな。。

    キャンセル

  • 2018/07/12 17:38

    なぜnowが出てくるのでしょう?
    選択した日付(selectedDate)を使うのでは?

    キャンセル

  • 2018/07/12 17:56

    あ!前に質問していただいたものママ入れておりました。。

    こうですね!
    const config = {
    defaultDate: 'today',
    dateFormat: 'm月d日(D)',

    onChange: function(selectedDates, dateStr, instance) {
    let selectedDate = selectedDates[0];
    var wd = ['日', '月', '火', '水', '木', '金', '土'];

    $('.dateSlideList .children').text(function(){
    var m=selectedDate.getMonth()+1;
    var d=selectedDate.getDate();
    var w=wd[selectedDate.getDay()];
    selectedDate.setDate(selectedDate.getDate()+1);
    return m+"月"+d+"日"+"("+w+")";
    });
    }
    };
    flatpickr('.dateSlide', config);

    なぜか日付が合わないですが、だいぶやりたい事に近づいてきました!本当にありがとうございます!

    キャンセル

  • 2018/07/12 18:11

    よくわかりませんが、こんなHTML断片があるんでしょうか?
    <ul class="dateSlideList">
    <li class="children"></li>
    <li class="children"></li>
    <li class="children"></li>
    <li class="children"></li>
    <li class="children"></li>
    <li class="children"></li>
    <li class="children"></li>
    </ul>

    キャンセル

  • 2018/07/12 18:15

    はい!その通りでございます!
    <ul class="dateSlideList">
    <li class="children"><input class="datePick" type="text" data-altinput=true data-input></li>
    <li class="children"></li>
    <li class="children"></li>
    <li class="children"></li>
    <li class="children"></li>
    <li class="children"></li>
    <li class="children"></li>
    </ul>
    flatpickrのinputが最初のliに入っています!

    キャンセル

  • 2018/07/12 18:16

    入力部分と出力部分は分けたほうがいいのでは?
    出力処理によって消されてしまいますよ

    キャンセル

  • 2018/07/12 18:25

    ほ、本当はそうしたいのですが、inputの置き場所に困っておりまして。。

    画面上で必要な情報は、.childrenだけなのですが、カレンダーで日付を選択したいのでflatpickrを使おうとしたら、inputが必須になるようだったので現状のようになっております。。

    キャンセル

  • 2018/07/12 18:28

    とにかく、inputが必要だとしても別のところに置くべきで、今はもう最悪のところを選んだとしか……
    ドキュメントを精査したわけではないのでわかりませんが、リストのクリックでカレンダーを呼べるかもしれませんし

    キャンセル

  • 2018/07/12 18:45

    おうう。。
    ....ちょっと考えてみます!(できるかは謎)迅速なご回答ありがとうございます!

    キャンセル

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

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16486questions

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

  • jQuery

    6726questions

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