title: Datepicker within a select dropdown
body: <p>I'm wondering if the following may be possible using something like jQuery. I've looked all over but haven't found a solution.</p>
  
  <p>I am using MVC 3/razor for my project. I have jQuery 1.5.1.</p>
  
  <p>We want a dropdown (select) box that will show a few options:
  - Monthly
  - Annually
  - Weekly
  - Date</p>
  
  <p>If the user selects 'Date' I'd like to show a calendar box and then record the selected date as the value in the select box. If they click the select box again they can change the values as per the original select values. </p>
  
  <p>In my project there are several of these boxes on the same page. Perhaps I could tie them to a click action via a class value?</p>
  
  <p>The closest request I've found to this point was here: <a href="https://stackoverflow.com/questions/2100605/jquery-ui-datepicker-on-select-element">jQuery ui.datepicker on &#39;select&#39; element</a>
  ... but I've not been able to get that working for my project quite yet.</p>
  
  <p>Any help is appreciated.</p>
  
  <p><strong>Update</strong>
  The added elements which I need to tie to are inserted to the page dynamically. Perhaps this is where my challenge is coming from.</p>
  
  <p><strong>Update</strong></p>
  
  <p>Here is some code I'm using/messing with at this moment:</p>
  
  <p>First - my code is added dynamically from a template. The field that I'm looking to tie to is below and may exist multiple times across the page:</p>
  
  <pre><code>&lt;td&gt;&lt;select id="f${FormCount}_PeriodWorked[]" name="PeriodWorked" class="periodworked"&gt;
                  &lt;option value="month"&gt;Month&lt;/option&gt;
                  &lt;option value="annual"&gt;Annual&lt;/option&gt;
                  &lt;option value="date" class="datepick"&gt;Date&lt;/option&gt;
                  &lt;/select&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>On the main page, where the form is dynamically added to, I have the following which attempts to add the datepicker to the option 'date'.</p>
  
  <pre><code>$(".periodworked").live("change", function () {
      if ($(this).val() == "date") {
          alert("In... now how to throw date picker....");
      }
  })
  </code></pre>
  
  <p>Lastly - tying this to respective fields... is there a way to use $(this) for handling that or do I have to come up with some other way to find the specific select I've chosen?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Thanks for the help - I managed to get it working. I understand my circumstance is very specific, but here's the code if it helps anyone else...</p>
  
  <p>First - via CSS I use colors to hide the form fields (same bg color as table - emulating an MS Excel look). The font color for the input field showing the datepicker is using this same color to prevent any text being seen (though if seen it's only a flicker before the field is hidden).</p>
  
  <p>In my template I modified the cell as below:</p>
  
  <pre><code>&lt;td&gt;&lt;select id="f${FormCount}_PeriodWorked[]" name="PeriodWorked" class="periodworked add-date"&gt;
                  &lt;option value="month"&gt;Month&lt;/option&gt;
                  &lt;option value="annual"&gt;Annual&lt;/option&gt;
                  &lt;option value="date" class="datepick"&gt;Date&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;input name="tempDatePicker" type="text" size="1" class="datepicker for-option" style="display:none; color: #EFEFEF;" /&gt;&lt;/td&gt;
  </code></pre>
  
  <p>In my main page I had to do a few 'funny' things. Here's the code:</p>
  
  <pre><code>$("select.add-date").live("change", function () {
      if ($(this).val() == "date") {
          //alert("In... now how to throw date picker....");         
          $(this).parents('td').find('input.datepicker').show();
          $(this).parents('td').find('input.datepicker').datepicker({
              onSelect: function (dateText, inst) {
                  var opt = $('&lt;option /&gt;').attr('value', dateText).attr('selected', 'selected').text(dateText);
                  var select = $(this).parents('td').find('select.add-date');
                  // NOTE: ommitted code to check if the date is already in the select     
                  $(select).append(opt);
              }
          }).focus();
      } else {
          $(this).parents('td').find('input.datepicker').hide();
      }
  });
  
  $('input.datepicker.for-option').live('blur', function (dateText, inst) {     
      $(this).hide(); 
  });
  </code></pre>
  
  <p>You will notice I've added the datepicker to the input within the live/change function. For some reason this is the only way it would work (opposed to placing the datepicker outside of the live). This also allowed me to use the onSelect method which pulled the chosen value from the calendar properly where as the blur wasn't retrieving the value and returned blank results, for whatever reason.</p>
  
  <p>My blur method simply hides the input field containing the calendar.</p>
  
  <p>This all works fine - but in my case I am adding many fields dynamically by copying the first row of a table and appending it to the existing table. Everything worked fine unless you use the datepicker within that row. At that point a class and id is assigned to the input object of the datepicker, which is then copied, and screws everything up. To fix this I added a method to my insertRow function to basically drop the insert and re-write it. God I hope that makes sense... code:</p>
  
  <pre><code>    function addLines(formNum, lines) {
          for (var l = 0; l &lt; lines; l++) {
              var table = document.getElementById("formTable_" + formNum);
              var rowCount = table.rows.length;
              var row = table.insertRow(rowCount);
  
              var colCount = table.rows[0].cells.length;
  
              for (var i = 0; i &lt; colCount; i++) {
                  var newcell = row.insertCell(i);
  
                  if (table.rows[1].cells[i].innerHTML.search('name="PeriodWorked"') != -1) {
                      newcell.innerHTML = table.rows[1].cells[i].innerHTML.substr(0, table.rows[1].cells[i].innerHTML.search("&lt;input"));
                      newcell.innerHTML = newcell.innerHTML +
                          '&lt;input name="tempDatePicker" type="text" size="1" class="datepicker for-option" style="display:none; color: #EFEFEF;" /&gt;';
                  } else {
                      newcell.innerHTML = (table.rows[1].cells[i].innerHTML);//.replace(" hasDatepicker", "");
                  }
  
                  //newcell.childNodes[0].id = "f" + formNum + "_" + newcell.childNodes + (1 + parseInt(newcell.childNodes[0].id.substr(newcell.childNodes[0].id.lastIndexOf("_") + 1));
  
                  switch (newcell.childNodes[0].type) {
                      case "text":
                          newcell.childNodes[0].value = "";
                          break;
                      case "checkbox":
                          newcell.childNodes[0].checked = false;
                          break;
                      case "select-one":
                          newcell.childNodes[0].selectedIndex = 0;
                          //resetDatePicker();
                          break;
  //                  default:
  //                      newcell.innerHTML = "";
  //                      break;
                  }
              }
          }
      }
  </code></pre>
  
  <p>Again - I appreciate the help!</p>