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

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

ただいまの
回答率

90.34%

  • HTML

    9625questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ruby on Rails

    7718questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • HTML5

    4320questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Ruby on Rails 5

    2193questions

カレンダーを実装しています。viewに表示させるところまでは出来ました。

受付中

回答 1

投稿

flag 質問者が22時間前に「まだ回答を求めています」と言っています。

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

haruka-t

score 95

やりたいこと

ぐるなび風の予約システムを作りたい。
カレンダー

現状

試行錯誤しながらなんとかhtml.erbでカレンダーを作りました。
デザインとか色々ツッコミどころ満載ですがそこはやさしい気持ちを持って見ていただけると幸いです。
![イメージ説明]

<div class="main users-index">
  <h1>Home#top</h1>
  <p>Find me in app/views/home/top.html.erb</p>
<div class="container">


  <div class="box2">
    <p class="sample">日付&nbsp;<input type="text" name="example1"></p>

    <% today = Date.today%>
    <table>
      <caption><%= today.strftime('%Y年%m月')%></caption>
      <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <% month = today.strftime('%m')%>
      <% d = today.at_beginning_of_month.at_beginning_of_week%>
      <% 1.upto(5).each do|i|%>
    <tr>
      <% (d..d.end_of_week).each do|c|%>
      <th>
        <%= (c.strftime('%m') == month)? c.strftime('%d'): "  "%>
        <p></p>
      </th>
      <% end %>
    </tr>
    <% d = d + 1.week %>
    <% end %>
    </table>
    <p class="sample">コース&nbsp;<input type="text" name="example1"></p>
      <form class="sample" method="post">
        <p>時間
        <select name="horoscope">
        <option>10:00</option>
        <option>11:00</option>
        <option>12:00</option>
        <option>13:00</option>
        </select></p>
    </form>
    <p class="sample"><input type="button" value="予約する"</p>
</div>
</div>
</div>

困っていること

困っていることはたくさんあり過ぎてお聞きしたいことはたくさんあるのですが、今一番知りたいこととしては

  • カレンダーの月の切り替えの仕方
  • htmlで表示させているだけなのでぐるなびのカレンダーのように日にちの箇所をクリックをした際に日付の部分にクリックした月日を表示させたい

railsを勉強し始めたばかりで本当に何をどうしたらいいかが分からない状態です。なので、出来ればサンプルコードを交えて少し詳しくご教示していただけると勉強になります。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

詳しい回答じゃないのですが、javascriptを勉強すれば困っていることを解消できると思いますよ。
そもそも日付選択するやつを自分で作らなくてもDatePickerというものもあるので、検索してみるといいかもしれません。
時間の都合上詳しいサンプルコードを交えてはできないのですが、参考になれば嬉しいです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/12/18 18:38

    ライブラリーやbootstrapでdatepicekrがあるのは知っているのですが(実際にも試しました)、いろんな機能に対応するためかコード量が多くどこをカスタマイズすればいいかが分からないため、自分で理解しながら実装していくのが時間効率がいいかと思い自作で考えています。
    また、ライブラリーでもjavascriptが多く使われてカレンダーが作られているのでjavascriptを使うのがセオリーなのかなと思うのでjavascriptを使っていくつもりなのですが、なんせイメージに対する要件定義ができずにいます。
    なので、食べログのようなカレンダーの作り方の一連の流れだけご教示願えないでしょうか?

    キャンセル

  • 2018/12/18 19:48

    jsを使うと、クリックした部分の文字列を取得したり、どこかの部分の文字列を他のものに変えたりってことができるようになります。

    ある日付をクリックして、その日付を上にあるinputに表示させたい時は、クリックした場所の値(1とか2)を取得して、日付のinputにそれを挿入したらいいです。

    こんな感じですね
    https://cpoint-lab.co.jp/article/201803/%E3%80%90javascript%E3%80%91%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E7%AD%89%E3%81%A7%E5%8F%96%E5%BE%97%E3%81%97%E3%81%9F%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF/

    キャンセル

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

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

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

  • HTML

    9625questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ruby on Rails

    7718questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • HTML5

    4320questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Ruby on Rails 5

    2193questions