Bootstrap Snippet year month and date show custome using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <div class="col-md-12">
         <div class="col-md-4">
                          <div class="col-md-4" id="padding6">
                              <label>Tenure</label>
                              <select class="form-control year" id="select61">
                                <option value="0">0 Year</option>
                                <option value="1">1 Year</option>
                                <option value="2">2 Year</option>
                                <option value="3">3 Year</option>
                                <option value="4">4 Year</option>
                                <option value="5">5 Year</option>
                              </select>
                          </div>
                          <div class="col-md-5" id="padding62">
                            <select class="form-control month" id="select62">
                                <option value="0">0 Month</option>
                                <option value="1">1 Month</option>
                                <option value="2">2 Month</option>
                                <option value="3">3 Month</option>
                                <option value="4">4 Month</option>
                                <option value="5">5 Month</option>
                                <option value="6">6 Month</option>
                                <option value="7">7 Month</option>
                                <option value="8">8 Month</option>
                                <option value="9">9 Month</option>
                                <option value="10">10 Month</option>
                                <option value="11">11 Month</option>
                                <option value="12">12 Month</option>
                            </select>
                          </div>
                          <div class="col-md-3" id="padding63">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 #padding6{
  padding: 0px;
 }
#padding63{
  padding-top: 29px;
  padding-left: 0px;
 }
 #padding62{
      padding-top: 29px;
    padding-left: 0px;
    padding-right: 0px;
 }
 #select62{
  border-left: 0px;
  border-radius: 0px;
 }
  #select61{
  border-right: 0px;
  border-radius: 0px;
 }
 .select62{
    padding: 8px;
    font-size: 10px;
    font-weight: 800;
 }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  $('.year').on('change',function(){
     var year=this.value;
     var month=$('.month').val();
     var onemonth='30';
     var totalmonth=month*onemonth;
     var oneyear='365';
     var totaldays=year*oneyear;
     var monthyear=parseInt(totalmonth)+parseInt(totaldays);
     $('.tdays').val(monthyear);
  })
  $('.month').on('change',function(){
     var month=this.value;
     var year=$('.year').val();
     var onemonth='30';
     var oneyear='365';
     var totalmonth=month*onemonth;
     var totalyear=year*oneyear;
     var monthyear=parseInt(totalmonth)+parseInt(totalyear);
     $('.tdays').val(monthyear);
  })
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"year month and date show custome"
Bootstrap 4.1.1 Snippet by anjan

Related: See More

Questions / Comments:

"year month and date show custome" Bootstrap 4.1.1 Snippet by anjan

Related: See More

Questions / Comments:

"year month and date show custome"
Bootstrap 4.1.1 Snippet by anjan