DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets Manager

Snippets has posted 5883 posts at DZone. View Full User Profile

Change The EE Date Fields To Dropdown Pickers

08.31.2006

| 4524 views |

        You can use the code below to change Expression Engine's custom date fields to easy dropdowns, instead of the confusing text fields.

JS in the head of your document:

<script language="JavaScript" type="text/javascript">
function entrydate()
{
	var month = document.entryform.start_month.value;
	var day = document.entryform.start_day.value;
	var year = document.entryform.start_year.value;
	var time = document.entryform.start_time.value;
	document.entryform.entry_date.value = year+month+day+" "+time;
}
</script>


Code for the actual fields:

<!-- Begin Month -->
<select name="start_month" onchange="entrydate();">
<option value="01-" >January</option>
<option value="02-" >February</option>
<option value="03-" >March</option>
<option value="04-" >April</option>
<option value="05-" >May</option>

<option value="06-" >June</option>
<option value="07-" >July</option>
<option value="08-" selected>August</option>
<option value="09-" >September</option>
<option value="10-" >October</option>
<option value="11-" >November</option>
<option value="12-" >December</option>

</select>
<!-- End Month -->

<!-- Begin Day -->
<select name="start_day" onchange="entrydate();">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>

<option value="9" >9</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option value="14" >14</option>
<option value="15" >15</option>
<option value="16" >16</option>
<option value="17" >17</option>

<option value="18" >18</option>
<option value="19" >19</option>
<option value="20" >20</option>
<option value="21" >21</option>
<option value="22" >22</option>
<option value="23" >23</option>
<option value="24" >24</option>
<option value="25" >25</option>
<option value="26" >26</option>

<option value="27" >27</option>
<option value="28" >28</option>
<option value="29" >29</option>
<option value="30" selected>30</option>
<option value="31" >31</option>

</select>
<!-- End Day -->
<!-- Begin Year -->
<select name="start_year" onchange="entrydate();">
<option value="2005-" >2005</option>

<option value="2006-" selected>2006</option>
<option value="2007-" >2007</option>

</select>
<!-- End Year -->
<!-- Begin Time -->
<select name="start_time" onchange="entrydate();">
<option value="6:00 AM" >6:00 AM</option>
<option value="6:30 AM" >6:30 AM</option>
<option value="7:00 AM" >7:00 AM</option>
<option value="7:30 AM" >7:30 AM</option>

<option value="8:00 AM" selected>8:00 AM</option>
<option value="8:30 AM" >8:30 AM</option>
<option value="9:00 AM" >9:00 AM</option>
<option value="9:30 AM" >9:30 AM</option>
<option value="10:00 AM" >10:00 AM</option>
<option value="10:30 AM" >10:30 AM</option>
<option value="11:00 AM" >11:00 AM</option>
<option value="11:30 AM" >11:30 AM</option>
<option value="12:00 PM" >12:00 PM</option>

<option value="12:30 PM" >12:30 PM</option>
<option value="1:00 PM" >1:00 PM</option>
<option value="1:30 PM" >1:30 PM</option>
<option value="2:00 PM" >2:00 PM</option>
<option value="2:30 PM" >2:30 PM</option>
<option value="3:00 PM" >3:00 PM</option>
<option value="3:30 PM" >3:30 PM</option>
<option value="4:00 PM" >4:00 PM</option>
<option value="4:30 PM" >4:30 PM</option>

<option value="5:00 PM" >5:00 PM</option>
<option value="5:30 PM" >5:30 PM</option>
<option value="6:00 PM" >6:00 PM</option>
<option value="6:30 PM" >6:30 PM</option>
<option value="7:00 PM" >7:00 PM</option>
<option value="7:30 PM" >7:30 PM</option>
<option value="8:00 PM" >8:00 PM</option>
<option value="8:30 PM" >8:30 PM</option>
<option value="9:00 PM" >9:00 PM</option>

<option value="9:30 PM" >9:30 PM</option>
<option value="10:00 PM" >10:00 PM</option>
<option value="10:30 PM" >10:30 PM</option>
<option value="11:00 PM" >11:00 PM</option>
<option value="11:30 PM" >11:30 PM</option>

</select>
<!-- End Time -->
<input type="hidden" name="entry_date" value="2006-08-30 8:57 AM" />