Sylar Sylar - 1 month ago 19
Javascript Question

Open Semantic UI Calendar within a loop

I need to open Semantic-UI-Calendar within a loop but nothing works, which it should. The logic is, when I click

data-id="expensecal"
, it should give me the
id
which is
expense_date2
or
expense_date1
but instead it give me the
id
of the
input
:

Rails View:

#---Loop----#
<div class="required field">
<label>Claim date</label>
<div class="ui calendar" data-id="expensecal" id="expense_date<%= contract.id %>">
<div class="ui input left icon">
<i class="calendar icon"></i>
<%= f.text_field :date, id: "expense_date_input", placeholder: "Expense date" %>
</div>
</div>
</div>


JavaScript:

$( "[data-id=expensecal]" ).click(function(e) {
e.preventDefault();
let id = '#' + e.target.id;
console.log(id); // Shows the field input id. Why?
$(id).calendar({
type: 'date'
});
});


I use this method to open up a semantic modal in a loop and it works ok but not sure why not with the calendar.

Answer

Initialize all the elements at page ready using a class, remove the click event

Try using the following code:

$('.ui.calendar').calendar({
    type: 'date'
  });

demo:https://jsbin.com/kenaqiyuqe/1/edit?html,js,output