New DateRangePicker
This commit is contained in:
Kevin Adametz
parent
faa508b4ca
commit
81e42b76f5
12 changed files with 398 additions and 88 deletions
|
|
@ -19,10 +19,13 @@
|
|||
|
||||
<div class="form-group">
|
||||
<label class="st-required control-label required">Datum</label>
|
||||
<div class="input-daterange input-group" id="date-range">
|
||||
{{ form_widget(form.fromDate) }}
|
||||
<span class="input-group-addon bg-info b-0 text-white">bis</span>
|
||||
{{ form_widget(form.toDate) }}
|
||||
<input type="text" id="fewo_booking_request_datepicker" name="fewo_booking_request_datepicker" required="required" class="form-control" placeholder="dd.mm.yyyy bis dd.mm.yyyy" value="">
|
||||
<div class="hidden">
|
||||
<div class="input-daterange input-group" id="date-range">
|
||||
{{ form_widget(form.fromDate) }}
|
||||
<span class="input-group-addon bg-info b-0 text-white">bis</span>
|
||||
{{ form_widget(form.toDate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -108,14 +111,15 @@
|
|||
|
||||
var maxDate = "{{ lastSeason.toDate|date('d-m-y') }}";
|
||||
|
||||
$('#appbundle_feworeservation_fromDate, #appbundle_feworeservation_toDate').daterangepicker({
|
||||
|
||||
|
||||
|
||||
$('#fewo_booking_request_datepicker').daterangepicker({
|
||||
isInvalidDate: checkDates,
|
||||
isCustomDate: checkCustom,
|
||||
"minDate": moment(),
|
||||
"maxDate": maxDate,
|
||||
"timePickerSeconds": true,
|
||||
|
||||
|
||||
"locale": {
|
||||
"format": "DD.MM.YYYY",
|
||||
"separator": " - ",
|
||||
|
|
@ -151,35 +155,40 @@
|
|||
"firstDay": 1
|
||||
},
|
||||
autoApply: true,
|
||||
autoUpdateInput: false,
|
||||
autoUpdateInput: true,
|
||||
singleDatePicker: false,
|
||||
alwaysShowCalendars: true,
|
||||
"startDate": startDate,
|
||||
"endDate": endDate,
|
||||
allowInput: true,
|
||||
}, function(start, end, label) {
|
||||
console.log(start);
|
||||
// console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
|
||||
|
||||
// console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
|
||||
// Lets update the fields manually this event fires on selection of range
|
||||
var selectedStartDate = start.format('DD.MM.YYYY'); // selected start
|
||||
var selectedEndDate = end.format('DD.MM.YYYY'); // selected end
|
||||
|
||||
|
||||
$checkinInput = $('#appbundle_feworeservation_fromDate');
|
||||
$checkoutInput = $('#appbundle_feworeservation_toDate');
|
||||
|
||||
$checkoutInput = $('#appbundle_feworeservation_toDate');
|
||||
|
||||
// Updating Fields with selected dates
|
||||
$checkinInput.val(selectedStartDate);
|
||||
$checkoutInput.val(selectedEndDate);
|
||||
|
||||
|
||||
/*
|
||||
// Setting the Selection of dates on calender on CHECKOUT FIELD (To get this it must be binded by Ids not Calss)
|
||||
var checkOutPicker = $checkoutInput.data('daterangepicker');
|
||||
checkOutPicker.setStartDate(selectedStartDate);
|
||||
checkOutPicker.setEndDate(selectedEndDate);
|
||||
|
||||
|
||||
// Setting the Selection of dates on calender on CHECKIN FIELD (To get this it must be binded by Ids not Calss)
|
||||
var checkInPicker = $checkinInput.data('daterangepicker');
|
||||
checkInPicker.setStartDate(selectedStartDate);
|
||||
checkInPicker.setEndDate(selectedEndDate);
|
||||
|
||||
*/
|
||||
});
|
||||
|
||||
|
||||
$('#appbundle_feworeservation_fromDate, #appbundle_feworeservation_toDate').on('show.daterangepicker', function(ev, picker) {
|
||||
console.log(picker.startDate.format('YYYY-MM-DD'));
|
||||
console.log(picker.endDate.format('YYYY-MM-DD'));
|
||||
|
|
|
|||
|
|
@ -19,10 +19,14 @@
|
|||
|
||||
<div class="form-group">
|
||||
<label class="st-required control-label required">Datum</label>
|
||||
<div class="input-daterange input-group" id="date-range">
|
||||
{{ form_widget(form.fromDate) }}
|
||||
<span class="input-group-addon bg-info b-0 text-white">bis</span>
|
||||
{{ form_widget(form.toDate) }}
|
||||
<input type="text" id="fewo_booking_request_datepicker" name="fewo_booking_request_datepicker" required="required" class="form-control" placeholder="dd.mm.yyyy bis dd.mm.yyyy" value="">
|
||||
|
||||
<div class="hidden">
|
||||
<div class="input-daterange input-group" id="date-range">
|
||||
{{ form_widget(form.fromDate) }}
|
||||
<span class="input-group-addon bg-info b-0 text-white">bis</span>
|
||||
{{ form_widget(form.toDate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -103,14 +107,12 @@
|
|||
|
||||
var maxDate = "{{ lastSeason.toDate|date('d-m-y') }}";
|
||||
|
||||
$('#appbundle_feworeservation_fromDate, #appbundle_feworeservation_toDate').daterangepicker({
|
||||
$('#fewo_booking_request_datepicker').daterangepicker({
|
||||
isInvalidDate: checkDates,
|
||||
isCustomDate: checkCustom,
|
||||
"minDate": moment(),
|
||||
"maxDate": maxDate,
|
||||
"timePickerSeconds": true,
|
||||
|
||||
|
||||
"locale": {
|
||||
"format": "DD.MM.YYYY",
|
||||
"separator": " - ",
|
||||
|
|
@ -146,33 +148,37 @@
|
|||
"firstDay": 1
|
||||
},
|
||||
autoApply: true,
|
||||
autoUpdateInput: false,
|
||||
autoUpdateInput: true,
|
||||
singleDatePicker: false,
|
||||
alwaysShowCalendars: true,
|
||||
"startDate": startDate,
|
||||
"endDate": endDate,
|
||||
allowInput: true,
|
||||
}, function(start, end, label) {
|
||||
console.log(start);
|
||||
// console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
|
||||
|
||||
// console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
|
||||
// Lets update the fields manually this event fires on selection of range
|
||||
var selectedStartDate = start.format('DD.MM.YYYY'); // selected start
|
||||
var selectedEndDate = end.format('DD.MM.YYYY'); // selected end
|
||||
|
||||
|
||||
$checkinInput = $('#appbundle_feworeservation_fromDate');
|
||||
$checkoutInput = $('#appbundle_feworeservation_toDate');
|
||||
|
||||
$checkoutInput = $('#appbundle_feworeservation_toDate');
|
||||
|
||||
// Updating Fields with selected dates
|
||||
$checkinInput.val(selectedStartDate);
|
||||
$checkoutInput.val(selectedEndDate);
|
||||
|
||||
|
||||
/*
|
||||
// Setting the Selection of dates on calender on CHECKOUT FIELD (To get this it must be binded by Ids not Calss)
|
||||
var checkOutPicker = $checkoutInput.data('daterangepicker');
|
||||
checkOutPicker.setStartDate(selectedStartDate);
|
||||
checkOutPicker.setEndDate(selectedEndDate);
|
||||
|
||||
|
||||
// Setting the Selection of dates on calender on CHECKIN FIELD (To get this it must be binded by Ids not Calss)
|
||||
var checkInPicker = $checkinInput.data('daterangepicker');
|
||||
checkInPicker.setStartDate(selectedStartDate);
|
||||
checkInPicker.setEndDate(selectedEndDate);
|
||||
|
||||
*/
|
||||
});
|
||||
|
||||
$('#appbundle_feworeservation_fromDate, #appbundle_feworeservation_toDate').on('show.daterangepicker', function(ev, picker) {
|
||||
|
|
|
|||
|
|
@ -284,9 +284,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<p>
|
||||
{{ getContextBySlug('gewuenschte-zahlungsart') }}
|
||||
{% if(travel_program.category.id != 1) %}
|
||||
{{ getContextBySlug('abweichende-anzahlungsbedingungen') }}
|
||||
{% if(travel_program.paymentConditions != "") %}
|
||||
{{ travel_program.paymentConditions|raw }}
|
||||
{% else %}
|
||||
{{ getContextBySlug('anzahlungsbedingungen') }}
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -62,14 +62,20 @@
|
|||
<tr>
|
||||
<td><label class="st-required control-label required">Datum</label></td>
|
||||
<td style="white-space: normal;">
|
||||
<div class="form-group" style="margin-bottom:0;">
|
||||
<div class="row margin-bottom:0;">
|
||||
<div class="form-group col-xs-12 col-md-6" style="margin-bottom:0;">
|
||||
<input type="text" id="fewo_booking_request_datepicker" name="fewo_booking_request_datepicker" required="required" class="form-control" placeholder="dd.mm.yyyy bis dd.mm.yyyy" value="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group hidden" style="margin-bottom:0;">
|
||||
<div class="input-daterange input-group" id="date-range">
|
||||
{{ form_widget(form.fromDate) }}
|
||||
<span class="input-group-addon bg-info b-0 text-white">bis</span>
|
||||
{{ form_widget(form.toDate) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="small alert alert-success" style="margin-bottom: 0; padding-top: 6px; padding-bottom: 6px">Bei Datumsänderung, erst immer das Anreisedatum, dann das Abreisedatum im Kalender auswählen.</div>
|
||||
|
||||
<div class="small alert alert-success" style="margin-bottom: 0; padding-top: 6px; padding-bottom: 6px">Bei Datumsänderung, immer erst das Anreisedatum, dann das Abreisedatum im Kalender auswählen.</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- <tr>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue