Telerik Forums
This is a migrated thread and some comments may be shown as answers.

[Solved] time is not displayed properly in DatetimePicker

1 Answer 47 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Chakri
Top achievements
Rank 1
Chakri asked on 22 Dec 2010, 07:49 AM
dtpicker.JPG
I am trying to use the datetimepicker  which was released in Q3. But the time portion is not getting displayed properly in the selection dropdown. This is the codesnippet I used 

<%= Html.Telerik().DateTimePicker()
  .Name("DateTimePickerStartDate")                       
  .Value(DateTime.Now) %>

Am I missing something here ?
I had attached the screen shot for your reference.

1 Answer, 1 is accepted

Sort by
0
Chakri
Top achievements
Rank 1
answered on 22 Dec 2010, 11:17 AM
For  more info I am also adding my master page and view page 

MaterPage :

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
     
    <link href="<%= Url.Content("~/Content/Site.css") %>"  rel="stylesheet" type="text/css"  />
<%--    <link href="<%= Url.Content("~/Content/jquery.autocomplete.css") %>" rel="stylesheet" type="text/css" />   --%>
    <link href="<%= Url.Content("~/Content/datepicker.css") %>" rel="stylesheet" type="text/css" />
     
    <link href="<%= Url.Content("~/Content/themes/base/jquery.ui.all.css") %>" rel="stylesheet" type="text/css" />
     
     <%--<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/ui.all.css" rel="stylesheet" type="text/css" />     --%>
 
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/i18n/jquery-ui-i18n.min.js" rel="stylesheet" type="text/css" />    
 
    <%= Html.MetaHeaders() %>
 
 
    <script src="<%= Url.Content("~/Scripts/jquery-1.4.2.min.js") %>" language="JavaScript" type="text/javascript"></script>
    <%--<script src="<%= Url.Content("~/Scripts/jquery.autocomplete.js") %>" language="JavaScript" type="text/javascript"></script>--%>
    <script src="<%= Url.Content("~/Scripts/jquery-ui-1.8.custom.min.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/jquery.form.js") %>" language="JavaScript" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/Silverlight.js") %>" language="JavaScript" type="text/javascript"></script>
    <script  src="<%= Url.Content("~/Scripts/jquery-ui.min.js") %>" type="text/javascript"></script>      
    <script src="<%= Url.Content("~/Scripts/jquery.ui.datetimepicker.js") %>"type="text/javascript"></script>   
 
    <%= Html.Menu() %>
    <%
    Html.Telerik().StyleSheetRegistrar()
        .DefaultGroup(group => group.Add("telerik.common.css")
                                    .Add("telerik.web20.css"))
                                     
        .Render();
    %>
</head>
<body>
    <%= Html.StartPage() %>
    <form id="form2" runat="server">
                <!-- begin content area -->
        <table id="p-ca" border="0" cellspacing="0" cellpadding="0" width="100%">
            <tr id="p-carow1">
                <td style="height: 13px">
 
                <td style="text-align: right; height: 13px">You are logged in as <%=  SecurityContext.CurrentUser.DisplayName %></td>
            </tr>
            <tr id="p-carow2" valign="top" >
                <td colspan="2" id="p-column1" >
                    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                </td>
            </tr>
        </table>
    </form>
        <%= Html.Telerik().ScriptRegistrar().jQuery(false) %>
    <script type="text/javascript">_page.endPage();</script>
</body>
</html>

View: (I have italicized the datetimepicker code snippet below )

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<TeamCalendar.Web.Models.LeaveViewModel>" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Create
</asp:Content>
 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">      
 
<script type="text/javascript">
 
     $(function () {
            $('#FindManager').autocomplete({           
                minLength: 3,
                source: function (request, response) {
                 
                    $.ajax({ url: "<%= Url.Content(@"~/Leave/FindManager") %>", type: "POST", dataType: "json", data: { searchText: request.term },
                        success: function (data) {
                            $('#ApproverId').attr('value', '');
                                                    
                            response($.map(data, function (item) {
                                return { label: item.DisplayName, value: item.DisplayName, ApproverId: item.Id}
                            }))
                        }
                    })
                },
                select: function (event, ui) {
                 
                    $('#ApproverId').attr('value', ui.item.ApproverId == null ? '' : ui.item.ApproverId);                  
                     
                }
            });
 
        });
 
 
       
 
 
        $(document).ready(function() { 
        $("#FindManager").change(function(){        
        var managerval = document.getElementById('FindManager').value ;
        if(managerval == "")
            document.getElementById('ApproverId').value = 0;
 
           
        }); 
    });
 
 
    $(function () {
        $("select#AbsenceTypeId").change(function () {         
            var AbsenceTypeId = $("#AbsenceTypeId > option:selected").attr("value");
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: '<%= Url.Content("~/Leave") %>/SubTypes?AbsenceTypeId=' + AbsenceTypeId,
                data: "{}",
                dataType: "json",
                success: function (data) {
                    if (data.length > 0) {
                        
                        var options = '';
                        options += "<option value=''>" + "-select-" + "</option>"
                        for (temp in data) {
                            var item = data[temp];                           
                            options += "<option value='" + item.Id + "'>" + item.Name + "</option>";
                        }
                    }
                    else {
                        options += "<option value=''>" + "-select-" + "</option>"
                    }
                    $("#AbsenceSubTypeId").html(options);
                }
            });
        });
    });
 
     $(function () {
        $("select#AbsenceTypeId").change(function () {      
            var AbsenceTypeId = $("#AbsenceTypeId > option:selected").attr("value");
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: '<%= Url.Content("~/Leave") %>/WorkflowAppilicable?AbsenceTypeId=' + AbsenceTypeId,
                data: "{}",
                dataType: "json",
                success: function (data) {
                 
                    if (data.toString() == "false") {
                        
                       document.getElementById('FindManager').value = "";
                       document.getElementById('FindManager').readOnly = true;
                        }
                     
                    else {
                        document.getElementById('FindManager').readOnly = false;
                    }
                     
                }
            });
        });
    });
 
 
 
//           $(function () {
//               $('#StartDate').datetimepicker();
//               $('#EndDate').datetimepicker();
//           });
 
 
 
 
           $(function () {
               $("#EndDate").change(function () {
 
                   var st = document.getElementById('StartDate').value;
                   var et = document.getElementById('EndDate').value;
                   var currentdt = document.getElementById('CurrentDate').value;            
                   var StartDate = new Date(st);
                   var EndDate = new Date(et);
                   var Period = Math.abs(EndDate - StartDate);
                   var PeriodDays = Math.abs(Period / 1000 / 60 / 60 / 24);
                   var PeriodHours = Math.abs(Period / 1000 / 60 / 60);
                   PeriodHours = roundNumber(PeriodHours,2);
                   document.getElementById('LeavePeriod').value = PeriodHours;
                   //$("#LeavePeriod").value = Period;
               });
           });
 
           $(function () {
               $("#StartDate").change(function () {
 
                   var st = document.getElementById('StartDate').value;
                   var et = document.getElementById('EndDate').value;
                   var currentdt = document.getElementById('CurrentDate').value;
                   var StartDate = new Date(st);
                   var EndDate = new Date(et);
                    
                   var Period = Math.abs(EndDate - StartDate);
 
                   var PeriodDays = Math.abs(Period / 1000 / 60 / 60 / 24);
                   var PeriodHours = Math.abs(Period / 1000 / 60 / 60);
                   PeriodHours = roundNumber(PeriodHours, 2);
 
                   document.getElementById('LeavePeriod').value = PeriodHours;
 
                   //$("#LeavePeriod").value = Period;
               });
           });
 
 
 
           function roundNumber(num, dec) {
               var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
               return result;
           }
 
 
    </script>
     
 
      
 
 
    <h2>Create</h2>
    <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>
 
    <% using (Html.BeginForm()) {%>
        <%: Html.ValidationSummary(true) %>
 
        <fieldset>
            <legend>Fields</legend>
 
 
              <%= Html.Telerik().DateTimePicker()
                        .Name("DateTimePickerStartDate")                       
                        .Value(DateTime.Now)
                                             
                    %>
 
 
 
            <div class="editor-label">           
               <%: Html.LabelFor(model => model.AbsenceType) %>
            </div>
            <div class="editor-field">
                <%: Html.DropDownListFor(m => m.AbsenceTypeId, Model.AbsenceTypeList, "-select-")%>   
                <%: Html.ValidationMessageFor(m => m.AbsenceTypeId,"*")%>           
            </div>
 
              <div class="editor-label">             
                <%: Html.LabelFor(model => model.AbsenceSubType) %>             
            </div>
            <div class="editor-field">
                <%: Html.DropDownListFor(m => m.AbsenceSubTypeId, Model.AbsenceSubTypeList, "-select-")%>   
                 <%: Html.ValidationMessageFor(m => m.AbsenceSubTypeId,"*")%>
            </div>           
             
            <div class="editor-label">
                <%: Html.LabelFor(model => model.FindManager) %>
            </div>
            <div class="editor-field">
                
                <%: Html.TextBoxFor(model => model.FindManager) %>
                 <%: Html.ValidationMessageFor(model => model.FindManager) %>
                <%: Html.HiddenFor(model => model.ApproverId)%>      
            </div>  
            <div class="editor-label">
                <%: Html.LabelFor(model => model.StartDate) %>
            </div>
            <div class="editor-field">               
                <%: Html.TextBox("StartDate", String.Format("{0:g}", Model.StartDate))%>
                <%: Html.ValidationMessage("StartDate","*")%>
                <%: Html.Hidden("CurrentDate", DateTime.Now.ToString("g"))%>      
            </div>  
            <div class="editor-label">
                <%: Html.LabelFor(model => model.EndDate) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBox("EndDate", String.Format("{0:g}", Model.EndDate))%>
                <%: Html.ValidationMessage("EndDate","*")%>
            </div>         
 
            <div class="editor-label">
               <%: Html.LabelFor(model => model.LeavePeriod)%>
            </div>
            <div class="editor-label">                
                <%= Html.TextBox("LeavePeriod", Model.LeavePeriod, new { @readonly = "true" })%>
            </div>         
 
            <div class="editor-label">
                <%: Html.LabelFor(model => model.RequesterComments)%>
            </div>
            <div class="editor-field">
                <%: Html.TextAreaFor(model => model.RequesterComments , new { style = "width:300px; height: 50px" })%>
            </div>                                
            
            <input type="submit" value="Create" />
        </fieldset>
 
    <% } %>
 
    <div>
        <%: Html.ActionLink("Back to List", "Index") %>
    </div>
 
</asp:Content>

Hope this explains. quick help is appreciated.

Tags
Date/Time Pickers
Asked by
Chakri
Top achievements
Rank 1
Answers by
Chakri
Top achievements
Rank 1
Share this question
or