title: TimePicker in MVC
body: <p>Since jQuery datepicker has no time to select, I used the following TimeSpan code which returned two dropdownlists for hours (0-23) and minutes (0-59).  This is working fine.  However, I need 12-hour format with AM/PM dropdownlist.</p>
  
  <pre><code> @model TimeSpan
  
  
  @Html.DropDownList("hours", Enumerable.Range(0, 24)
                         .Select(i =&gt; new SelectListItem
                             {
                               Value = i.ToString(),
                               Text = i.ToString(), 
                 //Selected = (Model.Hours &gt; 12 ? Model.Hours - 12 : Model.Hours) == i
                               Selected = Model.Hours == i
                             }
                    ))&amp;nbsp;
  
  @Html.DropDownList("minutes", Enumerable.Range(0, 60)
                         .Select(j =&gt; new SelectListItem
                             {
                               Value = j.ToString(),
                               Text = j.ToString(), 
                               Selected=Model.Minutes == j
                             }
                    ))
  </code></pre>
  
  <p>I added the following code to display AM/PM dropdownlist. However, I need to modify the code to display 12-hour format with AM/PM dropdownlist:</p>
  
  <pre><code>@Html.DropDownList("ampm",  Enumerable.Range(0,2)
     .Select(t =&gt;  new SelectListItem
              {
                Value = t.ToString(),
                Text = (t == 0 ? "AM" : "PM"),                       
                Selected = (Model.Hours &gt; 11 ? 1 : 0) == t
              }  
            ))   
  </code></pre>
  
  <p>I need help modifying the below TimeBinder class for 12 hour format with AM/PM dropdownlist.  </p>
  
  <pre><code>public class TimeBinder : IModelBinder
      {         
          object IModelBinder.BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
          {            
              //Ensure there's incoming data
              //*************************
              //*** Validate "HOURS"  ***
              //*************************
              var hoursKey = bindingContext.ModelName; //key = EODTime
              var hoursValueProviderResult = bindingContext.ValueProvider.GetValue(hoursKey + ".hours"); //valueProviderResult = {15} (for selection of 15:10); RawValue has array of 15           
  
                  if ((hoursValueProviderResult == null) ||
                     string.IsNullOrEmpty(hoursValueProviderResult.AttemptedValue))
                  {
                      return null;
                  }
  
                  //Preserve it in case we need to redisplay the form
                  bindingContext.ModelState.SetModelValue(hoursKey, hoursValueProviderResult);
  
                  //Parse
                  var hours = ((string[])hoursValueProviderResult.RawValue)[0];
  
                  //**************************
                  //*** Validate "MINUTES" *** 
                  //**************************          
                  var minuteKey = bindingContext.ModelName; //key = EODTime
                  var minutesValueProviderResult = bindingContext.ValueProvider.GetValue(minuteKey + ".minutes"); 
  
                  //valueProviderResult = {10} (for selection of 15:10); RawValue has array of 10           
  
                  if ((minutesValueProviderResult == null) ||
                     string.IsNullOrEmpty(minutesValueProviderResult.AttemptedValue))
                  {
                      return null;
                  }
  
                  //Preserve it in case we need to redisplay the form
                  bindingContext.ModelState.SetModelValue(minuteKey, minutesValueProviderResult);
  
                  //Parse           
                  var minutes = ((string[])minutesValueProviderResult.RawValue)[0];
  
  
                  //A TimeSpan represents the time elapsed sice midnight
                  var time = new TimeSpan(Convert.ToInt32(hours), Convert.ToInt32(minutes), 0);
  
                  return time;
  
              }  
         } 
  </code></pre>