Fixing css bugs, Changed booking form, Changed booking input from range to two separated inputs , Change booking view validations

This commit is contained in:
Levi 2016-09-15 23:16:21 -05:00
parent 974fdd3419
commit a7de458a02
5 changed files with 93 additions and 40 deletions

View file

@ -58,19 +58,54 @@ class BookingBillingForm(BillingAddressForm):
class BookingDateForm(forms.Form):
start_date = forms.DateField(required=False, widget=forms.HiddenInput())
end_date = forms.DateField(required=False, widget=forms.HiddenInput())
date_range = forms.CharField(required=False,
widget=forms.TextInput(attrs={'id': 'booking-date-range'}))
start_date = forms.DateField(required=False,
widget=forms.TextInput(attrs={'id': 'booking-date-1',
'value': ''}))
end_date = forms.DateField(required=False,
widget=forms.TextInput(attrs={'id': 'booking-date-2'}))
def clean_date_range(self):
date_range = self.cleaned_data.get('date_range')
dates = date_range.replace(' ', '').split('-')
try:
start_date, end_date = [datetime.strptime(date_string, "%m/%d/%Y").date()
for date_string in dates]
except ValueError:
raise forms.ValidationError("Submit valid dates.")
# def clean_date_range(self):
# date_range = self.cleaned_data.get('date_range')
# dates = date_range.replace(' ', '').split('-')
# try:
# start_date, end_date = [datetime.strptime(date_string, "%m/%d/%Y").date()
# for date_string in dates]
# except ValueError:
# raise forms.ValidationError("Submit valid dates.")
# if start_date > end_date:
# raise forms.ValidationError("Your end date must be greather than your start date.")
# q1 = Q(start_date__lte=start_date, end_date__gte=start_date)
# q2 = Q(start_date__gt=start_date, start_date__lte=end_date)
# if Booking.objects.filter(q1 | q2).exists():
# raise forms.ValidationError("You already have a booking in these dates.")
# return start_date, end_date
def clean_start_date(self):
start_date = self.cleaned_data.get('start_date')
if not start_date:
raise forms.ValidationError("This field is required.")
# try:
# start_date = datetime.strptime(start_date, "%m/%d/%Y").date()
# except ValueError:
# raise forms.ValidationError("Submit valid dates.")
return start_date
def clean_end_date(self):
end_date = self.cleaned_data.get('end_date')
if not end_date:
raise forms.ValidationError("This field is required.")
return end_date
def clean(self):
start_date = self.cleaned_data.get('start_date')
end_date = self.cleaned_data.get('end_date')
if not start_date or not end_date:
return self.cleaned_data
if start_date > end_date:
raise forms.ValidationError("Your end date must be greather than your start date.")
@ -80,13 +115,4 @@ class BookingDateForm(forms.Form):
if Booking.objects.filter(q1 | q2).exists():
raise forms.ValidationError("You already have a booking in these dates.")
return start_date, end_date
def clean(self):
# import pdb
# pdb.set_trace()
if self.cleaned_data.get('date_range'):
start_date, end_date = self.cleaned_data.get('date_range')
self.cleaned_data['start_date'] = start_date
self.cleaned_data['end_date'] = end_date
return self.cleaned_data

View file

@ -3,23 +3,44 @@ $( document ).ready(function() {
// $('#booking-date-range').daterangepicker();
var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
// var tomorrow = today.setDate(today.getDate() + 1);
$('#booking-date-range').daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
},
minDate: tomorrow,
$('#booking-date-1').datetimepicker({
// minDate: tomorrow,
format: 'MM/d/YYYY',
defaultDate: false
});
$('#booking-date-2').datetimepicker({
useCurrent: false, //Important! See issue #1075
format: 'MM/d/YYYY',
});
$("#booking-date-1").on("dp.change", function (e) {
$('#booking-date-2').data("DateTimePicker").minDate(e.date);
});
$("#booking-date-2").on("dp.change", function (e) {
$('#booking-date-1').data("DateTimePicker").maxDate(e.date);
});
$('#booking-date-range').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
// var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
// // var tomorrow = today.setDate(today.getDate() + 1);
// $('#booking-date-range').daterangepicker({
// autoUpdateInput: false,
// locale: {
// cancelLabel: 'Clear'
// },
// minDate: tomorrow,
// });
$('#booking-date-range').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('Select your dates');
});
// $('#booking-date-range').on('apply.daterangepicker', function(ev, picker) {
// $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
// });
// $('#booking-date-range').on('dp.cancel', function(ev, picker) {
// $(this).val('Select your dates');
// });
});

View file

@ -14,17 +14,19 @@
<h2 class="signup-lead">Start coworking at Digital Glarus! <br> Membership costs only
<strong>35CHF</strong> per month.<br> 2 free working days included!</h2>
<hr class="primary">
{% bootstrap_form_errors form layout='inline' %}
<div class="signup-form form-group row">
<div class="col-md-12">
<input type="hidden" name="next" value="{{ request.GET.next }}">
<form action="" method="post" class="form" novalidate>
{% csrf_token %}
{% bootstrap_form_errors form layout='inline' %}
{% bootstrap_form_errors form type='non_fields'%}
{% for field in form %}
{% bootstrap_field field show_label=False %}
{% endfor %}
<!-- <input class="form-control" placeholder="Select your dates" type="text" id="booking-date-range" name="date_range"> -->
<br/>
<button type="submit" class="btn btn-primary btn-blue">Book</button>
</form>
<br>
@ -32,6 +34,7 @@
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-lg-4 text-center wow fadeInDown"></div>
</div>
</div>

View file

@ -45,8 +45,6 @@
{% bootstrap_field field show_label=False type='fields'%}
{% endfor %}
{% bootstrap_form_errors form type='non_fields'%}
{{form.errors}}
<br>
</form>
</div>

View file

@ -25,7 +25,9 @@
<link href="{% static 'digitalglarus/css/ungleich.css' %}" rel="stylesheet">
<link href="{% static 'digitalglarus/css/history.css' %}" rel="stylesheet">
<link href="{% static 'digitalglarus/css/price.css' %}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css" />
<!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
<link href="{% static 'digitalglarus/css/lib/animate.min.css' %}" rel="stylesheet">
@ -227,6 +229,9 @@
-->
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js
"></script>
<!-- Booking JavaScript -->
<script src="{% static 'digitalglarus/js/booking.js' %}"></script>