<h1 class="title">Date Element</h1>

<p>In this tutorial you learn how to configure a date element with its specific values to use it in the ZOO extension.</p>

<p>How you create an element like this, we show you in {doc: create-new-types text: this tutorial}.</p>


<h2>1. Configuration</h2>

<div class="bfc-o">
	<img class="align-right" src="../../../assets/images/zoo/element_date.png" alt="Parameter settings" title="Parameter settings" >

	<p>In this tutorial you learn how to configure a checkbox element with its specific values to use it in the ZOO extension.</p>

	<p>Here is the description of the different values:</p>

	<p>Name: Type in the name for this element which will be used later on, for example in the item creation view or as label in the frontend. With the name you also can identify the element, when you assign it to a template position.</p>

	<p>Description: The description will show up as a tooltip in the item creation view</p>

	<p>Repeatable: When you activate this option you will be able to easily generate new fields of this kind in the element creation view (see step 3).</p>
</div>


<h2>2. Element Assignment</h2>

<div class="bfc-o">
	<img class="align-right" src="../../../assets/images/zoo/element_date_2.png" alt="Parameter settings" title="Parameter settings">

	<p>Every element has to be assigned to a template position to show up for the visitors in the frontend of the site. See {doc: assign-elements-to-layout-positions text: this tutorial} how to assign elements to the template positions.</p>

	<p>You can set whether the label is shown in the frontend or not. If you choose "Yes" the name of the element (see previous step) is used for it. If you do not want to use the elements name as label you can type in an alternative. Of course the "Show Label" option have to be enabled to show the alternative label.</p>

	<p>If you activated the Repeatable option in step 1 you can choose how the values are separated in the frontend. You can choose between different chars like comma or pipe or the values can be wrapped by a html tag like a div or a li.</p>

	<p>With the date format you can choose, how the date is shown to the visitors. See <a href="http://www.php.net/manual/en/function.strftime.php" target="_blank">this site</a> for an explanation of the values. If you set this selectbox to "custom format" and type in the last field an own format following the same rules.</p>
</div>


<h2>3. Item Creation</h2>

<div class="bfc-o">
	<img class="border align-right" src="../../../assets/images/zoo/element_date_3.png" alt="Parameter settings" title="Parameter settings">

	<p>This is how the element looks when you create an item. See {doc: create-and-manage-items text: this tutorial} for creating an item. If you had activated the Repeatable option in step 1, you can see the "Repeat Element" button. When you click on it, another field of this kind appears.</p>
</div>	
	
<div class="bfc-o">	
	<img class="border align-right" src="../../../assets/images/zoo/element_date_4.png" alt="Parameter settings" title="Parameter settings">

	<p>When you click on the small calendar icon, a calendar pop up will show and you can select a date very easily.</p>
</div>