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

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

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

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

jQuery

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

Q&A

解決済

1回答

943閲覧

bootstrap-datepickerで選択した年月をdjangoのテンプレートの中で変数として使用したい

minimini4Q

総合スコア7

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

jQuery

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

0グッド

0クリップ

投稿2018/04/02 17:15

前提・実現したいこと

当方初学者です。HTML,jsの学習を兼ねてdjangoでシフト表を作成したく思っています。jqueryで選択した年月のシフト表を画面遷移なしに表示したいのですが方法がよくわかりません。datepickerで年月を選択するところまでは行ったのですがそれをテンプレート中の{{selected_month}}にbootstrap-datepickerで取得した月を代入したい場合はどのような処理をすればいいのでしょうか?ajax, formのGET, POST等調べたのですがよくわかりませんでした。
初心者の為コードはコピペが多く質問の要領を得てないかもしれませんがなにか指針を教えていただけますと幸いです。

該当のソースコード

shift/views.py

python

1from django.shortcuts import render 2from django.views.generic import TemplateView 3import calendar 4from datetime import datetime 5class HomeView(TemplateView): 6 template_name = "shift/home.html" 7 8 def get(self,request,*args, **kwargs): 9 context = super(HomeView, self).get_context_data(**kwargs) 10 today = datetime.today() 11 this_year = int(datetime.strftime(today,"%Y")) 12 this_month = int(datetime.strftime(today,"%m")) 13 14 context['staffs'] = staffs 15 context['this_year'] = this_year 16 context['this_month'] = this_month 17 context['this_month_range'] = range(1, calendar.monthrange(this_year, this_month)[1] + 1) 18 19 '''選択した年月を取得してこのようなかたちで年と月と日数がほしいです。 20 dt = datetime.strftime(date, '%Y/%m') 21 selected_year = dt.year 22 selected_month = dt.month 23 context['selected_year'] = selected_year 24 context['selected_month'] = selected_month 25 context['selected_month_range'] = range(1,calendar.monthrange(selected_year, selected_month)[1] + 1) 26 ''' 27 28 return render(self.request, self.template_name, context) 29

template/shift/home.html

html

1 2 <!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="utf-8"> 6 <title>シフト表</title> 7 {% load static %} 8 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 9 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 10 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 11 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 12 <script src="{% static 'shift/js/bootstrap-datepicker.min.js' %}"></script> 13 <script src="{% static 'shift/js/bootstrap-datepicker.ja.min.js' %}"></script> 14 <link href="{% static 'shift/css/bootstrap-datepicker.min.css' %}" rel="stylesheet"> 15 <script> 16 $(function(){ 17 //Default 18 $('#datepicker-default .date').datepicker({ 19 format: "yyyy/mm", 20 language: 'ja', 21 autoclose: true, 22 minViewMode: 'months' 23 }); 24 25 }); 26 </script> 27</head> 28 29<body> 30 {% if not selected_month %} 31 <h1>{{this_month}}月分シフト表</h1> 32 {% else %} 33 <h1>{{selected_month}}月分シフト表</h1> 34 {% endif %} 35 36 <form method="GET" id="form-date"> 37 <div class="form-group" id="datepicker-default"> 38 <label class="col-sm-3 control-label">年月</label> 39 <div class="col-sm-9 form-inline"> 40 <div class="input-group date"> 41 <input type="text" class="form-control" id="input-date"> 42 <div class="input-group-addon"> 43 <i class="fa fa-calendar"></i> 44 </div> 45 </div> 46 </div> 47 </div> 48 </form> 49 50 51 <div id="shifttable"> 52 <table border="1px"> 53 ・・・ 54 </table> 55 </div> 56</body> 57</html>

補足情報(FW/ツールのバージョンなど)

django2.0
python3.6.4

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

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

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

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

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

guest

回答1

0

ベストアンサー

画面遷移をせずにシフト表を更新する場合には、年と月を渡すとシフトデータを返すようなAPIが必要です。
Ajaxを利用してデータを取得し、#shifttableに入れればできるでしょう。
以下のコードはAjax

javascript

1$.ajax({ 2 url: '/api/shift', 3 method: 'GET', 4 data: { 5 year: <>, 6 month: <>, 7 }, 8 dataType: 'json', 9 timeout: 5000, 10}).done(function (data) { 11 // 取ったデータを処理 12}).fail(function (jqXHR) { 13 // エラー処理 14});

投稿2018/04/06 06:45

nedisoh

総合スコア74

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

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

minimini4Q

2018/04/08 05:05

解答ありがとうございます。$.ajaxは仮にformが変更された際に実行したいとすると $("#form-date").change(function(){}内に記述するという認識でよろしいでしょうか??
nedisoh

2018/04/09 00:38

変化するのはinput要素なので、$('#input-date').on('change', function () {}); となります。
minimini4Q

2018/04/12 02:27

無事完成しました!!ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問