angular
.module('demoApp', ['mobiscroll-form', 'mobiscroll-range', 'mobiscroll-select'])
.controller('demoController', ['$scope', function ($scope) {
var now = new Date(),
departureDate,
returnDate;
departureDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 3);
returnDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 7);
function setText(sel, txt) {
sel.parentNode.querySelector('input').value = txt;
}
$scope.origin = 'LTN';
$scope.destination = '';
$scope.timeRange = [departureDate, returnDate];
$scope.isOneWay = false;
$scope.tripType = 'round';
$scope.changeTripType = function (type) {
$scope.isOneWay = type;
if ($scope.isOneWay) {
$scope.timeRange = [departureDate, null];
} else {
returnDate = new Date(departureDate.getFullYear(), departureDate.getMonth(), departureDate.getDate() + 4);
$scope.timeRange = [departureDate, returnDate];
}
};
$scope.settings = {
lang: ' ',
theme: ' ',
themeVariant: ' '
};
$scope.rangeSettings = {
theme: ' ',
themeVariant: ' ',
lang: ' ',
display: 'bottom',
endInput: '.md-return-date',
min: now,
showSelector: false,
onSetDate: function (event, inst) {
if ($scope.isOneWay && event.control == 'calendar' && event.active == 'start') {
inst._isVisible = false;
inst.setActiveDate('start');
inst._isVisible = true;
}
if (inst._markup) {
inst._isValid = true;
inst._markup.find('.mbsc-fr-btn-s .mbsc-fr-btn').removeClass('mbsc-fr-btn-d');
}
},
onBeforeClose: function () {
if ($scope.isOneWay) {
return true;
}
},
onSet: function (event, inst) {
var values = inst.getVal();
departureDate = values[0];
if (!$scope.isOneWay) {
returnDate = values[1];
}
}
};
$scope.selectSettings = {
multiline: 2,
height: 50,
data: {
url: 'https://trial.mobiscroll.com/airports/',
remoteFilter: true,
dataType: 'jsonp',
processResponse: function (data) {
var i,
item,
ret = [];
if (data) {
for (i = 0; i < data.length; i++) {
item = data[i];
ret.push({
value: item.code,
text: item.name,
html: '<div style="font-size:16px;line-height:18px;">' + item.name + '</div><div style="font-size:10px;line-height:12px;">' + item.location + ', ' + item.code + '</div>'
});
}
}
return ret;
}
},
filter: true,
placeholder: 'Please select'
};
}]);
<div ng-app="demoApp" ng-controller="demoController">
<div mobiscroll-form="settings" class="md-flight-booking" style="display:none">
<div class="md-header">Book a flight</div>
<div class="md-ftype-cont">
<label>
Round trip
<input type="radio" data-role="segmented" value="round" name="triptype" class="md-flight-type" ng-model="tripType" ng-change="changeTripType(false)" checked />
</label>
<label>
One way
<input type="radio" data-role="segmented" value="oneway" name="triptype" class="md-flight-type" ng-model="tripType" ng-change="changeTripType(true)" />
</label>
</div>
<label>
Origin
<select class="md-place-select md-origin" mobiscroll-select="selectSettings" ng-model="origin">
<option value="LTN">London Luton</option>
</select>
</label>
<label>
Destination
<select class="md-place-select" mobiscroll-select="selectSettings" ng-model="destination">
<option>Please select a city</option>
</select>
</label>
<div class="md-time-range">
<label>
Leaving
<input type="text" class="md-leaving-date" mobiscroll-range="rangeSettings" ng-model="timeRange" />
</label>
<label>
Returning
<input type="text" class="md-return-date" ng-disabled="isOneWay" />
</label>
</div>
<div>
<label for="md-flight-adults">Adults</label>
<span class="mbsc-desc">From 14 years</span>
<input id="md-flight-adults" type="number" data-role="stepper" min="1" value="1" max="15" data-val="left" />
</div>
<div>
<label for="md-flight-children">Children</label>
<span class="mbsc-desc">2-14 years</span>
<input id="md-flight-children" type="number" data-role="stepper" max="15" data-val="left" />
</div>
<div>
<label for="md-flight-infant">Infant</label>
<span class="mbsc-desc">0-2 years</span>
<input id="md-flight-infant" type="number" data-role="stepper" max="10" data-val="left" />
</div>
<label>
Economy
<input type="radio" data-role="segmented" name="flight_type" checked />
</label>
<label>
Comfort
<input type="radio" data-role="segmented" name="flight_type" />
</label>
<label>
Business
<input type="radio" data-role="segmented" name="flight_type" />
</label>
<div class="mbsc-padding">
<button class="mbsc-btn-block">Find Flights</button>
</div>
</div>
</div>
.md-flight-booking {
padding: 0!important;
}
.md-filter-cont {
padding: .5em;
}
/* header */
.md-flight-booking .md-ftype-cont {
padding-top: 1.15em;
}
.md-flight-booking .md-header {
background: #4ECCC4;
padding: 1em;
color: #fff;
text-align: center;
}
.mbsc-material .md-header {
background: #009688;
}
.mbsc-android-holo .md-header {
background: #31c6e7;
}
.mbsc-ios .md-header {
background: #1272dc;
color: #fff;
}
.mbsc-ios-dark .md-header {
background: #ff8400;
color: #1a1a1a;
}
.mbsc-wp .md-header {
background: #1a9fe0;
color: #000;
}
.mbsc-material-dark .md-header {
color: #303030;
background: #81ccc4;
}
.mbsc-android-holo-light .md-header {
color: #000;
}
.mbsc-mobiscroll-dark .md-header {
color: #263238;
}
/*select*/
.md-airports-booking .mbsc-sc-itm,
.md-airports-booking .dw-li {
text-align: center;
}
.md-airports-booking .md-airport {
width: 100%;
display: inline-block;
vertical-align: middle;
letter-spacing: normal;
}
.md-airports-booking .md-airport-name {
height: 18px;
line-height: 18px;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
}
.md-airports-booking .md-airport-location {
height: 12px;
line-height: 12px;
font-size: 10px;
overflow: hidden;
text-overflow: ellipsis;
}
.md-airports-booking #filter_input {
width: 100%;
padding: 6px;
box-sizing: border-box;
}
/* range inputs */
.md-flight-booking .md-time-range {
overflow: hidden;
width: 99%;
}
.md-flight-booking.mbsc-ios .md-time-range {
background: #fff;
}
.md-flight-booking .md-time-range .mbsc-input {
float: left;
width: 50%;
box-sizing: border-box;
}
.md-flight-booking.mbsc-ios .md-time-range .mbsc-input {
display: block;
}
.md-flight-booking.mbsc-ios .md-time-range .mbsc-input .mbsc-label {
font-size: 14px;
padding-left: 1.14285em;
padding-top: 0.75em;
line-height: 22px;
}
.md-flight-booking.mbsc-ios .md-time-range .mbsc-input .mbsc-label {
width: 100%;
}
.md-time-range .mbsc-input:first-child {
padding-right: .5em;
}
.md-time-range .mbsc-input:last-child {
padding-left: .5em;
}
/* Stepper */
.md-flight-booking.mbsc-form .mbsc-stepper-cont {
padding-top: 1.125em;
padding-bottom: 1.125em;
}