Translate

Thursday, 1 September 2016

Disable Datepicker dates based on database list using JQUERY



To disable datapicker date getting from db shown below

Getting dates list from db using ajax call

  $(document).ready(function () {
            $("#ContentPlaceHolder_Body_ddlBlock").change(function () {
                getdates();
            });

            var holidays;
            function getdates() {
                $.ajax({
                    type: "POST",
                    url: "Dates.aspx/GetDatesArray",
                    data: '',
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        holidays = data.d;
                        localStorage.setItem("Holidays", holidays);
                    },
                });
            }

            var holidaysList = localStorage.getItem("Holidays");
            if (holidaysList != null && holidaysList != "") {
             var holidays = holidaysList.toString().split(',');
                $("# txtDate").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'yy-mm-dd',
                    beforeShowDay: function (date) {
                        show = true;
                        if (date.getDay() == 0) { show = false; }//No Weekends
                        for (var i = 0; i < holidays.length; i++) {
                            if (new Date(holidays[i]).toString() == date.toString()) { show = false; }//No Holidays
                        }
                        var display = [show, '', (show) ? '' : 'No Weekends or Holidays'];//With Fancy hover tooltip!
                        return display;
                    }

                });
            }
            else {
                getdates();
            }


        });

webmethod in .cs file




[WebMethod]
        public static List<string> GetDatesArray()
        {
            string consString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            try
            {
                DataSet Sqlds = new DataSet();
                using (SqlConnection sqlCon = new SqlConnection(consString))
                {
                    using (SqlCommand sqlCmd = new SqlCommand("select * from table", sqlCon))
                    {

                        SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCmd);
                        sqlDa.Fill(Sqlds);

                    }
                }
                List<string> strPH = new List<string>();

                foreach (DataRow row in Sqlds.Tables[0].Rows)
                {

                    DateTime Dt = Convert.ToDateTime(row["d"].ToString());
                    //strPH.Add(String.Format("{0:MM/dd/yyyy}", Dt));

                    strPH.Add((Dt.ToString("M/d/yyyy")).Replace("-", "/"));
                }

                return strPH;
            }
            catch (Exception ex)
            {
                throw ex;
            }

        }

Tuesday, 14 June 2016

Lightslider Example

Light slider example

In view:


<!DOCTYPE html>
<html lang="en">
<head>
    <title>lightSlider Demo</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <link href="~/src/css/lightslider.css" rel="stylesheet" />
    <style>
        ul {
            list-style: none outside none;
            padding-left: 0;
            margin: 0;
        }

        .demo .item {
            margin-bottom: 60px;
        }

        .content-slider li {
            background-color: #ed3020;
            text-align: center;
            color: #FFF;
        }

        .content-slider h3 {
            margin: 0;
            padding: 70px 0;
        }

        .demo {
            width: 800px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="~/src/js/lightslider.js"></script>
    <script>
        $(document).ready(function () {
            $("#content-slider").lightSlider({
                loop: true,
                keyPress: true
            });
            $('#image-gallery').lightSlider({
                gallery: true,
                item: 1,
                thumbItem: 9,
                slideMargin: 0,
                speed: 500,
                auto: true,
                loop: true,
                onSliderLoad: function () {
                    $('#image-gallery').removeClass('cS-hidden');
                }
            });
        });
    </script>
</head>
<body>
    <div class="demo">
        <div class="item">
            <div class="clearfix" style="max-width: 474px;">
                <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
                    <li data-thumb="/img/thumb/cS-1.jpg">
                        <img src="~/img/cS-1.jpg" />
                    </li>
                    <li data-thumb="/img/thumb/cS-2.jpg">
                        <img src="~/img/cS-2.jpg" />
                    </li>
                    <li data-thumb="/img/thumb/cS-3.jpg">
                        <img src="~/img/cS-3.jpg" />
                    </li>
                    <li data-thumb="/img/thumb/cS-4.jpg">
                        <img src="~/img/cS-4.jpg" />
                    </li>
                    <li data-thumb="/img/thumb/cS-5.jpg">
                        <img src="~/img/cS-5.jpg" />
                    </li>
                    <li data-thumb="/img/thumb/cS-6.jpg">
                        <img src="~/img/cS-6.jpg" />
                    </li>
                    <li data-thumb="/img/thumb/cS-7.jpg">
                        <img src="~/img/cS-7.jpg" />
                    </li>
                    <li data-thumb="/img/thumb/cS-8.jpg">
                        <img src="~/img/cS-8.jpg" />
                    </li>
                    <li data-thumb="/img/thumb/cS-9.jpg">
                        <img src="~/img/cS-9.jpg" />
                    </li>
                    <li data-thumb="/img/thumb/cS-10.jpg">
                        <img src="~/img/cS-10.jpg" />
                    </li>
                    <li data-thumb="/img/thumb/cS-11.jpg">
                        <img src="~/img/cS-11.jpg" />
                    </li>
                    <li data-thumb="/img/thumb/cS-12.jpg">
                        <img src="~/img/cS-12.jpg" />
                    </li>
                    <li data-thumb="/img/thumb/cS-13.jpg">
                        <img src="~/img/cS-13.jpg" />
                    </li>
                    <li data-thumb="/img/thumb/cS-14.jpg">
                        <img src="~/img/cS-14.jpg" />
                    </li>
                    <li data-thumb="/img/thumb/cS-15.jpg">
                        <img src="~/img/cS-15.jpg" />
                    </li>
                </ul>
            </div>
        </div>

    </div>
</body>



The output like below:




For slick Slider view the link below