如何使用DateRangePicker获取静态网页中的当前日期?

时间:2019-07-02 08:36:21

标签: javascript node.js reactjs

我正在使用带有日期范围选择器的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
    }
    />

0 个答案:

没有答案