基准日期选择器签入结账与间隔

时间:2014-05-28 22:21:43

标签: jquery datepicker zurb-foundation intervals

如果我从datepicker中选择了开始日期的当前日期并且我从间隔选择框中选择了“每周”,那么我想实施,然后必须在7天后在datepicker中开始结束日输入字段。我该如何实现呢?

这是我的HTML代码:

<div class="row">
                <div class="six columns b0">
                    <div class="form-row  field_text">
                        <label for="startDate" class="required">Start day *:</label><br>
                        <input type="text" id="startDate" name="start_datum" class="input_text date" data-parsley-required="" data-parsley-error-message="Bitte geben Sie das Startdatum von der Veranstaltung ein" value="" data-parsley-id="6889"><ul class="parsley-errors-list" id="parsley-id-6889"></ul>
                    </div>
                    <div class="form-row field_text">
                        <label for="intervall" class="required">Interval:</label><br>
                        <div class="select-box">
                            <span>everyday</span>
                            <select class="" name="intervall" id="intervall" data-parsley-id="9438">
                                <option value="1">everyday</option>
                                <option value="7">weekly</option>
                                <option value="14">every two weeks</option>
                            </select><ul class="parsley-errors-list" id="parsley-id-9438"></ul>
                        </div>
                    </div>

                </div>
                <div class="six columns b0">


                        <div class="form-row field_text hide" style="display: block;">
                        <label for="endDate" class="required">End day *:</label><br>
                        <input type="text" id="endDate" name="end_datum" class="input_text" value="" data-parsley-id="2334"><ul class="parsley-errors-list" id="parsley-id-2334"></ul>
                    </div>

这是我的jQuery代码:

var nowTemp = new Date();
      var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
      var checkin = jQuery('#startDate').fdatepicker({
          format: "dd.mm.yyyy",
          onRender: function (date) {
              return date.valueOf() < now.valueOf() ? 'disabled' : '';
          }
      }).on('changeDate', function (ev) {
              if (ev.date.valueOf() > checkout.date.valueOf()) {
                  var newDate = new Date(ev.date)
                  newDate.setDate(newDate.getDate() + 2);
              }
              checkin.hide();
              jQuery('#endDate')[0];
          }).data('datepicker');
      var checkout = jQuery('#endDate').fdatepicker({
          format: "dd.mm.yyyy",
          onRender: function (date) {
              return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
          }
      }).on('changeDate', function (ev) {
              checkout.hide();
          }).data('datepicker');

          jQuery("#startDate,#endDate").fdatepicker({
              autoclose: true,
              format: "dd.mm.yyyy",
              language: 'de',
              todayHighlight: false
          });

JSFIDDLE DEMO

希望有人可以帮助我。

0 个答案:

没有答案