ecardilly Design Components

Event Form Date 

<section class="form_section container">
    <div class="row">
        <div class="d_grid-12 m_grid-4 flow--one">
            <div class="event_form_header">
                <h4 class="h4">Datum und Uhrzeit</h4>
                <label for="switch-date" class="label--switch">
                    <input type="checkbox" name="switch-date" id="switch-date" checked="true" />
                    <div class="fakebox"></div>
                </label>
            </div>

            <div class="form_row">
                <div class="form_set">
                    <label for="date_start">Datum</label>
                    <input type="date" class="--unset" name="date_start" id="date_start" required="true" data-event-start="" />
                </div>
                <div class="form_set">
                    <label for="date_time_start">Uhrzeit <em>(optional)</em></label>
                    <input type="time" class="--unset" name="date_time_start" id="date_time_start" />
                </div>
            </div>

            <button type="button" class="btn btn--small btn--secondary" data-show-event-enddate="">
                <i class="ph-bold ph-plus-circle"></i>
                <span>Ende des Events hinzufügen</span>
            </button>

            <div class="form_row --hidden">
                <div class="form_set">
                    <label for="date_start">Datum (Ende) <em>(optional)</em></label>
                    <input type="date" class="--unset" name="date_start" id="date_start" required="true" data-event-end="" />
                </div>
                <div class="form_set">
                    <label for="date_time_start">Uhrzeit (Ende) <em>(optional)</em></label>
                    <input type="time" class="--unset" name="date_time_start" id="date_time_start" />
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="form_section container">
	<div class="row">
		<div class="d_grid-12 m_grid-4 flow--one">
			<div class="event_form_header">
				<h4 class="h4">Datum und Uhrzeit</h4>
				{{> @input_switch_toggle id='date' checked=true}}
			</div>

			<div class="form_row">
				<div class="form_set">
					<label for="date_start">Datum</label>
					<input
						type="date"
						class="--unset"
						name="date_start"
						id="date_start"
						required="true"
						data-event-start=""
					/>
				</div>
				<div class="form_set">
					<label for="date_time_start">Uhrzeit <em>(optional)</em></label>
					<input
						type="time"
						class="--unset"
						name="date_time_start"
						id="date_time_start"
					/>
				</div>
			</div>

			<button type="button" class="btn btn--small btn--secondary" data-show-event-enddate="">
				<i class="ph-bold ph-plus-circle"></i>
				<span>Ende des Events hinzufügen</span>
			</button>

			<div class="form_row --hidden">
				<div class="form_set">
					<label for="date_start">Datum (Ende) <em>(optional)</em></label>
					<input
						type="date"
						class="--unset"
						name="date_start"
						id="date_start"
						required="true"
						data-event-end=""
					/>
				</div>
				<div class="form_set">
					<label for="date_time_start">Uhrzeit (Ende) <em>(optional)</em></label>
					<input
						type="time"
						class="--unset"
						name="date_time_start"
						id="date_time_start"
					/>
				</div>
			</div>
		</div>
	</div>
</section>
 
/* No context defined. */

No notes defined.