简体   繁体   中英

Disable previous dates in datepicker

I tried to use datepicker for a form on my website from a following link. I want to disable previous dates and only allow user to select date from current date and onward. http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox

$(document).ready(function () { 
            $('#sandbox-container input').datepicker({
                format: "dd/mm/yyyy",
                clearBtn: true,
                minDate: 0, 
                maxDate: "+1M +10D",
                daysOfWeekDisabled: "0,6"

            });
});

I add following code minDate: 0,maxDate: "+1M +10D" to achieve this, but its not working. Also I need to add time in this datepicker if it is possible.

Please use $('#sandbox-container') instead of $('#sandbox-container input') .

 jQuery(document).ready(function() { $('#sandbox-container').datepicker({ format: "dd/mm/yyyy", clearBtn: true, minDate: 0, maxDate: "+1M +10D", daysOfWeekDisabled: "0,6" }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> Date : <input id="sandbox-container" type="text"> 

Please visit below links:

http://www.dotnetlearners.com/blogs/view/98/JQuery-Date-Picker-example-to-disable-previous-dates.aspx

Try this is disable past dates

var dateToday = new Date();
$(document).ready(function () { 
            $('#sandbox-container input').datepicker({
                format: "dd/mm/yyyy",
                clearBtn: true,
                 minDate: dateToday,                
                daysOfWeekDisabled: "0,6"

            });
});

Simplest solution is to set today's date as minDate in datepicker as below. This will block all the dates prior to today's date.

$('#sandbox-container input')
  .datepicker({
     format: "dd/mm/yyyy",
     minDate: new Date(),                
   });

Above is sample code just to illustrate how can you set minDate

Try this

$('#sandbox-container input')
  .datepicker({
     format: "dd/mm/yyyy",
     minDate: new Date(),                
   });

Please find the details

Html code for date

<input type="text" id="dateRange" />

JS code

 $("#dateRange").datepicker({
        changeMonth: true,
        changeYear: true,
        hideIfNoPrevNext: true,
        dateFormat: "mm/dd/yy",
        minDate: 0
    });

The will disable all the dates less current date

 jQuery(document).ready(function() { $('#sandbox-container').datepicker({ format: "dd/mm/yyyy", clearBtn: true, minDate: 0, maxDate: "+1M +10D", daysOfWeekDisabled: "0,6" }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> Date : <input id="sandbox-container" type="text"> 
I want disable only from 2nd date before current date. Please provide me code for it.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM