我正在使用带有日期范围选择器的react.js&node.js修改静态网页。如何将客户端计算机的当前日期设置为默认开始日期?
TLDR:如何在静态网页中获取当前日期/时间。
该网页是针对CMS开发的,它将从另一个内部服务器获取API来生成html。之后,我们将html导出到云中并允许访问。
正如我发现的那样,日期范围选择器可以在客户端“阻止”过去的日期,但是找不到如何做到这一点,并且没有关于“ mindate = 0”的设置。
Child
我已经在“ value.js”中设置了以下内容,例如“ Selecter.js”中使用的。 searchValues.startComeDate
Expected:将CURRENT DATE作为daterangepicker的默认值,但是, 实际:获取“以html呈现的日期”(静态)作为daterangepicker的默认值
//*Extracted from "SelecterDateRange.js"
return ( <DateRangePicker enableOutsideDays = {
false
}
renderMonthText = {
month =>
moment(month)
.locale("zh-tw")
.format("YYYY年MM月")
}
displayFormat = {
"MM月DD日 ddd"
}
customArrowIcon = { < div className = "horzline" > - < /div>}
firstDayOfWeek = {
0
}
showClearDates = {
true
}
daySize = {
35
}
startDate = {
start
} // momentPropTypes.momentObj or null,
startDateId = "your_unique_start_date_id"
endDate = {
end
} // momentPropTypes.momentObj or null,
endDateId = "your_unique_end_date_id"
minimumNights = {
1
}
noBorder = {
true
}
readOnly = {
true
}
reopenPickerOnClearDates = {
true
}
startDatePlaceholderText = {
`${startText}日期`
}
endDatePlaceholderText = {
`${endText}日期`
}
onDatesChange = {
this.onDatesChange
} // PropTypes.func.isRequired,
focusedInput = {
this.state.focusedInput
} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
onFocusChange = {
this.onFocusChange
} // PropTypes.func.isRequired,
isOutsideRange = {
date => {
if (this.state.focusedInput == "startDate") {
if (this.props.datePick == 2) {
return (!isInclusivelyAfterDay(date, startCome) ||
isInclusivelyAfterDay(
date,
moment(endCome)
)
);
} else {
return (
date.isBefore(moment(), "day") ||
date.isAfter(
moment()
.add(12, "M")
.endOf("month"),
"day"
)
);
}
}
if (this.state.focusedInput == "endDate") {
if (this.props.datePick == 2) {
return (!isInclusivelyAfterDay(date, moment(startCome).add(1, "day")) ||
isInclusivelyAfterDay(
date,
moment(endCome).add(1, "day")
)
);
} else {
return (!isInclusivelyAfterDay(date, start) ||
isInclusivelyAfterDay(
date,
moment(start).add(29, "days")
)
);
}
}
return false;
}
}
isDayHighlighted = {
() => false
}
navPrev = { <img
className = "calBtn calBtn-left"
src = {
`${isProd}/static/img/icon_calendar_prev.png`
}
alt = {
"left"
}
/>
}
navNext = { <img
className = "calBtn calBtn-right"
src = {
`${isProd}/static/img/icon_calendar_next.png`
}
alt = {
"right"
}
/>
}
onPrevMonthClick = {
day => {
this.checkMonthBeforeAvailability(day);
}
}
onNextMonthClick = {
day => {
this.checkMonthAfterAvailability(day);
}
}
/>
)
//*Extracted from "Selecter.js" ( which import the "SelecterDateRange.js")
<SelecterDateRange startText = "出發"
endText = "回程"
compareProps = {
this.compareProps
}
start = {
searchValues.startComeDate == null ? null : moment(searchValues.startComeDate)
}
end = {
searchValues.endComeDate == null ? null : moment(searchValues.endComeDate)
}
datePick = {
1
}
/>