Link to home
Start Free TrialLog in
Avatar of RadhaKrishnaKiJaya
RadhaKrishnaKiJaya

asked on

Change the color of the selected dates ASP.Net VB.Net

Hi Experts,

I have a date picker control.  I have three categories of dates.

1. Menu Available - If menu available for that date then change its color. Which I can do right now.

2. Customer Order available - If Customer order available then change its color to a different color(This web method has a CustID parameter).

3. If the date is a holiday, then disable it.

Thanks in advance.
Avatar of HainKurt
HainKurt
Flag of Canada image

need code...

what "date picker" are you using?
Avatar of RadhaKrishnaKiJaya
RadhaKrishnaKiJaya

ASKER

<link href="/js/smoothness/jquery-ui.css" rel="stylesheet" />
    <script src="/js/jquery-1.10.2.js"></script>
    <script src="/js/jquery-ui.js"></script>

    <script type="text/javascript">
        var reserveddates;
        var weekenddate;
     
        function DisableSpecificDatesWeekends(date) {
            var day = date.getDate(),
                    month = date.getMonth() + 1,
                year = date.getFullYear();
            if (month.toString().length < 2) month = '0' + month;
            if (day.toString().length < 2) day = '0' + day;
            var currentdate = [year, month, day].join('-');
            if (jQuery.inArray(currentdate, reserveddates) !== -1) {
                return [true, "Highlighted", ""];
            } else if (date.getDay() === 0 || date.getDay() === 6) {
                return [false, "disabled_week"]
            }
            else {
                return [true, "", ""];
            }
        }


        function ChangeColorSpecificDates(date) {
            var day = date.getDate(),
                    month = date.getMonth() + 1,
                year = date.getFullYear();
            if (month.toString().length < 2) month = '0' + month;
            if (day.toString().length < 2) day = '0' + day;
            var currentdate = [year, month, day].join('-');
            if (jQuery.inArray(currentdate, reserveddates) !== -1) {
                return [true, "Highlighted", ""];
            }
            else {
                return [true, "", ""];
            }
        }


        $(function () {
            reserveddates = []
            $.ajax({
                type: "POST",
                url: "Menu.aspx/Get_Menu_Dates",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var xml = $.parseXML(response.d);
                    var dates = $(xml).find('MenuDate');
                    $.each(dates, function () {
                        reserveddates.push($(this)[0].textContent.split('T')[0]);
                    });
                    $("input[id$='txtSelectedDate']").datepicker({
                        showOn: "button",
                        buttonImage: "images/Calender.png",
                        buttonImageOnly: true,
                        beforeShowDay: ChangeColorSpecificDates
                    });
                }
            });

            $("input[id$='chkWeekend']").change(function () {
                if ($("input[id$='chkWeekend']").is(':checked')) {
                    $("input[id$='txtSelectedDate']").datepicker('option', { beforeShowDay: DisableSpecificDatesWeekends })
                }
                else {
                    $("input[id$='txtSelectedDate']").datepicker('option', { beforeShowDay: ChangeColorSpecificDates })
                }
            })
        });
     </script>
ASKER CERTIFIED SOLUTION
Avatar of Dorababu M
Dorababu M
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks a lot. It Worked. Please ignore the previous msg I sent to you.
Thank you so much.
You are welcome RadhaKrishna