Search

Tuesday, May 31, 2016
0 comments

Calendar Control with Disabled past date

10:12 PMTuesday, May 31, 2016
In this article, i will show you, how to show calendar control with disabled past date. I mean to say that if you select date then calendar control disabled all previous day. Also i will provide you, After select a specific date then you don't move to previous months. Lets see an example.

Before example i will teach you about calendar control. If you write following function then you can see full calendar control. If you want to disabled previous date after select specific date then see next example.
$(function () {
           $("input[id*='calid']").datepicker();
       })
Disabled Previous Date:
  $(function () {
           $("input[id*='calid']").datepicker({
               minDate: new Date(2016,6,1)
           });
       })


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Calendar Control with Disabled past date</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
   <script>

       $(function () {
           $("input[id*='calid']").datepicker({

               minDate: new Date(2016,6,1)
           });
       })


   </script>



</head>
<body>
    <form id="form1">
        <input type="text" id="calid" />
     </form>
</body>
</html>

Code Generate the Following code


Calendar Control with Disabled past date



Protected by Copyscape Online Copyright Protection Software

0 comments :

Post a Comment

 
Toggle Footer
Top