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

digitalglarus/forms.py

@@ -58,19 +58,54 @@ class BookingBillingForm(BillingAddressForm):
 
 
 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:
             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

digitalglarus/static/digitalglarus/js/booking.js

@@ -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-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('cancel.daterangepicker', function(ev, picker) {
+		var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
-		$(this).val('Select your dates');
+        $('#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);
+        });
+
+
+	// 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('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');
+	// });
 
 });

digitalglarus/templates/digitalglarus/booking.html

@@ -14,22 +14,25 @@
             <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>
                 <div class="notice-box">
                 </div>
+              </div>
             </div>
         </div>       
         <div class="col-xs-12 col-sm-3 col-lg-4 text-center wow fadeInDown"></div>

digitalglarus/templates/digitalglarus/booking_payment.html

@@ -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>

digitalglarus/templates/new_base_glarus.html

@@ -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>