<form>
<p class="field">
<input name="name" data-xp="repeat: true"/>
<button class="repeat_append_button">+</button>
<button class="repeat_remove_button">−</button>
</p>
</form>
<form>
<p class="fields" data-xp="name: 'person', repeat: true">
<input name="first_name" placeholder="Имя"/>
<input name="last_name" placeholder="Фамилия"/>
<button class="repeat_append_button">+</button>
<button class="repeat_remove_button">−</button>
</p>
</form>
<form>
<div class="fields" data-xp="name: 'person', repeat: true">
<input name="first_name" placeholder="Имя"/>
<input name="last_name" placeholder="Фамилия"/>
<p class="fields" data-xp="name: 'contact', repeat: true">
<input name="contact"/>
<select name="contact_type">
<option>телефон</option>
<option>эл. почта</option>
</select>
<button class="repeat_append_button">+</button>
<button class="repeat_remove_button">−</button>
</p>
<p>
<button class="repeat_append_button">Добавить контактное лицо</button>
<button class="repeat_remove_button">Удалить</button>
</p>
</div>
</form>
<form>
<!-- Необходим reset, если нет шаблона. -->
<div class="fields" data-xp="name: 'person', repeat: {reset: true}">
<input name="first_name" placeholder="Имя" value="Сидор"/>
<input name="last_name" placeholder="Фамилия" value="Иванов"/>
<p class="fields" data-xp="name: 'contact', repeat: {reset: true}">
<input name="contact" value="si@mail.some"/>
<select name="contact_type">
<option>телефон</option>
<option selected="true">эл. почта</option>
</select>
<button class="repeat_append_button">+</button>
<button class="repeat_remove_button">−</button>
</p>
<p class="fields" data-xp="name: 'contact', repeat: {reset: true}">
<input name="contact" value="ivanov@mail.some"/>
<select name="contact_type">
<option>телефон</option>
<option selected="true">эл. почта</option>
</select>
<button class="repeat_append_button">+</button>
<button class="repeat_remove_button">−</button>
</p>
<p>
<button class="repeat_append_button">Добавить контактное лицо</button>
<button class="repeat_remove_button">Удалить</button>
</p>
</div>
<div class="fields" data-xp="name: 'person', repeat: {reset: true}">
<input name="first_name" placeholder="Имя" value="Иван"/>
<input name="last_name" placeholder="Фамилия" value="Сидоров"/>
<!-- Вложенным повторениям необходимо задать суффиксы. -->
<p class="fields" data-xp="name: 'contact[1]', repeat: {reset: true}">
<input name="contact[1][0]" value="is@mail.some"/>
<select name="contact_type[1][0]">
<option>телефон</option>
<option selected="true">эл. почта</option>
</select>
<button class="repeat_append_button">+</button>
<button class="repeat_remove_button">−</button>
</p>
<p>
<button class="repeat_append_button">Добавить контактное лицо</button>
<button class="repeat_remove_button">Удалить</button>
</p>
</div>
</form>
<form autocomplete="off">
<div class="fields" data-xp="name: 'education', repeat: true">
<input name="institute" placeholder="Учебное заведение"/>
<span class="number">
<input name="graduation" placeholder="Год выпуска" data-xp="min: 1950, max: 2014, def: 2000"/>
</span>
<p>
<button class="repeat_append_button">Добавить</button>
</p>
</div>
<div class="fields" data-xp="name: 'education', repeat: {template: true}">
<input name="institute" placeholder="Учебное заведение"/>
<span class="number">
<input name="graduation" placeholder="Год выпуска" data-xp="min: 1950, max: 2014, def: 2000"/>
</span>
<p>
<button class="repeat_append_button">Добавить</button>
<button class="repeat_remove_button">Удалить</button>
</p>
</div>
</form>
<span class="datemonth">
<input name="month" value="2024-4"/>
</span>
<table>
<thead>
<tr>
<th>Пн</th>
<th>Вт</th>
<th>Ср</th>
<th>Чт</th>
<th>Пт</th>
<th class="weekend">Сб</th>
<th class="weekend">Вс</th>
</tr>
</thead>
<tbody id="days" data-xp="type: 'fields'" align="right">
<tr data-xp="type: 'fields', name: 'week', repeat: true">
<td data-xp="type: 'html_week_day', name: 'mo'"></td>
<td data-xp="type: 'html_week_day', name: 'tu'"></td>
<td data-xp="type: 'html_week_day', name: 'we'"></td>
<td data-xp="type: 'html_week_day', name: 'th'"></td>
<td data-xp="type: 'html_week_day', name: 'fr'"></td>
<td data-xp="type: 'html_week_day', name: 'sa'" class="weekend"></td>
<td data-xp="type: 'html_week_day', name: 'su'" class="weekend"></td>
</tr>
</tbody>
</table>
<style>
th.weekend, td.weekend {color: red;}
td.sibling {opacity: 0.3;}
</style>
<script>
xP.controls.register({name: 'html_week_day', base: 'html', prototype: {
classed: {
on: '[this] * 1 > [this].parent()._param(\'repeat_position\') * 7 + 7'
+ ' || [this] * 1 < [this].parent()._param(\'repeat_position\') * 7 - 7',
do: 'sibling'
}
}});
xP();
xP('[name=month]').first().change(function(){
var dt = this.date(),
weeks = [], i;
dt.setDate(dt.getDate() - (dt.getDay() == 1 ? 8 : dt.getDay() || 7));
for(i = 0; i < 6; i++){
weeks[i] = {
mo: dt.setDate(dt.getDate() + 1) && dt.getDate() || '<br/>',
tu: dt.setDate(dt.getDate() + 1) && dt.getDate() || '',
we: dt.setDate(dt.getDate() + 1) && dt.getDate() || '',
th: dt.setDate(dt.getDate() + 1) && dt.getDate() || '',
fr: dt.setDate(dt.getDate() + 1) && dt.getDate() || '',
sa: dt.setDate(dt.getDate() + 1) && dt.getDate() || '',
su: dt.setDate(dt.getDate() + 1) && dt.getDate() || ''
};
}
xP('#days').first().val({week: weeks});
});
</script>