37 JQuery Time Picker

1. Download the time picker plugin

   • Browse to the JQuery TimePicker Website
   • Click on the Download link in the top right corner of the web page
   • Uncompress the downloaded file
   • Drag and drop the jquery.timepicker.css file to the /Content/ folder in your project
   • Drag and drop jquery.timepicker.js file to the /Scripts/ folder in your project

2. Add the css and js files to the bundles

   In the /App_Start/BundleConfig.cs file, add the following files to the RegisterBundles method. The site.css file has to be the last in the list.

   bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery.timepicker.js",
            "~/Scripts/jquery.unobtrusive-ajax.js"
            ));
   
   bundles.Add(new StyleBundle("~/Content/css").Include(
          "~/Content/bootstrap.css",
          "~/Content/jquery.timepicker.css",
          "~/Content/site.css"
          ));

3. Add the time picker jquery code to views

   Locate the scripts section at the end of the view, then add the code after TimePicket comment. In case the script section is missing, you may add one as follows.

   @section Scripts {
      @Scripts.Render("~/bundles/jqueryval")
   
      // TimePicker
      <script type="text/javascript">
        $('#StartTime').timepicker({ 'step': 15, 'timeFormat': 'H:i' });
      </script>
   }

   The #StartTime corresponds to the name of property in the EditorFor, by default it is also the id of the input.
   To display the time correctly, make sure your property in the view model is decorated with annotations:

   [DisplayFormat(DataFormatString = "{0:hh\\:mm}", ApplyFormatInEditMode = true)]
   [Display(Name = "Start Time")]
   public TimeSpan StartTime { get; set; }

   Note the backslshes in the time format; they are used to escape the colon character.

4. Examples of usage: See the SchoolWebApp on GitHub
   /Department/Create
   /Department/Edit

5. References
   Documentation
   Examples