Access DatePicker properties using JQuery

[Syam Nair]

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();

   %>

                                                        

[Georgi Krustev]

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.

[Syam Nair]

Thanks for the quick help!!

it is working now.

[Milind]

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