Django / JQuery - изменение календаря JQuery на основе данных БД - PullRequest
0 голосов
/ 11 октября 2019

Как часть задачи, я создал веб-сайт «списки квартир». Мне удалось это сделать, но теперь мне нужно создать «систему бронирования» для этого. Основная идея состоит в том, что вошедший в систему пользователь может выбрать квартиру из перечисленных квартир, выбрать «start_date» и «end_date» (если квартира уже не забронирована) и забронировать квартиру.

Когда пользователь нажимает на поле ввода даты, появляется окно выбора даты jquery, и он может затем выбрать дату через календарь, то же самое для даты окончания. Как только он завершит бронирование, я хочу, чтобы даты были «отключены» в календаре, чтобы никто другой не мог их выбрать.

Это средство выбора даты, которое я использую:

https://jqueryui.com/datepicker/

и код:

    <script>
        $(function () {
            $("#datepicker").datepicker();
        });
    </script>

Я новичок в Django / веб-разработке, и мне нужно немногоуказатели, чтобы начать где-нибудь с этой задачей, я знаю немного JS, но jquery для меня нов, поэтому мне нужна помощь.

У меня есть модель квартиры, которая содержит всю информацию о квартирах, которую яиспользуйте, чтобы распечатать все с шаблоном. У меня есть модель бронирования, которая сохраняет дату начала и дату окончания бронирования в БД.

Я использую предоставленные модели пользователей django для регистрации / входа в систему. Я использую Django 2.1.8 (mySQL db)

Я создал это представление и модель для резервирования:

одно представление списка:

def apartment_view(request, apartment_id):

    reservation_pk = request.GET.get('pk', None)
    reservation = Reservation.objects.filter(apartment__pk=apartment_id)
    apartment = get_object_or_404(Apartment, pk=apartment_id)
    context = {'apartment': apartment, }
    context_instance = RequestContext(request)

    form = ReservationForm()
    if request.method == 'GET':
        form = ReservationForm()

    elif request.method == 'POST':
        form = ReservationForm(request.POST)
        if form.is_valid():
            reservation = form.save(commit=False)
            reservation.apartment = apartment
            reservation.save()
            form.save()
            return HttpResponseRedirect('/booking/')
    args = {}
    args['form'] = form
    args['apartment'] = context
    args['reservation'] = reservation
    return render(request, 'booking/apartment.html', args)

модели:


class Apartment(models.Model):
    title = models.CharField(max_length=200)
    address = models.CharField(max_length=200)
    city = models.CharField(max_length=100)
    state = models.CharField(max_length=100)
    zipcode = models.CharField(max_length=20)
    description = models.TextField(blank=True)
    price = models.IntegerField()
    bedrooms = models.IntegerField()
    bathrooms = models.DecimalField(max_digits=2, decimal_places=1)
    garage = models.IntegerField(default=0)
    size = models.IntegerField()
    photo_main = models.ImageField(upload_to='photos/%Y/%m/%d/')
    photo_1 = models.ImageField(upload_to='photos/%Y/%m/%d/', blank=True)
    photo_2 = models.ImageField(upload_to='photos/%Y/%m/%d/', blank=True)
    photo_3 = models.ImageField(upload_to='photos/%Y/%m/%d/', blank=True)
    photo_4 = models.ImageField(upload_to='photos/%Y/%m/%d/', blank=True)
    in_rent = models.BooleanField(default=False)
    list_date = models.DateTimeField(default=datetime.now, blank=True)

    def __str__(self):
        return self.title


class Reservation(models.Model):
    apartment = models.ForeignKey(Apartment, related_name='reservations',
                                  on_delete=models.CASCADE, blank=True, null=True)
    start_date = models.DateField(blank=True, null=True, unique=True)
    end_date = models.DateField(blank=True, null=True, unique=True)
    name = models.CharField(default="", max_length=200, unique=True)

    def __str__(self):
        return "Reservation"


моя форма:

class ReservationForm(forms.ModelForm):
    class Meta:
        model = Reservation
        fields = [
            'start_date',
            'end_date',
            'name',
        ]
        widgets = {
            'start_date': TextInput(attrs={'id': 'datepicker'}),
            'end_date': TextInput(attrs={'id': 'datepicker2'}),
        }

Спасибо за то, что вы потратили время, чтобы прочитать это, и за вашу помощь! Удачного дня, ребята!

TLDR: На основании данных из базы данных мне нужно "отключить" определенные диапазоны дат в календаре jquery

1 Ответ

1 голос
/ 11 октября 2019

Вы можете использовать функциональный параметр beforeShowDay для отключения дат.

Пожалуйста, проверьте JQuery UI Datepicker API для получения дополнительной информации

$(function () {
        $('.pickWeek').datepicker({
           beforeShowDay : function (date) {return [false, '',''];}
        })
    });
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  <p>Date: <input type="text" id="datepicker" class="pickWeek"></p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...