Timepicker: Save in different format than parseFormat

[Guillermo]

Good morning, in our project our server expects time values to be a string in 24-hour format (HH:mm:ss).However we want to use timepickers that display 12-hour format with AM/PM (hh:mm tt) to the end user. Right now I am using:

$('.timePicker').kendoTimePicker(
{  
      format: "hh:mm tt"
      parseFormats: ["HH:mm:ss"]
});

and this works fine in terms of displaying the correct value from the database. However the problem is that the value of the field is saving back out to 12-hour format (hh:mm tt) instead of 24(HH:mm:ss).  

What can I do to display 12-hour format but save 24-hour?

Thank you, 

Guillermo Sanchez.

[Guillermo]

Hello, anyone from Telerik?

[Alexander Popov]

Hi Guillermo,

Could you please share more details about how the data is sent to the server? Ideally you could provide a small runnable project where the issue is reproduced. This would help us pinpoint the exact reason for this behavior.

Regards,
Alexander Popov
Telerik

[Guillermo]

Hi, this is part of the project I am working on 

Model:
namespace Nephos.Model
{   
    public enum ServicesUserRole
    {
        [Description("No role assigned")]
        NoRoleAssigned = 0,
        [Description("Administrator")]
        Administrator = 1,
        [Description("Technician")]
        Technician = 2
    }

    public class ServicesUser : EntityTenantBase<ServicesUser>
    {
        private ICollection<Blob> _certificates;

        public virtual string Notes { get; set; }
        public virtual ServicesUserRole Role { get; set; }
        public virtual User User { get; set; }

        public virtual TimeSpan? LunchStartTime { get; set; }
        public virtual TimeSpan? LunchEndTime { get; set; }

        public virtual TimeSpan? StartTimeMon { get; set; }
        public virtual TimeSpan? StartTimeTue { get; set; }
        public virtual TimeSpan? StartTimeWed { get; set; }
        public virtual TimeSpan? StartTimeThu { get; set; }
        public virtual TimeSpan? StartTimeFri { get; set; }
        public virtual TimeSpan? StartTimeSat { get; set; }
        public virtual TimeSpan? StartTimeSun { get; set; }

        public virtual TimeSpan? EndTimeMon { get; set; }
        public virtual TimeSpan? EndTimeTue { get; set; }
        public virtual TimeSpan? EndTimeWed { get; set; }
        public virtual TimeSpan? EndTimeThu { get; set; }
        public virtual TimeSpan? EndTimeFri { get; set; }
        public virtual TimeSpan? EndTimeSat { get; set; }
        public virtual TimeSpan? EndTimeSun { get; set; }

        /// <summary>
        /// This is a virtual field that exposes the switching between enable and disable StartTimeMon, EndTimeMon fields as a toggle (so that it can be represented as a Check Box in a UI).
        /// </summary>
        public virtual bool IsWorkingOnMonday
        {
            get
            {
                return (null != StartTimeMon) && (null != EndTimeMon);
            }
            set
            {
                if (value) return;
                StartTimeMon = null;
                EndTimeMon = null;
            }
        }

        /// <summary>
        /// This is a virtual field that exposes the switching between enable and disable StartTimeTue, EndTimeTue fields as a toggle (so that it can be represented as a Check Box in a UI).
        /// </summary>
        public virtual bool IsWorkingOnTuesday
        {
            get
            {
                return (null != StartTimeTue) && (null != EndTimeTue);
            }
            set
            {
                if (value) return;
                StartTimeTue = null;
                EndTimeTue = null;
            }
        }

        /// <summary>
        /// This is a virtual field that exposes the switching between enable and disable StartTimeWed, EndTimeWed fields as a toggle (so that it can be represented as a Check Box in a UI).
        /// </summary>
        public virtual bool IsWorkingOnWednesday
        {
            get
            {
                return (null != StartTimeWed) && (null != EndTimeWed);
            }
            set
            {
                if (value) return;
                StartTimeWed = null;
                EndTimeWed = null;
            }
        }

        /// <summary>
        /// This is a virtual field that exposes the switching between enable and disable StartTimeThu, EndTimeThu fields as a toggle (so that it can be represented as a Check Box in a UI).
        /// </summary>
        public virtual bool IsWorkingOnThursday
        {
            get
            {
                return (null != StartTimeThu) && (null != EndTimeThu);
            }
            set
            {
                if (value) return;
                StartTimeThu = null;
                EndTimeThu = null;
            }
        }

        /// <summary>
        /// This is a virtual field that exposes the switching between enable and disable StartTimeFri, EndTimeFri fields as a toggle (so that it can be represented as a Check Box in a UI).
        /// </summary>
        public virtual bool IsWorkingOnFriday
        {
            get
            {
                return (null != StartTimeFri) && (null != EndTimeFri);
            }
            set
            {
                if (value) return;
                StartTimeFri = null;
                EndTimeFri = null;
            }
        }

        /// <summary>
        /// This is a virtual field that exposes the switching between enable and disable StartTimeSat, EndTimeSat fields as a toggle (so that it can be represented as a Check Box in a UI).
        /// </summary>
        public virtual bool IsWorkingOnSaturday
        {
            get
            {
                return (null != StartTimeSat) && (null != EndTimeSat);
            }
            set
            {
                if (value) return;
                StartTimeSat = null;
                EndTimeSat = null;
            }
        }

        /// <summary>
        /// This is a virtual field that exposes the switching between enable and disable StartTimeSunday, EndTimeSunday fields as a toggle (so that it can be represented as a Check Box in a UI).
        /// </summary>
        public virtual bool IsWorkingOnSunday
        {
            get
            {
                return (null != StartTimeSun) && (null != EndTimeSun);
            }
            set
            {
                if (value) return;
                StartTimeSun = null;
                EndTimeSun = null;
            }
        }

        /// <summary>
        /// This is a virtual field that exposes the switching between enable and disable LunchStartTime, LunchEndTime fields as a toggle (so that it can be represented as a Check Box in a UI).
        /// </summary>
        public virtual bool IsLunchTimeAvail
        {
            get
            {
                return (null != LunchStartTime) && (null != LunchEndTime);
            }
            set
            {
                if (value) return;
                LunchStartTime = null;
                LunchEndTime = null;
            }
    }

        public virtual ICollection<Blob> Certificates
        {
            get { return _certificates ?? (_certificates = new List<Blob>()); }
            set { _certificates = value; }
        }
    }
}

(part of)Controller:
        // POST: /ServicesUser/Edit/5
        [HttpPost]
        public ActionResult Edit(ServicesUser servicesUserModel, FormCollection collection, IEnumerable<HttpPostedFileBase> newAttachments)
        {
            if (!ModelState.IsValid)
            {
                return RedirectToAction("Edit", new { servicesUserId = servicesUserModel.Id });
            }

            var user = _session.Get<User>(servicesUserModel.User.Id);
            if (user == null)
            {
                LoggingHelper.Error(string.Format("Could not find user {0}.", servicesUserModel.User.Id), TenantID, ProductUserId);
                throw SDataErrors.EntityNotFound();
            }

            var servicesUser = _session.Get<ServicesUser>(servicesUserModel.Id);
            if (servicesUser == null)
            {
                LoggingHelper.Error(string.Format("Could not find services user {0}.", servicesUserModel.Id), TenantID, ProductUserId);
                throw SDataErrors.EntityNotFound();
            }

            //assign selected value from dropdownlist to servicesUser's role
            servicesUserModel.Role = MvcHelperExtensions.ParseEnum<ServicesUserRole>(collection["roleDropDown"]);

            //assign user's phone from view model
            user.Phone = servicesUserModel.User.Phone;

            CopyServiceUserEditableProperties(servicesUserModel, servicesUser);
            CopyAttachmentsFromSourceToTarget(servicesUserModel, servicesUser);

            var blobService = _blobService ?? new BlobService(_session, TenantID, false);
            RemoveDeletedAttachments(blobService, servicesUserModel, servicesUser);
            UploadAttachments(blobService, servicesUser, newAttachments);

            servicesUser.IsLunchTimeAvail = servicesUserModel.IsLunchTimeAvail;
            servicesUser.IsWorkingOnMonday = servicesUserModel.IsWorkingOnMonday;
            servicesUser.IsWorkingOnTuesday = servicesUserModel.IsWorkingOnTuesday;
            servicesUser.IsWorkingOnWednesday = servicesUserModel.IsWorkingOnWednesday;
            servicesUser.IsWorkingOnThursday = servicesUserModel.IsWorkingOnThursday;
            servicesUser.IsWorkingOnFriday = servicesUserModel.IsWorkingOnFriday;
            servicesUser.IsWorkingOnSaturday = servicesUserModel.IsWorkingOnSaturday;
            servicesUser.IsWorkingOnSunday = servicesUserModel.IsWorkingOnSunday;

            servicesUser.LunchStartTime = servicesUserModel.LunchStartTime;
            servicesUser.StartTimeMon = servicesUserModel.StartTimeMon;
            servicesUser.StartTimeTue = servicesUserModel.StartTimeTue;
            servicesUser.StartTimeWed = servicesUserModel.StartTimeWed;
            servicesUser.StartTimeThu = servicesUserModel.StartTimeThu;
            servicesUser.StartTimeFri = servicesUserModel.StartTimeFri;
            servicesUser.StartTimeSat = servicesUserModel.StartTimeSat;
            servicesUser.StartTimeSun = servicesUserModel.StartTimeSun;

            servicesUser.LunchEndTime = servicesUserModel.LunchEndTime;
            servicesUser.EndTimeMon = servicesUserModel.EndTimeMon;
            servicesUser.EndTimeTue = servicesUserModel.EndTimeTue;
            servicesUser.EndTimeWed = servicesUserModel.EndTimeWed;
            servicesUser.EndTimeThu = servicesUserModel.EndTimeThu;
            servicesUser.EndTimeFri = servicesUserModel.EndTimeFri;
            servicesUser.EndTimeSat = servicesUserModel.EndTimeSat;
            servicesUser.EndTimeSun = servicesUserModel.EndTimeSun;

            _session.Transaction.Begin();
            _session.SaveOrUpdate(servicesUser);
            _session.SaveOrUpdate(user);
            _session.Transaction.Commit();

            AddSuccessMessage("Changes saved", true);
            return RedirectToAction("Detail", new { servicesUserId = servicesUserModel.Id });
        }

View:
@using Nephos.Model
@model Nephos.Model.ServicesUser

@{
    ViewBag.Title = "Edit " + @Model.User.LastName + " " + @Model.User.FirstName;
}

@using (Html.BeginForm("Edit", "ServicesUser", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    HtmlHelper.ClientValidationEnabled = true;
    HtmlHelper.UnobtrusiveJavaScriptEnabled = true; 
    @Html.HiddenFor(model => model.Id)
    @Html.HiddenFor(model => model.TenantId) 
    @Html.HiddenFor(model => model.CreatedOn)
    @Html.HiddenFor(model => model.UpdatedOn, new { Id = "updatedOnId" })
    @Html.HiddenFor(model => model.User.Id)   
    <div class="contentHeader">
        <div class="hyperlink">
            <div class="left">
                <img src="/Content/images/BackArrowHyperlink.png" alt="">
            </div>
            <span class="left">Back to</span>
            <a href="/ServicesUser/List">&nbsp;Manage users</a>
        </div>
        <div class="clear"></div>
        <div class="full">
            <div class="title left">User details</div>
        </div>
    <div class="clear"></div>
    <div class="divisionLine"></div>
    </div>
    <div class="SUGeneralInfo">
          <div class="leftHalfForm">
            <div class="infoRow">
                <div class="label">First name:</div>
                <div class="inputWidget">
                    <div class="inputWidgetLabel">                     
                    @Html.DisplayFor(model => model.User.FirstName)
                    </div>
                </div>
            </div>
            <div class="clear"></div>
            <div class="infoRow">
                <div class="label">Last name:</div>
                <div class="inputWidget">
                    <div class="inputWidgetLabel">                 
                        @Html.DisplayFor(model => model.User.LastName)</div>
                </div>
            </div>
            <div class="clear"></div>
            <div class="infoRow">
                <div class="label">Email:</div>
                <div class="inputWidget"><div class="inputWidgetLabel">@Html.DisplayFor(model => model.User.UM_PrimaryEmail)
                       </div>
                   </div>
            </div>
            <div class="clear"></div>
            <div class="infoRow">
                <div class="label">Role:</div>
                <div class="inputWidget">
                    @Html.EnumDropDownListFor(model => model.Role, new { @Id = "roleDropDown", @Name = "roleDropDown" })
                </div>
            </div>
            <div class="clear"></div>
            <div class="infoRow">
                <div class="label">Phone number:</div>
                <div class="inputWidget">
                    @Html.TextBoxFor(model => model.User.Phone, new { maxlength = 30 }) 
                    @Html.ValidationMessageFor(model => model.User.Phone)
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="rightHalfForm">
            <div class="infoRow">
                <div class="label">Certificates:</div>
                <div id="certificates" class="inputWidget">
                    @Html.EditorFor(m => Model.Certificates)
                    @for (int i = 0; i < 5; i++)
                    {
                        <div class="attachment-entry-detail hidden">
                            <div class="editor-field">
                                <div class="attachment-button">
                                    <div class="attachment-button-image-new"></div>
                                    <div class="attachment-name-new" id="attachment-name"></div>
                                    <div class="attachment-date"></div>
                                    <div class="attachment-entry-remove"></div>
                                </div>
                            </div>
                        </div>
                    }
                    <div class="clear"></div> 
                    <div class="add-attachment" id="addAttachmentButton">
                        <input type="file" id="attachmentUpload" name="newAttachments" accept="image/*,application/pdf" /> 
                    </div>
                </div>   
            </div>
            <div class="clear"></div>
            <div class="infoRow" id="notes">
                <div class="label">Notes:</div>
                <div class="inputWidget">
                    @Html.TextAreaFor(model => model.Notes, new { maxlength = 1000, @cols = "44", @rows = "4" })
                    <div class="lastupdatedon" id="lastupdatedon"></div>
                </div>              
            </div>
        </div>
    </div>

    <div class="sectionHeader availabilityGrid">Availability</div>
    
    <div class="WOGeneralInfo">
        <div class="leftHalfForm avail">
            
            <div class="infoRow lunchTime" id="lunchTime">
                <div class="inputWidget checklist">
                    @Html.CheckBoxFor(model => model.IsLunchTimeAvail, new{ @Id = "isLunchTimeAvail" , style="width: 15px !important;", @checked=Model.IsLunchTimeAvail })
                </div>
                <div id="lunchTimeLabel" class="labelAvail lunchTime">Lunch Time</div>
                <div class="inputWidget dropDown">
                    <input id="lunchStartTime" name="LunchStartTime" value='@Model.LunchStartTime'/>
                </div>
                <div class="inputWidget dropDown lunchEndTime">
                    <input id="lunchEndTime" name="LunchEndTime" value='@Model.LunchEndTime'/>
                </div>
                <img class="availEditDash" src="~/Content/images/dash.png" alt="dash"/>
            </div>
            
            <div class="clear"></div>
            
            <div class="infoRow title" id="lunchTime">
                <div class="label availDay">Day</div>
                <div class="label availTimeStart">Start time</div>
                <div class="label availTimeEnd">End time</div>          
            </div>
            
            <div class="clear"></div>

            <div class="infoRow odd" id="mondayAvail">
                <div class="inputWidget checklist">
                    @Html.CheckBoxFor(model => model.IsWorkingOnMonday, new{ @Id = "isWorkingMonday", style="width: 15px !important;", @checked=Model.IsWorkingOnMonday })
                </div>
                <div id="mondayTimeLabel" class="labelAvail">Monday</div>
                <div class="inputWidget dropDown startTime">
                    <input id="startTimeMon" name="StartTimeMon" value='@Model.StartTimeMon'/>    
                </div>
                <div class="inputWidget dropDown">
                    <input id="endTimeMon" name="EndTimeMon" value='@Model.EndTimeMon'/>    
                </div>                 
            </div>
            
            <div class="clear"></div>

            <div class="infoRow even" id="tuesdayAvail">
                <div class="inputWidget checklist">
                    @Html.CheckBoxFor(model => model.IsWorkingOnTuesday, new{ @Id = "isWorkingTuesday", style="width: 15px !important;", @checked=Model.IsWorkingOnTuesday })
                </div>
                <div id="tuesdayTimeLabel" class="labelAvail">Tuesday</div>
                <div class="inputWidget dropDown startTime">
                    <input id="startTimeTue" name="StartTimeTue" value='@Model.StartTimeTue'/>    
                </div>
                <div class="inputWidget dropDown">
                    <input id="endTimeTue" name="EndTimeTue" value='@Model.EndTimeTue'/>
                </div>                 
            </div>
            
            <div class="clear"></div>

            <div class="infoRow odd" id="wednesdayAvail">
                <div class="inputWidget checklist">
                    @Html.CheckBoxFor(model => model.IsWorkingOnWednesday, new{ @Id = "isWorkingWednesday", style="width: 15px !important;", @checked=Model.IsWorkingOnWednesday })
                </div>
                <div id="wednesdayTimeLabel" class="labelAvail">Wednesday</div>
                <div class="inputWidget dropDown startTime">
                    <input id="startTimeWed" name="StartTimeWed" value='@Model.StartTimeWed'/>
                </div>
                <div class="inputWidget dropDown">
                    <input id="endTimeWed" name="EndTimeWed" value='@Model.EndTimeWed'/>
                </div>                 
            </div>
            
            <div class="clear"></div>

            <div class="infoRow even" id="thursdayAvail">
                <div class="inputWidget checklist">
                    @Html.CheckBoxFor(model => model.IsWorkingOnThursday, new{ @Id = "isWorkingThursday", style="width: 15px !important;", @checked=Model.IsWorkingOnThursday })
                </div>
                <div id="thursdayTimeLabel" class="labelAvail">Thursday</div>
                <div class="inputWidget dropDown startTime">
                    <input id="startTimeThu" name="StartTimeThu" value='@Model.StartTimeThu'/>
                </div>
                <div class="inputWidget dropDown">
                    <input id="endTimeThu" name="EndTimeThu" value='@Model.EndTimeThu'/>
                </div>                 
            </div>
            
            <div class="clear"></div>

            <div class="infoRow odd" id="fridayAvail">
                <div class="inputWidget checklist ">
                    @Html.CheckBoxFor(model => model.IsWorkingOnFriday, new{ @Id = "isWorkingFriday", style="width: 15px !important;", @checked=Model.IsWorkingOnFriday })
                </div>
                <div id="fridayTimeLabel" class="labelAvail">Friday</div>
                <div class="inputWidget dropDown startTime">
                    <input id="startTimeFri" name="StartTimeFri" value='@Model.StartTimeFri'/>
                </div>
                <div class="inputWidget dropDown">
                    <input id="endTimeFri" name="EndTimeFri" value='@Model.EndTimeFri'/>
                </div>                 
            </div>
            
            <div class="clear"></div>

            <div class="infoRow even" id="saturdayAvail">
                <div class="inputWidget checklist">
                    @Html.CheckBoxFor(model => model.IsWorkingOnSaturday, new{ @Id = "isWorkingSaturday", style="width: 15px !important;", @checked=Model.IsWorkingOnSaturday })
                </div>
                <div id="saturdayTimeLabel" class="labelAvail">Saturday</div>
                <div class="inputWidget dropDown startTime">
                    <input id="startTimeSat" name="StartTimeSat" value='@Model.StartTimeSat'/>
                </div>
                <div class="inputWidget dropDown">
                    <input id="endTimeSat" name="EndTimeSat" value='@Model.EndTimeSat'/>
                </div>                 
            </div>
            
            <div class="clear"></div>

            <div class="infoRow odd" id="sundayAvail">
                <div class="inputWidget checklist">
                    @Html.CheckBoxFor(model => model.IsWorkingOnSunday, new{ @Id = "isWorkingSunday", style="width: 15px !important;", @checked=Model.IsWorkingOnSunday })
                </div>
                <div id="sundayTimeLabel" class="labelAvail">Sunday</div>
                <div class="inputWidget dropDown startTime">
                    <input id="startTimeSun" name="StartTimeSun" value='@Model.StartTimeSun'/>
                </div>
                <div class="inputWidget dropDown">
                    <input id="endTimeSun" name="EndTimeSun" value='@Model.EndTimeSun'/>
                </div>                 
            </div>
            
            <div class="clear"></div>

        </div>
    </div>

    <div class="footer">
        <div class="footerButton">
            <input class="secondary" type="button" value="Cancel" onclick="window.location.href = '/ServicesUser/Detail?servicesUserId=@Model.Id    '"/>
        </div>
        <div class="footerButton">
            <input class="button" type="submit" value="Save" />
        </div>
    </div>
}

Javascript:
require(['jquery', 'security-helpers', 'kendo.timepicker.min','kendo.dropdownlist.min', 'sdata', 'settings', 'unobtrusive', 'validation', 'grid', 'kendo.grid.min','kendo.upload.min', 'attachments-util', 'domReady!'], function ($) {
    
    var updatedOn = $('#updatedOnId').val();

    //convert UTC time to local time
    $('#lastupdatedon').html("Last modified on " + new Date(updatedOn + " UTC").toLocaleString());

    //Role's dropdownlist animation
    $("#roleDropDown").kendoDropDownList({
        animation: {
            open: {
                effects: "fadeIn",
                duration: 300,
                show: true
            }
        }
    });
    
     setupAttachmentsForEditing("/ServicesUser/ValidateAttachment");
    //Initial values for the weekdays.
    var monCheckedValue = $('#isWorkingMonday:checked').val();
    var tueCheckedValue = $('#isWorkingTuesday:checked').val();
    var wedCheckedValue = $('#isWorkingWednesday:checked').val();
    var thuCheckedValue = $('#isWorkingThursday:checked').val();
    var friCheckedValue = $('#isWorkingFriday:checked').val();
    var satCheckedValue = $('#isWorkingSaturday:checked').val();
    var sunCheckedValue = $('#isWorkingSunday:checked').val();
    var lunchCheckedValue = $('#isLunchTimeAvail:checked').val();

    //Get the initial values for the Start and End times.
    var lunchTimePickerStart = $("#lunchStartTime").kendoTimePicker({
        format: "HH:mm:ss",
        parseFormats: ["HH:mm:ss"]
    }).data("kendoTimePicker");

    var lunchTimePickerEnd = $("#lunchEndTime").kendoTimePicker({
        format: "hh:mm tt",
        parseFormats: ["HH:mm:ss"]
    }).data("kendoTimePicker");

    var monTimePickerStart = $("#startTimeMon").kendoTimePicker({
        format: "hh:mm tt",
        parseFormats: ["HH:mm:ss"],
    }).data("kendoTimePicker");

    var monTimePickerEnd = $("#endTimeMon").kendoTimePicker({
        format:  "hh:mm tt",
        parseFormats: ["HH:mm:ss"],
    }).data("kendoTimePicker");

    var tueTimePickerStart = $("#startTimeTue").kendoTimePicker({
        format: "hh:mm tt",
        parseFormats: ["HH:mm:ss"]
    }).data("kendoTimePicker");

    var tueTimePickerEnd = $("#endTimeTue").kendoTimePicker({
        format: "hh:mm tt",
        parseFormats: ["hh:mm tt"]
    }).data("kendoTimePicker");

    var wedTimePickerStart = $("#startTimeWed").kendoTimePicker({
        format:  "hh:mm tt",
        parseFormats: ["HH:mm:ss"]
    }).data("kendoTimePicker");

    var wedTimePickerEnd = $("#endTimeWed").kendoTimePicker({
        format: "hh:mm tt",
        parseFormats: ["HH:mm:ss"]
    }).data("kendoTimePicker");    

    var thuTimePickerStart = $("#startTimeThu").kendoTimePicker({
        format: "hh:mm tt",
        parseFormats: ["HH:mm:ss"]
    }).data("kendoTimePicker");  

    var thuTimePickerEnd = $("#endTimeThu").kendoTimePicker({
        format:  "hh:mm tt",
        parseFormats: ["HH:mm:ss"]
    }).data("kendoTimePicker");

    var friTimePickerStart = $("#startTimeFri").kendoTimePicker({
        format:  "hh:mm tt",
        parseFormats: ["HH:mm:ss"]
    }).data("kendoTimePicker");

    var friTimePickerEnd = $("#endTimeFri").kendoTimePicker({
        format:  "hh:mm tt",
        parseFormats: ["HH:mm:ss"]
    }).data("kendoTimePicker");

    var satTimePickerStart = $("#startTimeSat").kendoTimePicker({
        format: "hh:mm tt",
        parseFormats: ["HH:mm:ss"]
    }).data("kendoTimePicker");

    var satTimePickerEnd = $("#endTimeSat").kendoTimePicker({
        format: "HH:mm:ss",
        parseFormats: ["HH:mm:ss"]
    }).data("kendoTimePicker");

    var sunTimePickerStart = $("#startTimeSun").kendoTimePicker({
        format:  "hh:mm tt",
        parseFormats: ["HH:mm:ss"]
    }).data("kendoTimePicker");

    var sunTimePickerEnd = $("#endTimeSun").kendoTimePicker({
        format:  "hh:mm tt",
        parseFormats: ["HH:mm:ss"]
    }).data("kendoTimePicker");

    //Enables/disables the week checkboxes.
    if (monCheckedValue) {
        $("#startTimeMon").data("kendoTimePicker").enable(true);
        $("#endTimeMon").data("kendoTimePicker").enable(true);
        
        $("#mondayTimeLabel").removeClass("dayUnavailable");
        
    } else {
        monTimePickerStart.value(null);
        monTimePickerEnd.value(null);

        $("#startTimeMon").data("kendoTimePicker").enable(false);
        $("#endTimeMon").data("kendoTimePicker").enable(false);
        
        $("#mondayTimeLabel").addClass("dayUnavailable");
    }
    
    if (tueCheckedValue) {
        $("#startTimeTue").data("kendoTimePicker").enable(true);
        $("#endTimeTue").data("kendoTimePicker").enable(true);
        
        $("#tuesdayTimeLabel").removeClass("dayUnavailable");

    } else {
        tueTimePickerStart.value(null);
        tueTimePickerEnd.value(null);

        $("#startTimeTue").data("kendoTimePicker").enable(false);
        $("#endTimeTue").data("kendoTimePicker").enable(false);
        
        $("#tuesdayTimeLabel").addClass("dayUnavailable");
    }
    
    if (wedCheckedValue) {
        $("#startTimeWed").data("kendoTimePicker").enable(true);
        $("#endTimeWed").data("kendoTimePicker").enable(true);
        
        $("#wednesdayTimeLabel").removeClass("dayUnavailable");
        
    } else {
        wedTimePickerStart.value(null);
        wedTimePickerEnd.value(null);

        $("#startTimeWed").data("kendoTimePicker").enable(false);
        $("#endTimeWed").data("kendoTimePicker").enable(false);
        
        $("#wednesdayTimeLabel").addClass("dayUnavailable");
    }
    
    if (thuCheckedValue) {
        $("#startTimeThu").data("kendoTimePicker").enable(true);
        $("#endTimeThu").data("kendoTimePicker").enable(true);
        
        $("#thursdayTimeLabel").removeClass("dayUnavailable");
        
    } else {
        thuTimePickerStart.value(null);
        thuTimePickerEnd.value(null);

        $("#startTimeThu").data("kendoTimePicker").enable(false);
        $("#endTimeThu").data("kendoTimePicker").enable(false);
        
        $("#thursdayTimeLabel").addClass("dayUnavailable");
    }
    
    if (friCheckedValue) {
        $("#startTimeFri").data("kendoTimePicker").enable(true);
        $("#endTimeFri").data("kendoTimePicker").enable(true);
        
        $("#fridayTimeLabel").removeClass("dayUnavailable");
        
    } else {
        friTimePickerStart.value(null);
        friTimePickerEnd.value(null);

        $("#startTimeFri").data("kendoTimePicker").enable(false);
        $("#endTimeFri").data("kendoTimePicker").enable(false);
        
        $("#fridayTimeLabel").addClass("dayUnavailable");
    }
    
    if (satCheckedValue) {
        $("#startTimeSat").data("kendoTimePicker").enable(true);
        $("#endTimeSat").data("kendoTimePicker").enable(true);
        
        $("#saturdayTimeLabel").removeClass("dayUnavailable");
        
    } else {
        satTimePickerStart.value(null);
        satTimePickerEnd.value(null);

        $("#startTimeSat").data("kendoTimePicker").enable(false);
        $("#endTimeSat").data("kendoTimePicker").enable(false);
        
        $("#saturdayTimeLabel").addClass("dayUnavailable");
    }
    
    if (sunCheckedValue) {
        $("#startTimeSun").data("kendoTimePicker").enable(true);
        $("#endTimeSun").data("kendoTimePicker").enable(true);
        
        $("#sundayTimeLabel").removeClass("dayUnavailable");
        
    } else {
        sunTimePickerStart.value(null);
        sunTimePickerEnd.value(null);

        $("#startTimeSun").data("kendoTimePicker").enable(false);
        $("#endTimeSun").data("kendoTimePicker").enable(false);
        
        $("#sundayTimeLabel").addClass("dayUnavailable");
    }
    
    if (lunchCheckedValue) {
        $("#lunchStartTime").data("kendoTimePicker").enable(true);
        $("#lunchEndTime").data("kendoTimePicker").enable(true);
        
        $("#lunchTimeLabel").removeClass("dayUnavailable");
        
    } else {
        lunchTimePickerStart.value(null);
        lunchTimePickerEnd.value(null);

        $("#lunchStartTime").data("kendoTimePicker").enable(false);
        $("#lunchEndTime").data("kendoTimePicker").enable(false);
        
        $("#lunchTimeLabel").addClass("dayUnavailable");
    }

    //Gets the click events for the check box.
    $("#isWorkingMonday").click(function () {
        if ($(this).is(':checked')) {

            monTimePickerStart.value("08:00:00");
            monTimePickerEnd.value("17:00:00");

            $("#startTimeMon").data("kendoTimePicker").enable(true);
            $("#endTimeMon").data("kendoTimePicker").enable(true);
            
            $("#mondayTimeLabel").removeClass("dayUnavailable");

        } else {
            
            monTimePickerStart.value(null);
            monTimePickerEnd.value(null);
            
            $("#startTimeMon").data("kendoTimePicker").enable(false);
            $("#endTimeMon").data("kendoTimePicker").enable(false);

            $("#mondayTimeLabel").addClass("dayUnavailable");
        }
    });
    
    $("#isWorkingTuesday").click(function () {
        if ($(this).is(':checked')) {

            tueTimePickerStart.value("08:00:00");
            tueTimePickerEnd.value("17:00:00");

            $("#startTimeTue").data("kendoTimePicker").enable(true);
            $("#endTimeTue").data("kendoTimePicker").enable(true);
            
            $("#tuesdayTimeLabel").removeClass("dayUnavailable");
            
        } else {
            
            tueTimePickerStart.value(null);
            tueTimePickerEnd.value(null);

            $("#startTimeTue").data("kendoTimePicker").enable(false);
            $("#endTimeTue").data("kendoTimePicker").enable(false);
            
            $("#tuesdayTimeLabel").addClass("dayUnavailable");
        }
    });
    
    $("#isWorkingWednesday").click(function () {
        if ($(this).is(':checked')) {

            wedTimePickerStart.value("08:00:00");
            wedTimePickerEnd.value("17:00:00");

            $("#startTimeWed").data("kendoTimePicker").enable(true);
            $("#endTimeWed").data("kendoTimePicker").enable(true);
            
            $("#wednesdayTimeLabel").removeClass("dayUnavailable");
            
        } else {

            wedTimePickerStart.value(null);
            wedTimePickerEnd.value(null);

            $("#startTimeWed").data("kendoTimePicker").enable(false);
            $("#endTimeWed").data("kendoTimePicker").enable(false);
            
            $("#wednesdayTimeLabel").addClass("dayUnavailable");
        }
    });
    
    $("#isWorkingThursday").click(function () {
        if ($(this).is(':checked')) {

            thuTimePickerStart.value("08:00:00");
            thuTimePickerEnd.value("17:00:00");

            $("#startTimeThu").data("kendoTimePicker").enable(true);
            $("#endTimeThu").data("kendoTimePicker").enable(true);
            
            $("#thursdayTimeLabel").removeClass("dayUnavailable");
            
        } else {
            
            thuTimePickerStart.value(null);
            thuTimePickerEnd.value(null);

            $("#startTimeThu").data("kendoTimePicker").enable(false);
            $("#endTimeThu").data("kendoTimePicker").enable(false);
            
            $("#thursdayTimeLabel").addClass("dayUnavailable");
        }
    });
    
    $("#isWorkingFriday").click(function () {
        if ($(this).is(':checked')) {

            friTimePickerStart.value("08:00:00");
            friTimePickerEnd.value("17:00:00");

            $("#startTimeFri").data("kendoTimePicker").enable(true);
            $("#endTimeFri").data("kendoTimePicker").enable(true);
            
            $("#fridayTimeLabel").removeClass("dayUnavailable");
            
        } else {
            
            friTimePickerStart.value(null);
            friTimePickerEnd.value(null);

            $("#startTimeFri").data("kendoTimePicker").enable(false);
            $("#endTimeFri").data("kendoTimePicker").enable(false);
            
            $("#fridayTimeLabel").addClass("dayUnavailable");
        }
    });
    
    $("#isWorkingSaturday").click(function () {
        if ($(this).is(':checked')) {

            satTimePickerStart.value("08:00:00");
            satTimePickerEnd.value("17:00:00");

            $("#startTimeSat").data("kendoTimePicker").enable(true);
            $("#endTimeSat").data("kendoTimePicker").enable(true);
            
            $("#saturdayTimeLabel").removeClass("dayUnavailable");
            
        } else {
            
            satTimePickerStart.value(null);
            satTimePickerEnd.value(null);

            $("#startTimeSat").data("kendoTimePicker").enable(false);
            $("#endTimeSat").data("kendoTimePicker").enable(false);
            
            $("#saturdayTimeLabel").addClass("dayUnavailable");
        }
    });
    
    $("#isWorkingSunday").click(function () {
        if ($(this).is(':checked')) {

            sunTimePickerStart.value("08:00:00");
            sunTimePickerEnd.value("17:00:00");

            $("#startTimeSun").data("kendoTimePicker").enable(true);
            $("#endTimeSun").data("kendoTimePicker").enable(true);
            
            $("#sundayTimeLabel").removeClass("dayUnavailable");

        } else {
            
            sunTimePickerStart.value(null);
            sunTimePickerEnd.value(null);

            $("#startTimeSun").data("kendoTimePicker").enable(false);
            $("#endTimeSun").data("kendoTimePicker").enable(false);
            
            $("#sundayTimeLabel").addClass("dayUnavailable");
        }
    });

    $("#isLunchTimeAvail").click(function () {
        if ($(this).is(':checked')) {

            lunchTimePickerStart.value("12:00:00");
            lunchTimePickerEnd.value("12:30:00");

            $("#lunchStartTime").data("kendoTimePicker").enable(true);
            $("#lunchEndTime").data("kendoTimePicker").enable(true);
            
            $("#lunchTimeLabel").removeClass("dayUnavailable");

        } else {
            lunchTimePickerStart.value(null);
            lunchTimePickerEnd.value(null);

            $("#lunchStartTime").data("kendoTimePicker").enable(false);
            $("#lunchEndTime").data("kendoTimePicker").enable(false);
            
            $("#lunchTimeLabel").addClass("dayUnavailable");
        }
    });

});

Sorry, I can't set up a small project I have multiple dependencies, since this is just a small (really small) part of the project, I have to use TimeSpan instead of DateTime, sadly is my architect requeriment.

Thank you very much for helping me out.

[Alexander Popov]

Hello,

I answered to this query in duplicated support ticket created by you - #735084. Please keep in mind that it is highly recommended that you keep related questions in one support thread or a forum post, so that we can easily keep track of your support history and provide better answers in a shorter time.

Regards,
Alexander Popov
Telerik