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): class BookingDateForm(forms.Form):
start_date = forms.DateField(required=False, widget=forms.HiddenInput()) start_date = forms.DateField(required=False,
end_date = forms.DateField(required=False, widget=forms.HiddenInput()) widget=forms.TextInput(attrs={'id': 'booking-date-1',
date_range = forms.CharField(required=False, 'value': ''}))
widget=forms.TextInput(attrs={'id': 'booking-date-range'})) end_date = forms.DateField(required=False,
widget=forms.TextInput(attrs={'id': 'booking-date-2'}))
def clean_date_range(self): # def clean_date_range(self):
date_range = self.cleaned_data.get('date_range') # date_range = self.cleaned_data.get('date_range')
dates = date_range.replace(' ', '').split('-') # dates = date_range.replace(' ', '').split('-')
try: # try:
start_date, end_date = [datetime.strptime(date_string, "%m/%d/%Y").date() # start_date, end_date = [datetime.strptime(date_string, "%m/%d/%Y").date()
for date_string in dates] # for date_string in dates]
except ValueError: # except ValueError:
raise forms.ValidationError("Submit valid dates.") # 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: if start_date > end_date:
raise forms.ValidationError("Your end date must be greather than your start 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(): if Booking.objects.filter(q1 | q2).exists():
raise forms.ValidationError("You already have a booking in these dates.") 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 return self.cleaned_data

View file

@ -3,23 +3,44 @@ $( document ).ready(function() {
// $('#booking-date-range').daterangepicker(); // $('#booking-date-range').daterangepicker();
var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000); var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
// var tomorrow = today.setDate(today.getDate() + 1); $('#booking-date-1').datetimepicker({
$('#booking-date-range').daterangepicker({ // minDate: tomorrow,
autoUpdateInput: false, format: 'MM/d/YYYY',
locale: { defaultDate: false
cancelLabel: 'Clear' });
}, $('#booking-date-2').datetimepicker({
minDate: tomorrow, 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) { // var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY')); // // 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 <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> <strong>35CHF</strong> per month.<br> 2 free working days included!</h2>
<hr class="primary"> <hr class="primary">
{% bootstrap_form_errors form layout='inline' %}
<div class="signup-form form-group row"> <div class="signup-form form-group row">
<div class="col-md-12">
<input type="hidden" name="next" value="{{ request.GET.next }}"> <input type="hidden" name="next" value="{{ request.GET.next }}">
<form action="" method="post" class="form" novalidate> <form action="" method="post" class="form" novalidate>
{% csrf_token %} {% csrf_token %}
{% bootstrap_form_errors form layout='inline' %} {% bootstrap_form_errors form type='non_fields'%}
{% for field in form %} {% for field in form %}
{% bootstrap_field field show_label=False %} {% bootstrap_field field show_label=False %}
{% endfor %} {% endfor %}
<!-- <input class="form-control" placeholder="Select your dates" type="text" id="booking-date-range" name="date_range"> --> <!-- <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> <button type="submit" class="btn btn-primary btn-blue">Book</button>
</form> </form>
<br> <br>
@ -32,6 +34,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="col-xs-12 col-sm-3 col-lg-4 text-center wow fadeInDown"></div> <div class="col-xs-12 col-sm-3 col-lg-4 text-center wow fadeInDown"></div>
</div> </div>
</div> </div>

View file

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

View file

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