ASP.NET MVC 5 - Time Picker Plugin

In most of the scenarios, time is usually an auto-generated component of the product but occasionally, there comes a situation where time input is required from the end-user. For such scenarios, there is a very simple and interactive jQuery plugin Bootstrap Time Picker available. This plugin adds interactivity to the end-user choice of providing time input.

Today, I shall be demonstrating integration and basic usage of the Bootstrap Time Picker jQuery plugin in ASP.NET MVC5 platform.

Prerequisites

Following are some prerequisites before you proceed any further in this tutorial.

1. Knowledge of ASP.NET MVC5.
2. Knowledge of HTML.
3. Knowledge of JavaScript.
4. Knowledge of Bootstrap.
5. Knowledge of Jquery.
6. Knowledge of C# Programming.

The running working source code solution for this article is being developed in Microsoft Visual Studio 2017 Professional.

Let's begin now.

Step 1

Create a new MVC web project and name it "MvcTimePicker".  

Step 2

Make changes to the "Views->Shared->_Layout.cshtml" file according to your business requirements.

Step 3

Now, create a new "Models\TimerViewModel.cs" file and add relevant properties for this model.

 

...

    /// <summary>
    /// Timer view model class.
    /// </summary>
    public class TimerViewModel
    {
        ... 
        
        /// <summary>
        /// Gets or sets the HTML content property.
        /// </summary>
        [Required]
        [Display(Name = "Time")]
        public string Timer { get; set; }

        ...
    }

...

 

In the above code, I have created my view model which I will attach to my view. Here, I have created string type Timer property which will capture time input from the end-user.

Step 4

Create a new "Controllers\TimerController.cs" file and code logic to format time.

Step 5

Now, create a view "Views\Timer\Index.cshtml" file and add your code for time picker page in order to get the input from the end-user.

 

...

         <div class="input-group">
              <span class="input-group-addon">Time</span>
              <input id="timerId" type='text' class="form-control text-center" placeholder="Time" readonly="readonly" />
              <span class="input-group-addon">
                  <span class="fa fa-clock-o"></span>
              </span>
          </div>

...

 

In the above code, I have created a simple view for taking time input from the end-user via Bootstrap Time Picker Jquery plugin.

Step 6

Create "Scripts\script-custom-timepicker.js" file and add the code to integrate the jquery time picker plugin.

 

$(document).ready(function ()
{
    ...

    var timerVal = moment().format('hh:mm A');

    ...

    $('#timerId').timepicker(
    {
            template: 'dropdown',
            minuteStep: 1,
            secondStep: 1,
            showMeridian: true,
            defaultTime: timerVal
   });

   ...  
   
});

 

In the above code, I have created basic Bootstrap Time Picker JQuery plugin settings to integrate the plugin with asp.net mvc platform.

Step 7

Now, execute the project and you will be able to see the following in action.

Conclusion

In this article, we learned how to integrate Bootstrap Time Picker jQuery plugin with ASP.NET MVC5 platform. Also, we looked into the basic usage of the time picker plugin and learned to take time input from end-user and apply proper date/time format to the provided time input.