首页 > 解决方案 > 我如何使“日期选择器表单验证”并且只接受两个月前的输入

问题描述

我正在制作预订表格,我需要我的客户知道他们只能选择当天前两个月的日期,我该如何让我的表格做到这一点?

<form class="form js-step-form form--stacked form--full-width" novalidate="novalidate" action="form2.html" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="74uJISV+9itpMIkGoDY4r2o9beGrLyTV735R0fjIm6kzWT8rLry/7mSxZRj40vHAw8MXjg9WlcC+7p9y6eIDVQ=" />
    <input type="hidden" name="step" value="move_in" />
      <input value="Website" type="hidden" name="rental_application[source]" id="rental_application_source" />
      <input type="hidden" name="rental_application[guest_card_uid]" id="rental_application_guest_card_uid" />
      <input type="hidden" name="listable_uid" id="listable_uid" value="529f9fcd-b5fc-478f-8c5b-44fbec44f051" />

    <div class="grid">
      <div class="grid__medium-6 grid__small-12">
        <div class="form__row"><label class="form__row__label" for="rental_application_desired_move_in">Minimum Move-in Date</label><div class="form__row__body"><div class="form__row__field-wrapper"><div class="js-gears-date input-add-on"><input class="js-datepicker js-move-in-gears-date" type="text" value="07/01/2019" name="rental_application[desired_move_in]" id="rental_application_desired_move_in" /><span class="js-datepicker-trigger input-add-on__append button"><span class="icon icon-calendar"></span></span></div></div></div></div>
      </div>
    </div>


        <div class="js-applicant-type-radio-buttons">
          <input type="hidden" name="applicant_type[applicant_type]" value="" /><div class="form__row u-space-bs"><label for="applicant_type_applicant_type_0"><input type="radio" value="0" checked="checked" name="applicant_type[applicant_type]" id="applicant_type_applicant_type_0" /><label class="collection_radio_buttons" for="applicant_type_applicant_type_0">I am applying as a <strong>tenant</strong>. (I will be living on the property.)</label></label></div><div class="form__row u-space-bs"><label for="applicant_type_applicant_type_1"><input type="radio" value="1" name="applicant_type[applicant_type]" id="applicant_type_applicant_type_1" /><label class="collection_radio_buttons" for="applicant_type_applicant_type_1">I am applying as a <strong>co-signer/guarantor</strong> for another applicant. (I will not be living on the property.)</label></label></div>
        </div>           
<button onclick="myFunction()">Start Application</button>

我希望用户会收到一条错误消息,说他们必须选择比当前日期提前两个月的日期,而提前两个月选择日期的用户应该继续前进

标签: javascriptformsvalidation

解决方案


您可能可以充分利用https://momentjs.com/ 这将允许您执行以下操作:moment().add(60, 'days').calendar();


推荐阅读