JQueryでDatepicker

JQueryのDatepicker

動作に必要なモジュールと設定
・jquery-3.4.1.min.js  slim.minは不可
・jquery-ui.min.js
・datepicker-ja.js
・jquery-ui.min.css
・datepicker_size.css これは自分で作成
・imageの中にcalender.gifファイル これも自分で作成
・datepicker_function.js これも自分で作成

・jsフォルダに
 js/jquery-3.4.1.min.js
・js/jquery-ui-1に
 js/jquery-ui-1/jquery-ui.min.css
 js/jquery-ui-1/jquery-ui.min.js
 js/jquery-ui-1/datepicker-ja.js
・メインに
 datepicker_size.css
 datepicker_function.js

link rel="stylesheet" href="js/jquery-ui-1/jquery-ui.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery-ui-1/jquery-ui.min.js"></script>
<script src="js/jquery-ui-1/datepicker-ja.js"></script>
<link rel="stylesheet" type="text/css" href="datepicker_size.css"/>
<script src="jscommon.js"></script>
<script src="datepicker_function.js"></script>
datepicker_function.js
 
$(function() {
    $("#datepicker").datepicker();
    $("#datepicker").datepicker("option", "showOn", 'button');
    $("#datepicker").datepicker("option", "buttonImageOnly", true);
    $("#datepicker").datepicker("option", "buttonImage", './img/calender.gif');
  });

 $(function() {
    $("#datepicker2").datepicker();
    $("#datepicker2").datepicker("option", "showOn", 'button');
    $("#datepicker2").datepicker("option", "buttonImageOnly", true);
    $("#datepicker2").datepicker("option", "buttonImage", './img/calender.gif');
  });
   $(function() {
    $("#datepicker3").datepicker();
    $("#datepicker3").datepicker("option", "showOn", 'button');
    $("#datepicker3").datepicker("option", "buttonImageOnly", true);
    $("#datepicker3").datepicker("option", "buttonImage", './img/calender.gif');
  });

datepicker_size.css
.ui-datepicker{
    font-size: 100%;
}
<font  class="col-1 text-white bg-dark">開始日</font>
<input  id="datepicker" name="symd" type="text"   class="col-2" value="2020/01/01" >
	
カテゴリー php