aspx Tutorial

NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services,
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Saturday, December 10, 2011 Total Views:  

This example demonstrates how to restrict date range in jQuery UI datepicker. By default jQuery UI datepicker provides datepicker without any restriction. You can set minDate and maxDate date range options in jQuery UI datepicker. You can set date, number and string values in minDate and maxDate options. To restrict the number of days in datepicker then you have to set integer number. To restrict year, month and for week then you have to set string value. For example

Year: ‘2y’

Month: ‘5m’

Week: ‘5w’

Days: ‘4d’

 

minDate: To set a minimum selectable date in the current date in jQuery UI datepicker.

maxDate: To set maximum selectable date in the current date jQuery UI datepicker.

 
Here’s an example

<!DOCTYPE html>

<html>

<head runat="server">

    <title></title>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"
          type="text/javascript"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"
          type="text/javascript"></script>

    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/le-frog/jquery-ui.css"
          type="text/css" media="all" />

                    

<script type="text/javascript">

    $(function () {

        $("#<%= TextBox1.ClientID %>").datepicker({

            minDate: -7,

            maxDate: "2M"

        });

    });

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    </div>

    </form>

</body>

</html>


In the above code, I have set  minimum range to -7 days it mean that before 7days from current date it will be disabled and I have set maximum range to 2 month it means, from current date to next two month from current date will be enable in jQuery UI date picker calendar.

Output

Download

Restrict-date-range-in-jQuery-UI-datepicker.aspx (987.00 bytes)

See live demo

Tags:
Category: All
Protected by Copyscape Online Plagiarism Tool

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5