get the id starting with

I have a datepicker in a div with class pickergroup, I have 3 datepickers in my page, and this is why I use a group and different names

<div class="pickergroup">
     <input type="text" name="day1" id="day1"/> / 
     <input type="text" name="month1" id="month1"/> / 
     <input type="text" name="year1" id="year1"/>
     <input type="hidden" id="date1" name="date1"/>  
     <div id="datepicker1" name="calendar"></div>
</div>   

In my jQuery I want to detect when clicking the id which starts with "datepicker", I guess something like:

$(document).on('click', '.pickergroup id^="datepicker"', function() {
  $(".pickergroup").find('[id^="datepicker"]').datepicker({
      //my datepicker code
  });
});

but this is not correct.

How can I do it?

The problem is how you're selecting the element inside of the event handler.

$(".pickergroup").find('[id^="datepicker"]')

means "find all elements with the class of pickergroup. Find all of their children which have an ID starting with datepicker." Instead, you want to use this and fix your selector from

.pickergroup id^="datepicker"

to

.pickergroup [id^="datepicker"]

$(document).on('click', '.pickergroup [id^="datepicker"]', function() {
  var $this = $(this); // The div that was clicked
  console.log($this.text());
});

.pickergroup div {
  float: left;
  margin-right: 1em;
  width: 200px;
  height: 200px;
  background: #0F0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pickergroup">
  <div id="datepicker1">A</div>
</div>
<div class="pickergroup">
  <div id="datepicker2">B</div>
</div>
<div class="pickergroup">
  <div id="datepicker3">C</div>
</div>
<div class="pickergroup">
  <div id="can-t-click-me">D</div>
</div>