Never been to DZone Snippets before?

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

Change the EE date fields to dropdown pickers (See related posts)

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:
   1  
   2  <script language="JavaScript" type="text/javascript">
   3  function entrydate()
   4  {
   5  	var month = document.entryform.start_month.value;
   6  	var day = document.entryform.start_day.value;
   7  	var year = document.entryform.start_year.value;
   8  	var time = document.entryform.start_time.value;
   9  	document.entryform.entry_date.value = year+month+day+" "+time;
  10  }
  11  </script>


Code for the actual fields:

   1  
   2  <!-- Begin Month -->
   3  <select name="start_month" onchange="entrydate();">
   4  <option value="01-" >January</option>
   5  <option value="02-" >February</option>
   6  <option value="03-" >March</option>
   7  <option value="04-" >April</option>
   8  <option value="05-" >May</option>
   9  
  10  <option value="06-" >June</option>
  11  <option value="07-" >July</option>
  12  <option value="08-" selected>August</option>
  13  <option value="09-" >September</option>
  14  <option value="10-" >October</option>
  15  <option value="11-" >November</option>
  16  <option value="12-" >December</option>
  17  
  18  </select>
  19  <!-- End Month -->
  20  
  21  <!-- Begin Day -->
  22  <select name="start_day" onchange="entrydate();">
  23  <option value="1" >1</option>
  24  <option value="2" >2</option>
  25  <option value="3" >3</option>
  26  <option value="4" >4</option>
  27  <option value="5" >5</option>
  28  <option value="6" >6</option>
  29  <option value="7" >7</option>
  30  <option value="8" >8</option>
  31  
  32  <option value="9" >9</option>
  33  <option value="10" >10</option>
  34  <option value="11" >11</option>
  35  <option value="12" >12</option>
  36  <option value="13" >13</option>
  37  <option value="14" >14</option>
  38  <option value="15" >15</option>
  39  <option value="16" >16</option>
  40  <option value="17" >17</option>
  41  
  42  <option value="18" >18</option>
  43  <option value="19" >19</option>
  44  <option value="20" >20</option>
  45  <option value="21" >21</option>
  46  <option value="22" >22</option>
  47  <option value="23" >23</option>
  48  <option value="24" >24</option>
  49  <option value="25" >25</option>
  50  <option value="26" >26</option>
  51  
  52  <option value="27" >27</option>
  53  <option value="28" >28</option>
  54  <option value="29" >29</option>
  55  <option value="30" selected>30</option>
  56  <option value="31" >31</option>
  57  
  58  </select>
  59  <!-- End Day -->
  60  <!-- Begin Year -->
  61  <select name="start_year" onchange="entrydate();">
  62  <option value="2005-" >2005</option>
  63  
  64  <option value="2006-" selected>2006</option>
  65  <option value="2007-" >2007</option>
  66  
  67  </select>
  68  <!-- End Year -->
  69  <!-- Begin Time -->
  70  <select name="start_time" onchange="entrydate();">
  71  <option value="6:00 AM" >6:00 AM</option>
  72  <option value="6:30 AM" >6:30 AM</option>
  73  <option value="7:00 AM" >7:00 AM</option>
  74  <option value="7:30 AM" >7:30 AM</option>
  75  
  76  <option value="8:00 AM" selected>8:00 AM</option>
  77  <option value="8:30 AM" >8:30 AM</option>
  78  <option value="9:00 AM" >9:00 AM</option>
  79  <option value="9:30 AM" >9:30 AM</option>
  80  <option value="10:00 AM" >10:00 AM</option>
  81  <option value="10:30 AM" >10:30 AM</option>
  82  <option value="11:00 AM" >11:00 AM</option>
  83  <option value="11:30 AM" >11:30 AM</option>
  84  <option value="12:00 PM" >12:00 PM</option>
  85  
  86  <option value="12:30 PM" >12:30 PM</option>
  87  <option value="1:00 PM" >1:00 PM</option>
  88  <option value="1:30 PM" >1:30 PM</option>
  89  <option value="2:00 PM" >2:00 PM</option>
  90  <option value="2:30 PM" >2:30 PM</option>
  91  <option value="3:00 PM" >3:00 PM</option>
  92  <option value="3:30 PM" >3:30 PM</option>
  93  <option value="4:00 PM" >4:00 PM</option>
  94  <option value="4:30 PM" >4:30 PM</option>
  95  
  96  <option value="5:00 PM" >5:00 PM</option>
  97  <option value="5:30 PM" >5:30 PM</option>
  98  <option value="6:00 PM" >6:00 PM</option>
  99  <option value="6:30 PM" >6:30 PM</option>
 100  <option value="7:00 PM" >7:00 PM</option>
 101  <option value="7:30 PM" >7:30 PM</option>
 102  <option value="8:00 PM" >8:00 PM</option>
 103  <option value="8:30 PM" >8:30 PM</option>
 104  <option value="9:00 PM" >9:00 PM</option>
 105  
 106  <option value="9:30 PM" >9:30 PM</option>
 107  <option value="10:00 PM" >10:00 PM</option>
 108  <option value="10:30 PM" >10:30 PM</option>
 109  <option value="11:00 PM" >11:00 PM</option>
 110  <option value="11:30 PM" >11:30 PM</option>
 111  
 112  </select>
 113  <!-- End Time -->
 114  <input type="hidden" name="entry_date" value="2006-08-30 8:57 AM" />


Full credit for this goes to Solspace!

You need to create an account or log in to post comments to this site.


Click here to browse all 5350 code snippets

Related Posts