How to disable dates before current date in jsdatepicker
I am using jsdatepicker to display calendar.
http://javascriptcalendar.org/javascript-date-picker.php
function initialize()
{
new JsDatePick({
useMode:2,
limitToToday :false,
target:"deadlinedate",
dat开发者_JAVA百科eFormat:"%d-%m-%Y"
});
}
Is there any way to disable all dates before current date. Any help would be appreciated.
Thanks
download the full version not the min one and change the JsDatePick.prototype.isAvailable
function >
for <
in all 3 ifs
You can add startDate and finishDate parameters to jsDatePick. There is a "limitToToday" control statement in this library (jsDatePick.full.1.x.js) and you can add 2 control statement after this statement, like this:
if (this.oConfiguration.limitToToday){
if ( ! this.isAvailable(this.currentYear, this.currentMonth, parseInt(oDay.getDate()) - 1 ) ){
disabledDayFlag = true;
aDayDiv.setAttribute("isJsDatePickDisabled",1);
}
}
// Your startDate method
if (this.oConfiguration.startDate != ''){
startDate2 = new Date(Date.parse(this.oConfiguration.startDate));
if ( (oDay.getFullYear() < startDate2.getFullYear()) ||
(oDay.getFullYear() == startDate2.getFullYear() && oDay.getMonth() < startDate2.getMonth()) ||
(oDay.getFullYear() == startDate2.getFullYear() && oDay.getMonth() == startDate2.getMonth() && oDay.getDate() < startDate2.getDate() )
)
{
disabledDayFlag = true;
aDayDiv.setAttribute("isJsDatePickDisabled",1);
}
}
// Your finisDate method
if (this.oConfiguration.finishDate != ''){
finishDate2 = new Date(Date.parse(this.oConfiguration.finishDate));
if ( (oDay.getFullYear() > finishDate2.getFullYear()) ||
(oDay.getFullYear() == finishDate2.getFullYear() && oDay.getMonth() > finishDate2.getMonth()) ||
( oDay.getFullYear() == finishDate2.getFullYear() && oDay.getMonth() == finishDate2.getMonth() && oDay.getDate() > finishDate2.getDate() )
)
{
disabledDayFlag = true;
aDayDiv.setAttribute("isJsDatePickDisabled",1);
}
}
You should update "JsDatePick.prototype.setConfiguration" :
JsDatePick.prototype.setConfiguration = function(aConf){
this.oConfiguration.isStripped = (aConf["isStripped"] != null) ? aConf["isStripped"] : false;
this.oConfiguration.useMode = (aConf["useMode"] != null) ? aConf["useMode"] : 1;
this.oConfiguration.selectedDate = (aConf["selectedDate"] != null) ? aConf["selectedDate"] : null;
this.oConfiguration.target = (aConf["target"] != null) ? aConf["target"] : null;
this.oConfiguration.yearsRange = (aConf["yearsRange"] != null) ? aConf["yearsRange"] : [1971,2100];
this.oConfiguration.limitToToday = (aConf["limitToToday"] != null) ? aConf["limitToToday"] : false;
this.oConfiguration.field = (aConf["field"] != null) ? aConf["field"] : false;
this.oConfiguration.cellColorScheme = (aConf["cellColorScheme"] != null) ? aConf["cellColorScheme"] : "ocean_blue";
this.oConfiguration.dateFormat = (aConf["dateFormat"] != null) ? aConf["dateFormat"] : "%m-%d-%Y";
this.oConfiguration.imgPath = (g_jsDatePickImagePath.length != null) ? g_jsDatePickImagePath : "img/";
this.oConfiguration.weekStartDay = (aConf["weekStartDay"] != null) ? aConf["weekStartDay"] : 1;
**this.oConfiguration.startDate = (aConf["startDate"] != null) ? aConf["startDate"] : '';
this.oConfiguration.finishDate = (aConf["finishDate"] != null) ? aConf["finishDate"] : '';**
....
}
When you create your DatePicker object:
g_globalObject = new JsDatePick({
useMode:1,
isStripped:true,
target:"div_calendar",
startDate:"05.01.2013",
finishDate:"05.31.2013"
});
EDIT:
Read it wrong, you have to set the minimum date for that in your option:
var options = {minDate:'03/18/2011',maxDate:today}
$("#datestart").datepicker(options);
精彩评论