Я работаю над преобразованием компонентов даты (fromDate и toDate) в компонент Bootstrap Date. Для этого я создал текстовое поле в калитки, а затем выполнил скрипт в этом текстовом поле, чтобы создать требуемый вывод. Тем не менее, я получаю только первое текстовое поле, преобразованное в компонент даты, а второе - не так, как скрипт не был выполнен на нем. См. Изображение и код ниже.
HTML:
<span wicket:id="rangeDateValue" style="width:400px">
<span class="input">
<div class="input-group date">
<input wicket:id="fromDateValue" class="std" />
</div>
</span>
<span class="input">
<div class="input-group date">
<input wicket:id="toDateValue" class="std" />
</div>
</span>
</span>
Джава
public DateRangePicker(final MarkupContainer parent, String id, IModel<RangeDateModel> model)
{
super(id, model);
this.startDateTime = addValueDatePickerNew(this, "fromDateValue", new PropertyModel<String>(model, "fromDate"));
this.endDateTime = addValueDatePickerNew(this, "toDateValue", new PropertyModel<String>(model, "toDate"));
this.add(new DateTimeRangeValidator());
parent.add(this);
}
private TextField<String> addValueDatePickerNew(final MarkupContainer parent, final String id, final IModel<String> model)
{
final TextField<String> result = new TextField<String>(id, model) {
private static final long serialVersionUID = 1L;
public void renderHead(IHeaderResponse response)
{
String jsDateField = "jQuery(function () {"
+ "var idDate = jQuery(\"input[name*='dateValue' i]\").attr('id');\n"
+ "console.log(\"idDate: \"+idDate);\n"
+ "var calIcon = \"<span class='input-group-addon dateTimePick'><span class='glyphicon glyphicon-calendar'></span></span>\";"
+ "var idDateValField = jQuery('#' +idDate);\n"
+ "idDateValField.datetimepicker({\n"
+ "useCurrent: false,\n"
+ "collapse: true\n"
+ "});\n"
+ "idDateValField.after(calIcon);\n"
+ "idDateValField.next('span.input-group-addon').click(function(e) {\n"
+ "idDateValField.focus();\n"
+ "});\n"
+ "});";
response.renderOnDomReadyJavaScript(jsDateField);
}
};
result.setOutputMarkupId(true);
parent.add(result);
return result;
}
Я получаю консольную инструкцию только для "fromDate", а не "toDate". Поскольку оба находятся в одной и той же DOM, и выполнение скрипта происходит после DOM Ready, я предполагаю, что оно применяется только для "fromDate" и не может получить правильный способ сделать это.
Попробуйте "ввести" идентификатор разметки в код javascript:
String jsDateField = "jQuery(function () {"
+ "var idDate = '" + getMarkupId() +"';\n"
+ "console.log(\"idDate: \"+idDate);\n"
+ "var calIcon = \"<span class='input-group-addon dateTimePick'><span class='glyphicon glyphicon-calendar'></span></span>\";"
+ "var idDateValField = jQuery('#' +idDate);\n"
+ "idDateValField.datetimepicker({\n"
+ "useCurrent: false,\n"
+ "collapse: true\n"
+ "});\n"
+ "idDateValField.after(calIcon);\n"
+ "idDateValField.next('span.input-group-addon').click(function(e) {\n"
+ "idDateValField.focus();\n"
+ "});\n"
+ "});";
response.renderOnDomReadyJavaScript(jsDateField);