0

jQuery datepicker では選択する時間がないため、時間 (0 ～ 23) と分 (0 ～ 59) の 2 つのドロップダウンリストを返す次の TimeSpan コードを使用しました。これはうまくいっています。ただし、AM/PM ドロップダウン リストを使用した 12 時間形式が必要です。

 @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
                           }
                  ))

AM/PM ドロップダウンリストを表示するために、次のコードを追加しました。ただし、AM/PM ドロップダウンリストで 12 時間形式を表示するようにコードを変更する必要があります。

@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
            }  
          ))

AM/PM ドロップダウンリストを使用して、以下の TimeBinder クラスを 12 時間形式に変更するのに助けが必要です。 

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;

            }  
       }
4

1 に答える 1

3

以下をご覧ください: http://trentrichardson.com/examples/timepicker/

いつも使っています。シンプルですが、jQueryUI を拡張するので強力なので、テーマ ローラー、ローカリゼーションなどが魅力のように機能します。

于 2012-08-21T06:39:37.590 に答える