datepickerから日付が選択されたときの年齢フィールドの自動入力

Question

datepickerから日付を選択すると、年齢フィールドが自動的に入力されます。現在、datepickerはスニペットで機能していません。理由はわかりません。また、PHPのセクションで働く年齢の計算コードを持っています。あなたが日付を選択するとすぐに年齢フィールドを入力するだけで助けが必要です。私はあなたがそれのためにajaxが必要だと読んだが、私は本当にそれを働かせることができませんでした。私はこの部分で作業している初心者ですので、助けてください。

< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" > < /script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0 - alpha.2/js/bootstrap.min.js " integrity=" 
 
sha384 - vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7 " crossorigin=" 
 
anonymous "></script> 
 
    <script src=" 
 
http: //cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> 
 

 

 

 
    < script type = "text/javascript" > 
 
    $(document).ready(function() { 
 

 
    $('#datetimepicker8').datepicker({ 
 

 
     icons: { 
 
     time: "fa fa-clock-o", 
 
     date: "fa fa-calendar", 
 
     up: "fa fa-arrow-up", 
 
     down: "fa fa-arrow-down" 
 
     } 
 
    }); 
 
    }); 
 

 

 

 

 
< /script>

<?php 
 

 
$dob=$_POST['birthdate']; 
 
$dob=explode("/", 
 
$dob); 
 
$age=(date("md", 
 
date("U", 
 
mktime(0, 
 
0, 
 
0, 
 
$dob[0], 
 
$dob[1], 
 
$dob[2]))) > date("md") ? ((date("Y") - $dob[2]) - 1):(date("Y") - $dob[2])); 
 
echo"age is" $age; 
 
    
 
?>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" /> 
 

 
<form method="post" id="signUpForm"> 
 
    <div class="container" id="signupContainer"> 
 

 
    <div class="form-group row"> 
 
     <label class="col-sm-2 form-control-label">Birthdate</label> 
 
     <div class="col-sm-5"> 
 
     <div class='input-group date' id='datetimepicker8'> 
 
      <input type='text' id="birthdate" class="form-control" placeholder="D.O.B" name="birthdate" /> 
 
      <span class="input-group-addon"> 
 
      <i class="fa fa-calendar" aria-hidden="true"></i> 
 
     </span> 
 
     </div> 
 
     </div> 
 

 
     <label class="col-sm-1 form-control-label">Age:</label> 
 
     <div class="col-sm-4"> 
 
     <input type="text" id="age" class="form-control" name="age" placeholder="Age" /> 
 

 
     </div> 
 
    </div> 
 

 
    </div> 
 
</form>

Answer 1

このコード、PHPコードが必要とされていません試してみてください。生年月日は、日付ピッカーの交換自体で計算されます。

$('#datetimepicker8').datepicker({ 

      icons: { 
      time: "fa fa-clock-o", 
      date: "fa fa-calendar", 
      up: "fa fa-arrow-up", 
      down: "fa fa-arrow-down" 
      }, 
    dateFormat: "dd/mm/yy" 
     }).on('change', function (ev) { 
        var selectDate = $('#datetimepicker8').val().split("/"); 

        var todayDate = new Date(); 
        var selectedDate = new Date(selectDate[2], selectDate[1], selectDate[0]); 
        var firstDate = new Date(todayDate.getFullYear(), todayDate.getMonth() + 1, todayDate.getDate()); 
        var diff = Math.floor(firstDate.getTime() - selectedDate.getTime()); 
        var day = 1000 * 60 * 60 * 24; 

        var days = Math.floor(diff/day); 
        var months = Math.floor(days/31); 
        var years = Math.floor(months/12); 

        if (years > 0) { 
         $('#age').val(years); 
        } else { 
         $('#age').val(''); 
        } 


        if (days <= -1) { 
         alert("Please select valid date of birth.") 
         $('#datetimepicker8').val(""); 
        } 
       });