Set Date value in dd/MM/yyyy format in TextBox using ASP.Net AJAX CalendarExtender

Last Reply 20 days ago By pandeyism

Posted 20 days ago

hello,

 

i have a textbox i am using ajax caleder i want to achieve following

 

1. on selection of date it should only display date and month in textbox

2. by pressing shift user can select range of date in calender and same should be display in textbox like if user want to select 1 nov to 10 nov

so user can press shift and select from 1 nov to 10 nov in calender and it should in textbox 1/10 - 2/10 - 3/10 - 4/10 like this

You are viewing reply posted by: pandeyism 20 days ago.
Posted 20 days ago

Hi nauna,

You can't select multiple date in ajax calender, So select single date selection and assign to textbox.

Please refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ajaxtoolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
    <ajaxtoolkit:CalendarExtender ID="calendar1" runat="Server" BehaviorID="Calendar1"
        TargetControlID="TextBox1" OnClientDateSelectionChanged="OnDateSelection" OnClientHidden="OnCalendarHidden" />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:HiddenField ID="HiddenField1" runat="server" Value="" />
    </form>
    <script type="text/javascript">
        var tag1 = 1;
        function HideCalendar() {
            tag1 = 0;
            $find("Calendar1").hide();
        }
        function OnDateSelection(ev) {
            var calendar1 = $find("Calendar1");
            var date = calendar1._selectedDate.format("dd/MM");
            var hfDate = $get('<%=HiddenField1.ClientID %>');
            if (hfDate.value.indexOf(date) == -1) {
                hfDate.value += date + " - ";
            }
            tag1 = 1;
        }
        function OnCalendarHidden(obj) {
            var calendar1 = $find("Calendar1");
            if (tag1 == 1) {
                calendar1.show();
            }
            $get('<%=TextBox1.ClientID %>').value = $get('<%=HiddenField1.ClientID %>').value;
            HideCalendar();
        }
    </script>
</body>
</html>

Screenshot