Question

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.

 @model TimeSpan


@Html.DropDownList("hours", Enumerable.Range(0, 24)
                       .Select(i => new SelectListItem
                           {
                             Value = i.ToString(),
                             Text = i.ToString(), 
               //Selected = (Model.Hours > 12 ? Model.Hours - 12 : Model.Hours) == i
                             Selected = Model.Hours == i
                           }
                  )) 

@Html.DropDownList("minutes", Enumerable.Range(0, 60)
                       .Select(j => new SelectListItem
                           {
                             Value = j.ToString(),
                             Text = j.ToString(), 
                             Selected=Model.Minutes == j
                           }
                  ))

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:

@Html.DropDownList("ampm",  Enumerable.Range(0,2)
   .Select(t =>  new SelectListItem
            {
              Value = t.ToString(),
              Text = (t == 0 ? "AM" : "PM"),                       
              Selected = (Model.Hours > 11 ? 1 : 0) == t
            }  
          ))   

I need help modifying the below TimeBinder class for 12 hour format with AM/PM dropdownlist.

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;

            }  
       } 

Answer 1

Please look at the following: http://trentrichardson.com/examples/timepicker/

I use it all the time. It’s simple, yet powerful as it extends jQueryUI so the theme roller, localization etc. works like a charm.