前提・実現したいこと
当方初学者です。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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/08 05:05
2018/04/09 00:38
2018/04/12 02:27