0

古い予約システムのビューを更新中ですが、現在、カレンダー ウィジェットを更新するための解決策に行き詰まっています。サイトはレスポンシブなので、私は eternicode https://github.com/eternicode/bootstrap-datepickerが提供するブートストラップ デートピッカーを選びました。

ここで問題です。チェックインとチェックアウトの日付を 3 つの部分に分割し、PHP の日付をフォーマットする古い Datepicker があります (n = Month no先行ゼロ)) (j = Day no先行ゼロ) & (Y = Year 4 digit numeric)。

// Initiate Params
   $checkInDate = mktime(0,0,0,date("n"),date("j") + 1,date("Y"));
   $checkOutDate = mktime(0,0,0,date("n"),date("j") + 3,date("Y"));   
//CheckInDate
   if (!isset($daysI)){
      $daysI = date("j",$checkInDate);
   }
   if (!isset($monthsI)){
      $monthsI = date("n",$checkInDate);
   }
   if (!isset($yearI)){
      $yearI = date("Y",$checkInDate);
   }
//CheckOutDate
   if (!isset($daysS)){
      $daysS = date("j",$checkOutDate);
   }
   if (!isset($monthsS)){
      $monthsS = date("n",$checkOutDate);
   }
   if (!isset($yearS)){
      $yearS = date("Y",$checkOutDate);
   }

入力ボックスのマークアップは次のとおりです。

<input type='text' id='fulldate' name='fulldate'>
<label>Enter Day of Arrival (in the format DD) </label>
<input type="text" name="daysI" id="daysI" size="6" maxlength="6" /> 
<label>Enter Month of Arrival (in the format MM) </label>
<input type="text" name="monthsI" id="monthsI" size="6" maxlength="6" /> 
<label>Enter Year of Arrival (in the format YYYY) </label>
<input type="text" name="yearI" id="yearI" size="6" maxlength="6" />

ここで私は問題を抱えています。次の関数は jQuery UI で動作します。

$('#fulldate').datepicker({
    showAnim: 'fadeIn',
    dateFormat: 'd/m/yy',
    onSelect: function(dateText, inst) {
        var pieces = dateText.split('/');
        $('#daysI').val(pieces[0]);
        $('#daysI').val(pieces[1]);
        $('#daysI').val(pieces[2]);
    }
});

ただし、jQuery UI の代わりとして使用している bootstrap-datepicker で動作する同様のソリューションを取得できません。

$('#fulldate').datepicker({
    format: "d/m/yyyy",
    todayBtn: "linked",
    todayHighlight: true
    onSelect: function(dateText, inst) {
        var pieces = dateText.split('/');
        $('#daysI').val(pieces[0]);
        $('#monthsI').val(pieces[1]);
        $('#yearI').val(pieces[2]);
    }
});

解決策を事前に感謝します..

4

1 に答える 1

1

ドキュメントには、日付変更イベントをキャプチャする方法の例が示されています: bootstrap-datepicker Docs - Change Date Event

このようなものは正しい方向にあるはずです（テストされていません）：

$('#fulldate').datepicker()
.on('changeDate', function(ev){

  var newDate = new Date(ev.date);

   $('#daysI').val(newDate.getDate());
   $('#monthsI').val(newDate.getMonth());
   $('#yearI').val(newDate.getFullYear());

});
于 2014-05-24T14:58:00.883 に答える