sposób wyświetlania kalendarza datepicker na polu daty

Question

Dotyczy to korzystania z jQuery date picker w witrynie z obsługą django.

models.py jest

from django.db import models 
class holidaytime(models.Model): 
    holiday_date = models.DateField() 

Używam jquery datepicker.

Używam model form i utworzono text field do wyświetlania daty z powodzeniem.

Nie udało się jednak wyświetlić ikony datepaksu. Używam formularzy modelu Django.

Answer 1

Możesz użyć widget, aby przekazać formularz class, gdy będzie renderowany w html. Następnie class zostanie odczytany przez javascript, aby zrenderować funkcję datepicker.

Oto przykład:

from django import forms 
class HolidayTimeForm(forms.Form): 
    holiday_date = forms.DateField(widget=forms.TextInput(attrs= 
           { 
            'class':'datepicker' 
           })) 

... lub za pośrednictwem atrybutu w klasie widgets Meta przy użyciu ModelForm:

class HolidayTimeForm(forms.ModelForm): 

    class Meta: 
     model = Holiday 
     widgets = { 
      'holiday_date': forms.DateInput(attrs={'class':'datepicker'}), 
     } 

Teraz w szablonie:

/* Include the jquery Ui here */ 
<script> 
    $(function() { 
    $(".datepicker").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: "1900:2012", 
     // You can put more options here. 

    }); 
    }); 
    </script> 

Answer 2

Możesz użyć Bootstrap-datetimepicker (nie datepicker), tutaj jest przykład:

1. Dodaj konieczne skrypt & plik do szablonu:

<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> 
 
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script> 
 
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script> 
 
<script src="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.44/js/bootstrap-datetimepicker.min.js"></script>

2. klasy

   add/ID do pola datetime przy użyciu widget:

   class MyTaskForm(forms.ModelForm): 
   class Meta: 
       model = MyTask 
   fields = ['completeDateTime'] 
   widgets = { 
       'completeDateTime': forms.DateTimeInput(attrs={'class': 'datetime-input'}) 
   } 
   

3. Dodaj skrypt do pliku template/html: (UWAGA formatu, to import używać tego samego formatu Django)

<script> 
 
    $(function() { 
 
     $('.datetime-input').datetimepicker({ 
 
      format:'YYYY-MM-DD HH:mm:ss' 
 
     }); 
 
    }); 
 
</script>