BForms contains range controls for date, datetime, time and number that get rendered by using BsControlAttribute in combination with BsRangeFor helper.

Range helper

In order to render range inputs you will need to use the @Html.BsRangeFor helper extension and decorate your model property of type BsRange with BsControlAttribute and DisplayAttribute.

All the text inputs rendered by @Html.BsRangeFor support placeholder and description tooltip. The placeholder text is extracted from the Prompt property of the Display attribute, while the description tooltip uses the Description property.

For date, datetime and time range the model property should be of type BsRange<DateTime?> and for the number range control, the T should be a nullable type like int? or double?.

Range Extensions

public static MvcHtmlString BsRangeFor<TModel, TKey>(
	this HtmlHelper<TModel> htmlHelper,
	Expression<Func<TModel, BsRange<TKey>>> expression)
	
public static MvcHtmlString BsRangeFor<TModel, TKey>(
	this HtmlHelper<TModel> htmlHelper,
	Expression<Func<TModel, BsRange<TKey>>> expression, 
	object htmlAttributes)
	
public static MvcHtmlString BsRangeFor<TModel, TKey>(
	this HtmlHelper<TModel> htmlHelper,
	Expression<Func<TModel, BsRange<TKey>>> expression, 
	object htmlAttributes, 
	object dataOptions)
		
public static MvcHtmlString BsRangeFor<TModel, TKey>(
	this HtmlHelper<TModel> htmlHelper,
	Expression<Func<TModel, BsRange<TKey>>> expression, 
	IDictionary<string, object> htmlAttributes,
	IDictionary<string, object> dataOptions)

		

Number Range

In order to render a range input of type number you will need to use the @Html.BsRangeFor helper extension and decorate your model property of type BsRange<int> with [BsControl(BsControlType.NumberRange)]. Using BsRange<int> will enforce number validation on both client and server side.

Example

Model

public class RegisterModel
{
        [Display(Name = "Choose Interval")]
        [BsControl(BsControlType.NumberRange)]
        public BsRange<int> Interval { get; set; }
    ...
}

View

  <div class="form-group">
    @Html.BsLabelFor(m => m.Interval)
    <div class="input-group">
      @Html.BsGlyphiconAddon(Glyphicon.Time)
      @Html.BsRangeFor(m => m.Interval)
      @Html.BsValidationFor(m => m.Interval)
    </div>
  </div>

Example Initialization

Interval = new BsRange<int>
{
    From = new BsRangeItem<int>
    {
        ItemValue = 10,
        MinValue = 0,
        MaxValue = 24,
        Display = "From"
    },
    To = new BsRangeItem<int>
    {
        ItemValue = 18,
        MinValue = 0,
        MaxValue = 24,
        Display = "To"
    },
    TextValue = "0-24"
}

Date and Datetime Range Picker

In order to render a range input of type date or datetime you will need to use the @Html.BsRangeFor helper extension and decorate your model property of type BsRange with [BsControl(BsControlType.DatePickerRange)] or BsControlType.DateTimePickerRange. Using BsRange<DateTime?> will enforce datetime validation on both client and server side using the specified culture.

Example Date

Model Date

public class RegisterModel
{
    [Display(Name = "Interval", Prompt = "Choose dates")]
    [BsControl(BsControlType.DatePickerRange, IsReadonly = true)]
    public BsRange<DateTime?> Interval { get; set; }
    
    ...
}

Example DateTime

Model DateTime

public class RegisterModel
{
    [Display(Name = "Interval", Prompt = "Choose dates")]
    [BsControl(BsControlType.DateTimePickerRange, IsReadonly = true)]
    public BsRange<DateTime> Interval { get; set; }
    
    ...
}

View

  <div class="form-group">
    @Html.BsLabelFor(m => m.Interval)
    <div class="input-group">
      @Html.BsGlyphiconAddon(Glyphicon.Calendar)
      @Html.BsRangeFor(m => m.Interval)
      @Html.BsValidationFor(m => m.Interval)
    </div>
  </div>

Time Range Picker

In order to render a range input of type time you will need to use the @Html.BsRangeFor helper extension and decorate your model property of type BsRange with [BsControl(BsControlType.TimePickerRange)]. Using BsRange<DateTime?> will enforce time validation on both client and server side.

Example

Model

public class RegisterModel
{
    [Display(Name = "Interval", Prompt = "Time range")]
    [BsControl(BsControlType.TimePickerRange, IsReadonly = true)]
    public BsRange<DateTime?> Interval { get; set; }
    
    ...
}

View

  <div class="form-group">
    @Html.BsLabelFor(m => m.Interval)
    <div class="input-group">
      @Html.BsGlyphiconAddon(Glyphicon.Calendar)
      @Html.BsRangeFor(m => m.Interval)
      @Html.BsValidationFor(m => m.Interval)
    </div>
  </div>