Timepicker: Save in different format than parseFormat

5 posts, 0 answers
  1. Guillermo
    Guillermo avatar
    20 posts
    Member since:
    Nov 2012

    Posted 06 Sep 2013 Link to this post

    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.


  2. Guillermo
    Guillermo avatar
    20 posts
    Member since:
    Nov 2012

    Posted 09 Sep 2013 Link to this post

    Hello, anyone from Telerik?
  3. Kendo UI is VS 2017 Ready
  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 10 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Guillermo
    Guillermo avatar
    20 posts
    Member since:
    Nov 2012

    Posted 10 Sep 2013 Link to this post

    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.


  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 11 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready