Trying to call the jQuery datepicker with the dynamic ID from HTML file

Question

Trying to call the jQuery datepicker with the ID. But I do not want to declare the ID on the script page. I want to call this jQuery file or function from the HTML file when I clicked on the input textbox and want to pass the input textbox id as a parameter. Then using that parameter I want to call the function. Could you please tell me how will I do that? Thank you in advance.

for example: I want to do the following. in HTML file

<button id="b-id" onclick="myFunc('b-id')>Click</button>

in JS file

($id).datepicker();

the ID will come from the HTML file.

$(function () {
  $.datepicker.setDefaults({
    monthNames: [
      "1月",
      "2月",
      "3月",
      "4月",
      "6月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
    monthNamesShort: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
    dayNames: [
      "日曜日",
      "月曜日",
      "火曜日",
      "水曜日",
      "木曜日",
      "金曜日",
      "土曜日",
    ],
    dayNamesShort: ["日", "月", "火", "水", "木", "金", "土"],
    dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"],
    weekHeader: "周",
    dateFormat: "yy/mm/dd",
    firstDay: 0,
    isRTL: false,
    showMonthAfterYear: true,
    changeMonth: true,
    changeYear: true,
    yearRange: "-90:+90",
  });
  $("#startDepDate, #endDepDate, #startRegDate, #endRegDate, #searchStartDate, #searchEndDate, #searchSendDate, #kikanstart, #kikanend, #searchDateStart, #searchDateEnd, #searchDateEnd, #authDateStart, #authDateEnd, #searchdateStart, #searchdateEnd, #searchCanceldateStart, #searchCanceldateEnd, #searchPostDateFrom, #searchPostDateTo, #startDate, #endDate, #d1From, #d1To, #registerStart, #registerEnd, #acDateStart, #acDateEnd, #acRegStart, #acRegEnd" ).datepicker({
    showOn: "button",
    buttonText: "▼",
  });
});

score 2 · Answer 1 · answered Jul 19 '22 at 07:52

You can do that by assigning a common class to all the date text boxes. As for getting the id, you can get that from the onSelect option. Check out below code sample.

$(".dp").datepicker({
    "onSelect": function(a, b) {
    alert(b.id);
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input id="cal1" class="dp" />
<input id="cal2" class="dp" />
<input id="cal3" class="dp" />

Trying to call the jQuery datepicker with the dynamic ID from HTML file

1 Answers1