「Flip Counter Plugin」でカウンターの内容を更新したい

実現したいこと

「Flip Counter Plugin」というプラグインを使用し、自分の誕生日を入力すると、還暦の歳になるまでのカウントダウンを表示するWEBページを作成しようとしています。

発生している問題・分からないこと

誕生日の入力はjQueryのdatepickerで、さらに還暦の日付も作るまではいけたのですが、それをどうしてもプラグインで表示することができません。

ページを表示した際は「1970年1月1日生まれ」の人が還暦になるまでのカウントダウンを表示し、datepickerで日付を選択すると、随時カウントダウンの数字が変わるようにしたいです。

1日かけて無理だったので、プロの方のお知恵をお借りできればと思います。よろしくお願いいたします。

該当のソースコード

HTML
1<!doctype html>
2<html lang="ja" class="h-100">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <meta name="description" content="">
7
8    <title>Test</title>
9
10
11    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
12    <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
13    <script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script>
14    <script src="https://unpkg.com/@pqina/flip/dist/flip.min.js"></script>
15    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
16
17    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
18    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
19    <link href="https://unpkg.com/@pqina/flip/dist/flip.min.css" rel="stylesheet">
20    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
21
22    <style>
23      body{font-family:"Noto Sans JP",sans-serif;font-weight:normal;background-color:#d5dfde}body p{text-align:justify}h1,h2,h3,h4,h5,hr{margin:0}.tick{width:50%;max-width:600px;margin:0 auto 4vw;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}@media screen and (max-width: 560px){.tick{width:80%}}.tick-label{font-size:.375em;text-align:center;color:gray}.tick-group{margin:0 .25em;text-align:center}#text-styled [data-view=text]{font-weight:bold;font-family:sans-serif;color:red;letter-spacing:.25em}footer{padding-top:3em}/*# sourceMappingURL=style.css.map */
24    </style>
25
26  </head>
27  <body class="d-flex h-100">
28
29    <div class="d-flex w-100 h-100 flex-column animate__animated animate__fadeIn animate__delay-1s">
30
31      <main class="mt-auto w-100">
32        <section>
33          <div class="container">
34            <div class="row justify-content-center flex-column">
35              <div class="col-12 mb-5 text-center">
36                <label for="start">誕生日を設定</label>
37                <input type="text" id="datepicker">
38              </div>
39              <div class="col-12 cdt_tick_box">
40                <div class="tick" data-did-init="handleTickInit" data-credits="false">
41                    <h4 class="mb-4 text-center">あなたが還暦まであと</h4>
42                    <div data-repeat="true" data-layout="horizontal center fit" data-transform="preset(d, h, m, s) -> delay">
43                      <div class="tick-group">
44                          <div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay">
45                              <span data-view="flip"></span>
46                          </div>
47                          <span data-key="label" data-view="text" class="tick-label"></span>
48                      </div>
49                    </div>
50                </div>
51                <div class="tick-onended-message">
52                  <h4 class="mb-4 text-center" style="display: none;">あなたはすでに還暦を迎えています。</h4>
53                </div>
54              </div><!-- /.cdt_tick_box -->
55              <script>
56                $( "#datepicker" ).datepicker({
57                  dateFormat: "yy年mm月dd日",
58                  changeMonth: true,
59                  changeYear: true,
60                  onSelect: function(dateText) {
61                    const bd = $(this).val();
62                    const re = /年|月|日/;
63                    const resultSplit = bd.split(re);
64                    kanrekiYear = Number(resultSplit[0]) + 60;
65                    var kanreki = kanrekiYear + '-' + resultSplit[1] + '-' + resultSplit[2] + ' GMT+09:00';
66                    console.log(kanreki);
67                  }
68                });
69                $( "#datepicker" ).datepicker("setDate","1970年01月01日");
70
71                function handleTickInit(tick) {
72                  kanreki = '2030-01-01 GMT+09:00';
73                  var counter = Tick.count.down(kanreki);
74                  counter.onupdate = function (value) {
75                    tick.value = value;
76                  };
77                  counter.onended = function() {
78                    document.querySelector('.tick-onended-message').style.display = '';
79                    document.querySelector('.tick').style.display = 'none';
80                  };
81                }
82              </script>
83            </div><!-- .row -->
84          </div><!-- .container -->
85        </section>
86      </main>
87      <footer class="mt-auto">
88        <p class="text-center small">&copy; Test</p>
89      </footer>
90    </div>
91
92
93  </body>
94</html>
95

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

初期表示したカウントダウンを更新する方法が分からず。
公式のドキュメントを読んだのですが、理解できませんでした。
https://pqina.nl/tick/

補足

特になし

行動規範の内容に同意します

回答1件

ChatGPTに考えてもらいました。でも機能は実現してるんですが、コンソールにエラーが出るんですよね。。

HTML
1<!doctype html>
2<html lang="ja" class="h-100">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <meta name="description" content="">
7
8    <title>Test</title>
9
10    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
11    <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
12    <script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script>
13    <script src="https://unpkg.com/@pqina/flip/dist/flip.min.js"></script>
14    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
15
16    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
17    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
18    <link href="https://unpkg.com/@pqina/flip/dist/flip.min.css" rel="stylesheet">
19    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
20
21    <style>
22      body{font-family:"Noto Sans JP",sans-serif;font-weight:normal;background-color:#d5dfde}body p{text-align:justify}h1,h2,h3,h4,h5,hr{margin:0}.tick{width:50%;max-width:600px;margin:0 auto 4vw;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}@media screen and (max-width: 560px){.tick{width:80%}}.tick-label{font-size:.375em;text-align:center;color:gray}.tick-group{margin:0 .25em;text-align:center}#text-styled [data-view=text]{font-weight:bold;font-family:sans-serif;color:red;letter-spacing:.25em}footer{padding-top:3em}/*# sourceMappingURL=style.css.map */
23    </style>
24
25  </head>
26  <body class="d-flex h-100">
27
28    <div class="d-flex w-100 h-100 flex-column animate__animated animate__fadeIn animate__delay-1s">
29
30      <main class="mt-auto w-100">
31        <section>
32          <div class="container">
33            <div class="row justify-content-center flex-column">
34              <div class="col-12 mb-5 text-center">
35                <label for="start">誕生日を設定</label>
36                <input type="text" id="datepicker">
37              </div>
38              <div class="col-12 cdt_tick_box">
39                <div class="tick" id="countdown" data-did-init="handleTickInit" data-credits="false">
40                    <h4 class="mb-4 text-center">あなたが還暦まであと</h4>
41                    <div data-repeat="true" data-layout="horizontal center fit" data-transform="preset(d, h, m, s) -> delay">
42                      <div class="tick-group">
43                          <div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay">
44                              <span data-view="flip"></span>
45                          </div>
46                          <span data-key="label" data-view="text" class="tick-label"></span>
47                      </div>
48                    </div>
49                </div>
50                <div class="tick-onended-message" style="display: none;">
51                  <h4 class="mb-4 text-center">あなたはすでに還暦を迎えています。</h4>
52                </div>
53              </div><!-- /.cdt_tick_box -->
54              <script>
55                let counter;
56                let tick;
57
58                function initializeCounter(kanrekiDate) {
59                  if (counter) {
60                    counter.onupdate = null;
61                    counter.onended = null;
62                    document.querySelector('.tick-onended-message').style.display = 'none';
63                    document.querySelector('.tick').style.display = '';
64                  }
65
66                  counter = Tick.count.down(kanrekiDate);
67                  counter.onupdate = function (value) {
68                    tick.value = value;
69                  };
70                  counter.onended = function() {
71                    document.querySelector('.tick-onended-message').style.display = '';
72                    document.querySelector('.tick').style.display = 'none';
73                  };
74                }
75
76                function handleTickInit(t) {
77                  tick = t;
78                  const initialDate = new Date('2030-01-01T00:00:00+09:00');
79                  initializeCounter(initialDate);
80                }
81
82                $( "#datepicker" ).datepicker({
83                  dateFormat: "yy年mm月dd日",
84                  changeMonth: true,
85                  changeYear: true,
86                  maxDate: 0,
87                  onSelect: function(dateText) {
88                    const bd = $(this).val();
89                    const re = /年|月|日/;
90                    const resultSplit = bd.split(re);
91                    const kanrekiYear = Number(resultSplit[0]) + 60;
92                    const kanreki = new Date(`${kanrekiYear}-${resultSplit[1]}-${resultSplit[2]}T00:00:00+09:00`);
93                    initializeCounter(kanreki);
94                  }
95                });
96
97                $( "#datepicker" ).datepicker("setDate","1970年01月01日");
98              </script>
99            </div><!-- .row -->
100          </div><!-- .container -->
101        </section>
102      </main>
103      <footer class="mt-auto">
104        <p class="text-center small">&copy; Test</p>
105      </footer>
106    </div>
107
108
109  </body>
110</html>
111