Enable only Sunday in jQuery DatePicker in ASP.Net

Last Reply 2 months ago By AnandM

Posted 2 months ago

HI Can anyone help me, i only want to enable one week in ajax calendar extender , it was simple in asp calendar control, how to do it in ajax calendar extender. 

like i only want to enable sundays in calendar

Posted 2 months ago

Hi Mudassirk7,

If you simply want to enable only next 6 days from current date then you can set property StartDate to Current Date value and EndDate to the date value till you want to enable the dates.

If you want to enable only particular weekday then you could only workaround by alerting the user if he/she tries to select anything else than a Sunday or some other weekday. In sample i have considered sunday as weekday.

I have created a sample for above both requirements you need to modify the code according to your need.

HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="cc1" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </cc1:ToolkitScriptManager>
    <div align="center">
        <div>
            Enabling One week Dates from Current Date.<br />
            Date:- &nbsp;
            <asp:TextBox ID="txtDate" runat="server" />
            <cc1:CalendarExtender ID="Calendar1" Enabled="true" runat="server" TargetControlID="txtDate"
                Format="dd/MM/yyyy">
            </cc1:CalendarExtender>
        </div>
        <br />
        <div>
            Enabling Only Sundays.<br />
            Date:- &nbsp;
            <asp:TextBox ID="txtSunday" runat="server" />
            <cc1:CalendarExtender ID="CalendarExtender1" Enabled="true" runat="server" TargetControlID="txtSunday"
                Format="dd/MM/yyyy" OnClientDateSelectionChanged="checkDate">
            </cc1:CalendarExtender>
            <div>
                <script type="text/javascript">
                    function checkDate(sender, args) {
                        if (sender._selectedDate.getDay() != 6) {
                            alert("You can only select Sundays!");
                            var txtDueDate = document.getElementById('<%=txtSunday.ClientID %>');
                            txtDueDate.value = '';
                        }
                    }
                </script>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Calendar1.StartDate = DateTime.Now;
        Calendar1.EndDate = DateTime.Now.AddDays(7);
    }
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
	If Not IsPostBack Then
		Calendar1.StartDate = DateTime.Now
		Calendar1.EndDate = DateTime.Now.AddDays(7)
	End If
End Sub

ScreenShot


Posted 2 months ago

Hi Mudassirk7,

Unfortunately there are no server side events attached to the Ajax CalendarExtender like ASP.net Calendar. Ajax CalendarExtender is attached with client side events like OnClientDateSelectionChanged and etc.

So you need to do workaround for achieving the task and for that i have already provided solution to you in my previous reply.

http://www.aspforums.net/Threads/645107/Enabling-only-one-week-in-ajax-calendar-extender/Replies/2#Replies

and you can achieve your requirement with jquery datepicker.

Refer below sample code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="txtSundays" />
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css"
            type="text/css" media="all" />
        <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css"
            type="text/css" media="all" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"
            type="text/javascript"></script>
        <style type="text/css">
            .ui-datepicker-week-end a.ui-state-default
            {
                color: green;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                var date = new Date();
                $("#txtSundays").datepicker({
                    autoclose: true,
                    changeMonth: true,
                    changeYear: true,
                    changeDate: true,
                    minDate: new Date(),
                    beforeShowDay: function (date) {
                        return [date.getDay() === 0, ''];
                    }
                });
            });
        </script>
    </div>
    </form>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html