datepickerの日付範囲の日間隔を作成するにはどうすればよいですか？

私はPikaday Pluginを使用しています。私が望むように予約フォームを作成しました。私の意見では、1つの問題を除いて今は素晴らしいです。datepickerの日付範囲の日間隔を作成するにはどうすればよいですか？

私は2つの入力日付if you click this link you will see

間のため15日に設定すると、私はオート次の焦点と同じ形式を持っていますが、どのようにすることができ、私は15日間の私の日付レンジ機能を適用できませんでした日付範囲機能がありますあなたは私たちが15日間の範囲で日付を検証することができますどのように、コードの下に確認することができます

and by the way this is my auto next form link

function getMaxDate(element){ 
    if(element.id=='checkout') 
    return new Date(new Date(element.parentNode.querySelector('#checkin').value).getTime()+(15*24*60*60*1000)); 
else 
    return new Date(2020, 12, 31); 
    } 
function getMinDate(element){ 
    if(element.id=='checkout') 
    return new Date(element.parentNode.querySelector('#checkin').value); 
    else 
    return new Date(); 
    }

出典

2017-02-20 ani_css

下回っである私のコードは、それを適用します。あなたは読み込み時にチェックアウト日付を検証しようとしていたので、チェックイン日付を得ることができなかったので、その日は動作しませんでした。

$(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: getMaxDate(id), 
 
     onSelect: function() { 
 
     e = this.getDate(); 
 
     }, 
 
     onSelect: whenClosed 
 
    }); 
 
    } 
 

 
    assignPicker('checkin', function() { 
 

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

 

 
}); 
 
function getMaxDate(id){ 
 
    if(id=='checkout') 
 
    return new Date(new Date($('#checkin').val()).getTime()+(15*24*60*60*1000)); 
 
else 
 
    return new Date(2020, 12, 31); 
 
    }

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/pikaday/1.5.1/pikaday.min.js"></script> 
 

 
    <script src="https://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.js"></script> 
 

 
</body> 
 

 
</html>

出典

2017-02-20 09:38:54 Bharat

と私は仕事に今何をすべきかを持っているのですか？ –

またはコードをどのように置き換える必要がありますか？ –

はい、あなたは置き換えることができますが、上記のコードを受け入れ、コードを削除しないように注意してくださいいくつかの他のコードがあるかどうかを確認してくださいFYI – Bharat

datepickerの日付範囲の日間隔を作成するにはどうすればよいですか？

答えて

関連する問題