Skip to content

Instantly share code, notes, and snippets.

@cole007

cole007/index.html

Created August 22, 2014 10:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cole007/06c2e7d0d87394a3c01d to your computer and use it in GitHub Desktop.
Save cole007/06c2e7d0d87394a3c01d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="booking-item booking-item--left booking-item--full">
<label for="transfer1-time-day">Flight arrival date &amp; time <span class="tip">(please use 24hr format)</span></label>
<div class="booking-item__group">
<div class="booking-item--small">
<select name="transfer1-time-day" id="transfer1-time-day">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option selected>31</option>
</select>
</div>
<div class="booking-item--medium">
<select name="transfer1-time-month" class="time-month" id="transfer1-time-month" data-day="#transfer1-time-day">
<option>August 2014</option>
<option>September 2014</option>
<option>October 2014</option>
<option selected>November 2014</option>
<option>December 2014</option>
<option>January 2015</option>
<option>February 2015</option>
<option>March 2015</option>
<option>April 2015</option>
<option>May 2015</option>
<option>June 2015</option>
<option>July 2015</option>
</select>
</div>
</div>
</div>
<script id="jsbin-javascript">
var app = {
init: function() {
this.monthSelect = $( "#transfer1-time-day" ).clone();
this.getVars();
this.bookingForm();
},
getVars: function() {
this.daysMax = {
'january': 31,
'february': 28,
'march':31,
'april':30,
'may':31,
'june':30,
'july':31,
'august':31,
'september':30,
'october':31,
'november':30,
'december':31
};
},
bookingForm: function() {
var self = this;
function doDays(month,day) {
var monthArr = month.split(" ", 2);
var thisMonth = monthArr[0];
var days = self.daysMax[thisMonth];
var selected = $(day).find('option:selected').text();
if (thisMonth == 'february' && (monthArr[1] % 4) === 0) days += 1;
select = self.monthSelect.clone();
var selectOptions = $(select).find('option').filter(function() {
return parseInt($(this).text(), 10) <= days;
});
$(day).html(selectOptions).find('option:selected').attr('selected',false);
$(day).find('option:contains('+selected+')').attr('selected',true);
if (selected > days) {
$(day).find('option:contains('+days+')').attr('selected',true);
}
}
$('.time-month').each(function() {
var day = $(this).data('day');
var monthYear = $(this).val().toLowerCase();
doDays(monthYear,day);
});
$('.time-month').on('change',function() {
var day = $(this).data('day');
var monthYear = $(this).val().toLowerCase();
doDays(monthYear,day);
});
}
};
jQuery(function($){
app.init();
});
</script>
</body>
</html>
Raw
jsbin.muzur.js
var app = {
init: function() {
this.monthSelect = $( "#transfer1-time-day" ).clone();
this.getVars();
this.bookingForm();
},
getVars: function() {
this.daysMax = {
'january': 31,
'february': 28,
'march':31,
'april':30,
'may':31,
'june':30,
'july':31,
'august':31,
'september':30,
'october':31,
'november':30,
'december':31
};
},
bookingForm: function() {
var self = this;
function doDays(month,day) {
var monthArr = month.split(" ", 2);
var thisMonth = monthArr[0];
var days = self.daysMax[thisMonth];
var selected = $(day).find('option:selected').text();
if (thisMonth == 'february' && (monthArr[1] % 4) === 0) days += 1;
select = self.monthSelect.clone();
var selectOptions = $(select).find('option').filter(function() {
return parseInt($(this).text(), 10) <= days;
});
$(day).html(selectOptions).find('option:selected').attr('selected',false);
$(day).find('option:contains('+selected+')').attr('selected',true);
if (selected > days) {
$(day).find('option:contains('+days+')').attr('selected',true);
}
}
$('.time-month').each(function() {
var day = $(this).data('day');
var monthYear = $(this).val().toLowerCase();
doDays(monthYear,day);
});
$('.time-month').on('change',function() {
var day = $(this).data('day');
var monthYear = $(this).val().toLowerCase();
doDays(monthYear,day);
});
}
};
jQuery(function($){
app.init();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment