cách hiển thị lịch datepicker trên datefield

Question

Điều này liên quan đến cách sử dụng jQuery date picker trong trang web được hỗ trợ django.

models.py là

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

Tôi đang sử dụng jquery datepicker.

Tôi đang sử dụng model form và tạo text field để hiển thị ngày thành công.

Nhưng không hiển thị biểu tượng datepicker. Tôi đang sử dụng các hình thức mô hình Django.

Answer 1

Bạn có thể sử dụng widget để chuyển một số class sang biểu mẫu khi nó được hiển thị trong html. Sau đó, class sẽ được đọc bởi javascript để hiển thị chức năng datepicker.

Dưới đây là một ví dụ:

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

... hoặc thông qua widgets thuộc tính trong lớp Meta khi sử dụng ModelForm:

class HolidayTimeForm(forms.ModelForm): 

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

Bây giờ trong mẫu:

/* 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

Bạn có thể sử dụng Bootstrap-datetimepicker (không phải là datepicker), đây là ví dụ:

1. Thêm lệnh cần thiết & tập tin vào mẫu của bạn:

<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. add lớp/id để lĩnh vực datetime của bạn bằng cách sử dụng tiện ích con:

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

3. Thêm mã vào file template/html của bạn: (chú ý định dạng, đó là nhập khẩu để sử dụng các định dạng tương tự của Django)

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