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

Access DatePicker properties using JQuery

3 Answers 177 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Syam Nair
Top achievements
Rank 1
Syam Nair asked on 27 Apr 2010, 07:02 AM
in one of my prototype app, i am using Telerik MVC extension datepicker control. i have two fields "From" and To". on selection of a from date, the minDate for "To" field has to be changed to the selected "from" date.

this has to happen through client (JQuery). can anyone help me on how to access the minDate() property of datepicker using JQuery.
I debugged the object to see the properties, but i could not get anything similar to minDate.

my code:
1. onchange of from, i call a javascript function and access the from date 
var fromDate = $("#fromDate").data("tDatePicker").value(); 
2. now i need to set the minDate for "To".

my control code:
<%
           Html.Telerik().DatePicker()
                      .Name("toDate")
                      .Format("dd-MMM-yyyy")
                      .ButtonTitle("Select To Date")
                      .ClientEvents(actions => { actions.OnChange("calculateDays"); })
                      .InputHtmlAttributes(new { @readonly = "true", maxLength="11", @style = "font-size:11px;width:100px;" })
                      .ShowButton(true)
                      .Render();
   %>
                                                        

3 Answers, 1 is accepted

Sort by
0
Accepted
Georgi Krustev
Telerik team
answered on 27 Apr 2010, 08:51 AM
Hi Syam Nair,

To achieve your goal you need to wire the OnChange client event of the "fromDate" datepicker. In the event handler e.date is the newly selected date. Hence you just need to find "toDate" picker and set its minDate. Here is a code snippet showing how to achieve this:
function onChange(e){
$('#toDate').data('tDatePicker').minDate = new $.telerik.datetime(e.date);
}

Please note that we do not use new Date(...) to set the min date. We are using our datetime object internally and you need to create new $.telerik.datetime object and set it to the minDate.

Kind regards,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Syam Nair
Top achievements
Rank 1
answered on 27 Apr 2010, 10:14 AM
Thanks for the quick help!!

it is working now.
0
Milind
Top achievements
Rank 1
answered on 14 Aug 2010, 03:20 AM
Hi,

Was trying to use the syntax you had provided but could not succeed.

I have a radgrid having 2 fields dtPckrStartDate and dtPckrEndDate. When the start date is selected by the user that should get assigned as min date of end date. This should be done using javascript. Below is my code.

<%@ Page Title="Visitor Management(v2.0)-Contractor Work Permit" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="frmContractorWorkPermit.aspx.cs" Inherits="frmContractorWorkPermit" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server">
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script src="Include/javaFunctionLib.js" type="text/javascript"></script>
        <script src="Include/frmUserAddEdit.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">

            var registeredElements = [];

            function ChkAccess1() {
                // assiciated with Add New Record button in gridview header
                var boolResult;
                if ((document.getElementById('<%=hdnAllowAdd.ClientID%>').value).toUpperCase() == "N") {
                    alert('You are not authorised to use this option');
                    boolResult = false; //cancel the command
                }
                else {
                    boolResult = true;
                }
                return boolResult;
            }

            function ChkAccess(sender, args) {
                //associated with edit and delete buttons in gridview rows

                var result = args.get_commandName();

                if (result.toUpperCase() == 'EDIT') {
                    if ((document.getElementById('<%=hdnAllowEdit.ClientID%>').value).toUpperCase() == "N") {
                        if ((document.getElementById('<%=hdnAllowView.ClientID%>').value).toUpperCase() == "N") {
                            alert('You are not authorised to use this option');
                            args.set_cancel(true); //cancel the command
                        }
                        else {
                            args.set_cancel(false);
                        }
                    }
                    else {
                        args.set_cancel(false);
                    }
                }
                else if (result.toUpperCase() == 'DELETE') {
                    if ((document.getElementById('<%=hdnAllowDelete.ClientID%>').value).toUpperCase() == "N") {
                        alert('You are not authorised to use this option');
                        args.set_cancel(true); //cancel the command
                    }
                    else {
                        args.set_cancel(false);
                    }
                }
            }

//            function fnSetMinDt() {

//            //debugger
//                var dtPckrStartDate = GetRegisteredServerElement("dtPckrStartDate");
//                var dtPckrEndDate = GetRegisteredServerElement("dtPckrEndDate");
//                alert(dtPckrStartDate.value);
//                //dtPckrEndDate.get_dateInput().disable();
//                //dtPckrEndDate.value = dtPckrStartDate.value;
//                //dtPckrEndDate.set_minDate(dtPckrStartDate.value);
//            }

//            function GetRegisteredServerElement(serverID) {
//                var clientID = "";
//                for (var i = 0; i < registeredElements.length; i++) {
//                    clientID = registeredElements[i];
//                    if (clientID.indexOf(serverID) >= 0)
//                        break;
//                }
//                return $get(clientID);
//            }

//        </script>
    </telerik:RadScriptBlock>
    
    <asp:HiddenField ID="hdnMenuId" runat="server" />
    <asp:HiddenField ID="hdnAllowAdd" runat="server" />
    <asp:HiddenField ID="hdnAllowEdit" runat="server" />
    <asp:HiddenField ID="hdnAllowDelete" runat="server" />
    <asp:HiddenField ID="hdnAllowView" runat="server" />
    <asp:HiddenField ID="hdnAllowExecute" runat="server" />
    <telerik:radinputmanager id="RadInputManager1" runat="server" Skin="Forest">
        <telerik:TextBoxSetting BehaviorID="TextBoxBehavior1" InitializeOnClient="false" ErrorMessage="Invalid Data" Validation-IsRequired="true" >
        </telerik:TextBoxSetting>    
        <telerik:RegExpTextBoxSetting BehaviorID="TextBoxBehavior2" ErrorMessage="Invalid Email" ValidationExpression="^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" Validation-IsRequired="true">
        </telerik:RegExpTextBoxSetting>
    </telerik:radinputmanager>
    <telerik:RadAjaxManagerProxy id="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ddlOfficeLocation">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="gvContractorWorkPermit">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="gvContractorWorkPermit">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="gvContractorWorkPermit"
                        LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelHeight="" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>    
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server" >
    </telerik:RadAjaxLoadingPanel>
    <table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%;" >
        <tr>
            <td colspan="2" align="left" style="height:25px;">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td align="right" style="width:30%;" class="login">
                <asp:Literal ID="ltralLoginId" runat="server" Text="Select Office Location :"></asp:Literal> &nbsp;
            </td>
            <td align="left" valign="middle" style="width:70%;height:30px;">
                <asp:DropDownList ID="ddlOfficeLocation" runat="server" Width="70%"
                    DataValueField="vOfficeLocationId" DataTextField="vOfficeLocationName"
                    onselectedindexchanged="ddlOfficeLocation_SelectedIndexChanged" AutoPostBack="True"
                      ></asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="left" style="height:8px;">
            &nbsp;
            </td>
        </tr>
        <tr>
            <td align="right" style="width:30%;" class="login">
                <asp:Literal ID="Literal1" runat="server" Text="Select Contractor :"></asp:Literal> &nbsp;
            </td>
            <td align="left" valign="middle" style="width:70%;height:30px;">
                <asp:DropDownList ID="ddlContractor" runat="server" Width="70%"
                    DataValueField="nContractorId" DataTextField="vContractorName"
                    onselectedindexchanged="ddlContractor_SelectedIndexChanged" AutoPostBack="True"
                      ></asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="left" style="height:20px;">
            &nbsp;
            </td>
        </tr>
    </table>
    <telerik:radgrid id="gvContractorWorkPermit" runat="server"
        allowsorting="True" autogeneratecolumns="False" backcolor="Transparent" gridlines="None"
        oninsertcommand="gvContractorWorkPermit_ItemInsert" onitemdatabound="gvContractorWorkPermit_ItemDataBound"
        onneeddatasource="gvContractorWorkPermit_NeedDataSource"
        onupdatecommand="gvContractorWorkPermit_ItemUpdated" CommandItemStyle-HorizontalAlign="Left" FilterItemStyle-HorizontalAlign="Left"
        showfooter="True" showstatusbar="True" skin="Forest"
        OnDeleteCommand="gvContractorWorkPermit_DeleteCommand">
        <ClientSettings AllowDragToGroup="True" EnableRowHoverStyle="True">
            <Scrolling AllowScroll="True" UseStaticHeaders="True"  />
            <Selecting AllowRowSelect="True"  />
            <ClientEvents OnCommand="ChkAccess"  />
        </ClientSettings>                                
        <MasterTableView Name="tblContractorWorkPermitMaster" CommandItemDisplay="TopAndBottom" DataKeyNames="nCounter">
            <CommandItemTemplate>
                <asp:LinkButton ID="lnkBtnAddNew" runat="server" Font-Names="Arial" Font-Size="small" CommandName="InitInsert" ToolTip="Add New Permit" OnClientClick=" return ChkAccess1();" Visible='<%# !gvContractorWorkPermit.MasterTableView.IsItemInserted %>'>
                        <img style="border:0px;vertical-align:middle;" alt="" src="Images/AddRecord.png"  /> Add New Project </asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                    
                <asp:LinkButton ID="lnkBtnFilter" runat="server" Font-Names="Arial" Font-Size="small" ToolTip="Enable/Disable Filter" OnClick="lnkBtnFilter_click">
                        <img style="border:0px;vertical-align:middle;" alt="" src="Images/Filter.gif" /> Filter </asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                 
                <asp:LinkButton ID="lnkBtnGroup" runat="server" Font-Names="Arial" Font-Size="small" ToolTip="Enable/Disable Grouping" OnClick="lnkBtnGroup_click">
                        <img style="border:0px;vertical-align:middle;" alt="" src="Images/Group.gif" /> Group </asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                    
                <asp:LinkButton ID="lnkBtnPaging" runat="server" Font-Names="Arial" Font-Size="small" ToolTip="Enable/Disable Paging" OnClick="lnkBtnPaging_click">
                        <img style="border:0px;vertical-align:middle;" alt="" src="Images/Paging.gif" /> Paging </asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                    
                <asp:LinkButton ID="LinkButton4" runat="server" CommandName="RebindGrid" Font-Names="Arial" Font-Size="small" ToolTip="Refresh">
                        <img style="border:0px;vertical-align:middle;" alt="" src="Images/Refresh.png" /> Refresh Permit list </asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </CommandItemTemplate>
<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
            <Columns>
                <telerik:GridClientSelectColumn Text="Edit" UniqueName="colRowSelect" Visible="False">
                </telerik:GridClientSelectColumn>                                                                                
                <telerik:GridEditCommandColumn UniqueName="edtColumn" ButtonType="ImageButton">
                </telerik:GridEditCommandColumn>
                <telerik:GridTemplateColumn HeaderText="Project Name" DataField="vProjectName" SortExpression="vProjectName" UniqueName="TColvProjectName" Groupable="False"  AllowFiltering="True" Visible="True">
                    <ItemTemplate>
                        <asp:Literal ID="lblProjectName" runat="server" Text='<%# Bind("vProjectName") %>' ></asp:Literal>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="30%" Wrap="false"  />
                    <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="30%"  />
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn HeaderText="Start Date" DataField="dtStartDate" SortExpression="dtStartDate" UniqueName="TColdtStartDate" Groupable="False"  AllowFiltering="True" Visible="True">
                    <ItemTemplate>
                        <asp:Literal ID="lblStartDate" runat="server" Text='<%# Bind("dtStartDate") %>'  ></asp:Literal>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="10%" Wrap="false"  />
                    <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="10%"  />
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn HeaderText="End Date" DataField="dtEndDate" SortExpression="dtEndDate" UniqueName="TColdtEndDate" Groupable="False"  AllowFiltering="True" Visible="True">
                    <ItemTemplate>
                        <asp:Literal ID="lblEndDate" runat="server" Text='<%# Bind("dtEndDate") %>' ></asp:Literal>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="10%" Wrap="false"  />
                    <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="10%"  />
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn HeaderText="" DataField="" SortExpression="" UniqueName="TCol1" Groupable="False"  AllowFiltering="false" Visible="True">
                    <ItemTemplate>
                        <asp:Literal ID="lblCol1" runat="server" Text=""></asp:Literal>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="44%"  />
                    <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="44%"  />
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn HeaderText="Counter" DataField="nCounter" SortExpression="nCounter" UniqueName="TColnCounter" Groupable="False"  AllowFiltering="False" Visible="False">
                    <ItemTemplate>
                        <asp:Literal ID="lblCounter" runat="server" Text='<%# Bind("nCounter") %>' ></asp:Literal>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="0%" Wrap="false"  />
                    <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="0%"  />
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn Groupable="False"  DataField="vActiveInactive" UniqueName="TcolvActiveInactive" Visible="False">
                    <ItemTemplate>
                        <asp:Literal ID="lblActiveInactive" runat="server" Text='<%# Bind("vActiveInactive") %>' ></asp:Literal>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="0%"  />
                    <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="0%"  />
                </telerik:GridTemplateColumn>
                <telerik:GridButtonColumn CommandName="Delete" Text="Deactivate" UniqueName="column" ButtonType="ImageButton" ConfirmText="Are you Sure ?" ConfirmTitle="Confirm" ShowSortIcon="False">
                </telerik:GridButtonColumn>                                         
            </Columns>
            <EditFormSettings EditFormType="Template">
                <FormTemplate>
                    <table id="Table1" style="width: 80%; background-color:#FFF7D4;"
                        cellspacing="1" cellpadding="2" border="0">
                        <tr>
                            <td><asp:HiddenField ID="hdnCounter" runat="server" /></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                    <table id="Table3" style="width: 80%; background-color:#FFF7D4;"
                        cellspacing="1" cellpadding="2" border="0">
                        <tr>
                            <td class="LabelTdRightAlign" style="width:35%">
                                <asp:Literal ID="lblProjectName" runat="server" Text="Project Name : " ></asp:Literal>
                            </td>
                            <td class="LabelTdLeftAlign" style="width:65%">
                                <asp:DropDownList ID="ddlProjectName" runat="server" Width="60%" DataValueField="nProjectId" DataTextField="vProjectName"
                                     AutoPostBack="True" ></asp:DropDownList>
                            </td>
                        </tr>
                        <tr>
                            <td class="LabelTdRightAlign" style="width:35%">
                                <asp:Literal ID="Literal2" runat="server" Text="Start Date : " ></asp:Literal>
                            </td>
                            <td class="LabelTdLeftAlign" style="width:65%">
                                <telerik:RadDatePicker ID="dtPckrStartDate" runat="server" Width="60%"
                                    ClientEvents-OnDateSelected="fnSetMinDt" Skin="Forest" >
                                    <Calendar Skin="Forest" UseColumnHeadersAsSelectors="False" runat="server"
                                        UseRowHeadersAsSelectors="False" ViewSelectorText="x">
                                    </Calendar>
                                    <DateInput AutoPostBack="True" DateFormat="dd-MM-yyyy" runat="server"
                                        DisplayDateFormat="dd-MM-yyyy">
                                    </DateInput>
                                    <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                </telerik:RadDatePicker>
                            </td>
                        </tr>
                        <tr>
                            <td class="LabelTdRightAlign" style="width:35%">
                                <asp:Literal ID="Literal3" runat="server" Text="End Date : " ></asp:Literal>
                            </td>
                            <td class="LabelTdLeftAlign" style="width:65%">
                                <telerik:RadDatePicker ID="dtPckrEndDate" runat="server" Width="60%"
                                     Skin="Forest" >
                                    <Calendar Skin="Forest" UseColumnHeadersAsSelectors="False" runat="server"
                                        UseRowHeadersAsSelectors="False" ViewSelectorText="x">
                                    </Calendar>
                                    <DateInput DateFormat="dd-MM-yyyy" DisplayDateFormat="dd-MM-yyyy" runat="server">
                                    </DateInput>
                                    <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                </telerik:RadDatePicker>
                            </td>
                        </tr>
                        <tr>
                            <td class="LabelTdRightAlign" style="width:35%">
                                &nbsp;
                            </td>
                            <td class="LabelTdLeftAlign" style="width:65%">
                                &nbsp;
                            </td>
                        </tr>
                    </table>
                    <table id="Table2" style="width: 80%; background-color:#FFF7D4;"
                        cellspacing="1" cellpadding="2" border="0">
                        <tr>
                            <td class="LabelTdLeftAlign" style="width: 100%">
                                <asp:Button ID="btnSave" runat="server" TabIndex="22"
                                    Text='<%# (Container is GridEditFormInsertItem) ? "Save" : "Update" %>'
                                    
                                    CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'  />
                                <asp:Button ID="btnCancel" runat="server" TabIndex="23"
                                    CausesValidation="false" CommandName="Cancel" Text="Exit"  />
                            </td>
                        </tr>
                    </table>
                    <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
                        <script type="text/javascript">

                            registeredElements.push('<%# Container.FindControl("dtPckrStartDate").ClientID %>');
                            registeredElements.push('<%# Container.FindControl("dtPckrEndDate").ClientID %>');

                            function fnSetMinDt() {

                                //debugger
                                var dtPckrStartDate = GetRegisteredServerElement("dtPckrStartDate");
                                var dtPckrEndDate = GetRegisteredServerElement("dtPckrEndDate");
                                $('#dtPckrEndDate').data('tDatePicker').minDate = new $.telerik.datetime(dtPckrStartDate.value);
                                alert(dtPckrStartDate.value);
                                //dtPckrEndDate.get_dateInput().disable();
                                //dtPckrEndDate.value = dtPckrStartDate.value;
                                //dtPckrEndDate.set_minDate(dtPckrStartDate.value);
                            }

                            function GetRegisteredServerElement(serverID) {
                                var clientID = "";
                                for (var i = 0; i < registeredElements.length; i++) {
                                    clientID = registeredElements[i];
                                    if (clientID.indexOf(serverID) >= 0)
                                        break;
                                }
                                return $get(clientID);
                            }


                        </script>
                    </telerik:RadScriptBlock>
                </FormTemplate>
            </EditFormSettings>
            <CommandItemStyle HorizontalAlign="Left" />
        </MasterTableView>
        <PagerStyle Mode="NextPrevNumericAndAdvanced"  />
        <FilterMenu CssClass="cssForFilterButton">
        </FilterMenu>
        <CommandItemStyle HorizontalAlign="Left" />
        <FilterItemStyle HorizontalAlign="Left" />
    </telerik:radgrid>
</asp:Content>


Can you tell me where am i going wrong ?

Regards,

Milind Shevade
Tags
Calendar
Asked by
Syam Nair
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Syam Nair
Top achievements
Rank 1
Milind
Top achievements
Rank 1
Share this question
or