기간을 적용하는 방법은 무엇입니까?

예는 내 예약 양식이지만 날짜 범위 아니에요 그리고 그것은 Pikaday datepicker plugin 내가 그것을 날짜 범위를 만들고 싶어하고 I find out example하지만기간을 적용하는 방법은 무엇입니까?

작동하지 않았고 여기에 내 코드

$(document).ready(function() { 
 

 
    $('.flexdatalist').flexdatalist({ 
 
    minLength: 0, 
 
    searchContain: true, 
 
    }).on('select:flexdatalist', function() { 
 
    $('#checkin').trigger("click"); 
 
    }); 
 

 
    assignPicker = function(id, whenClosed) { 
 
    if (typeof whenClosed !== 'function') { 
 
     whenClosed = null; 
 
    } 
 

 
    return new Pikaday({ 
 
     numberOfMonths: 2, 
 
     field: document.getElementById(id), 
 
     format: "DD.MM.YYYY", 
 
     minDate: new Date(), 
 
     firstDay: 1, 
 
     maxDate: new Date(2020, 12, 31), 
 
     onSelect: whenClosed 
 
    }); 
 
    } 
 

 
    var checkoutPicker = assignPicker('checkout', function() { 
 
    $('#select').trigger("click"); 
 
    }); 
 

 
    var checkinPicker = assignPicker('checkin', function() { 
 
    var maxDate = this.getMoment().add(15, 'days'); 
 
    checkoutPicker.setMaxDate(maxDate.toDate()); 
 
    checkoutPicker.setMinDate(this.getDate()); 
 
    checkoutPicker.setDate(null); 
 
    }); 
 

 
});

body { 
 
    padding: 30px; 
 
} 
 
input, select { 
 
    width: 100%; 
 
    padding: 10px; 
 
    border: 1px solid #ccc; 
 
}

<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" /> 
 
    <link rel="stylesheet" href="https://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.css" /> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-3 col-md-3 col-sm-3"> 
 
     <input type="text" name="" class='flexdatalist' data-min-length='1' list='languages' name='language' /> 
 
     <datalist id="languages"> 
 
      <option value="PHP">PHP</option> 
 
      <option value="JavaScript">JavaScript</option> 
 
      <option value="Cobol">Cobol</option> 
 
      <option value="C#">C#</option> 
 
      <option value="C++">C++</option> 
 
      <option value="Java">Java</option> 
 
      <option value="Pascal">Pascal</option> 
 
      <option value="FORTRAN">FORTRAN</option> 
 
      <option value="Lisp">Lisp</option> 
 
      <option value="Swift">Swift</option> 
 
      <option value="ActionScript">ActionScript</option> 
 
     </datalist> 
 
     </div> 
 
     <div class="col-lg-3 col-md-3 col-sm-3"> 
 
      <input type="text" class="checkin" id="checkin" /> 
 
     </div> 
 
     <div class="col-lg-3 col-md-3 col-sm-3"> 
 

 
      <input type="text" class="checkout" id="checkout" /> 
 
     </div> 
 
     <div class="col-lg-3 col-md-3 col-sm-3"> 
 
<form action="" method="get"> 
 
     <select name="select" id="select"> 
 
      <option value="0">Choose</option> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
      <option value="4">4</option> 
 
      <option value="5">5</option> 
 
      <option value="6">6</option> 
 
      <option value="7">7</option> 
 
     </select> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script> 
 
    <script src="https://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.js"></script> 
 
</body> 
 
</html>

click to see on codepen

출처

2017-02-23 ani_css

나는이 시도 당신을 추천 할 것입니다뿐만 아니라 http://www.daterangepicker.com/ –

감사 Saurabh이 날짜 선택기 우리가 pikaday –

좋아, 그래서 당신은 선택기에서 실수를하고있다.

나는 당신이 당신의 더 두 가지 기능 startPicker 및 endPicker가 id에 전달 된 값을 상속하는 사이에 assignPicker과의 id을 전달하는 참조한다. 합니다 (assignPicker 전달) var id이 startPicker 또는 endPicker 모두 공통으로 startPicker 또는 endPicker가 호출 될 때마다 같은 충돌을 일으키는

는 모두 동일한 DOM 객체의 id를 얻을.

당신은 그것들을 분리하거나 그냥 인수로 전달하고 함수 내에서 가져 오는 대신에 id을 직접 할당해야합니다.

startPicker = new Pikaday({ 
     numberOfMonths: 2, 
     field: document.getElementById("checkin"), 
     format: "DD.MM.YYYY", 
     firstDay: 1, 
     minDate: new Date(), 
     maxDate: new Date(2020, 12, 31), 
     onSelect: function() { 
      startDate = this.getDate(); 
      updateStartDate(); 
     } 
    }), 
    endPicker = new Pikaday({ 
     field: document.getElementById("checkout"), 
     minDate: new Date(), 
     maxDate: new Date(2020, 12, 31), 
     onSelect: function() { 
      endDate = this.getDate(); 
      updateEndDate(); 
     } 
    }),

이렇게하면 범위가 수정됩니다.

는 여기 업데이트 codepen

출처

2017-02-23 07:18:36

를 사용해야하는 이유는 웹 사이트에서 사용하고있다 예, 이전에 시도했지만 23 점만 선택할 수 있습니까? –

기계에서 현재 날짜로 선택기를 초기화하는'minDate : new Date() '를 사용하고 있기 때문에 –

ouuw.there는 15 일 안에 두 번 입력 –

기간을 적용하는 방법은 무엇입니까?

답변

관련 문제