Why is the date picker not displaying when I create or edit a record?
Why is the date picker not displaying when I create or edit a record?
mgpearce48
Posts: 23Questions: 6Answers: 0
in Editor
I'm using Editor 1.9.2 with django restframework (python).
For field.type: 'datetime' I'm unable to determine why the date picker is not displaying. If I change the type to 'date', an older version on the date picker displays which would be ok however in edit mode the existing date does not load, and for create mode the default value (timezone.now) does not load. I understand from the docs that type 'datetime' is recommended or preferred instead of date type.
My javascript:
<script type="text/javascript">
var editor;
$(document).ready(function() {
$.fn.dataTable.moment( 'DD/MM/YYYY' );
editor = new $.fn.dataTable.Editor( {
table: "#project-table",
ajax: {
create: {
type: 'POST',
url: "{% url 'project-list' format='datatables' %}",
headers: {'X-CSRFToken': '{{ csrf_token }}'}
},
edit: {
type: 'PUT',
url: "{% url 'project-detail' pk=None format='datatables' %}",
headers: {'X-CSRFToken': '{{ csrf_token }}'}
},
remove: {
type: 'DELETE',
url: "{% url 'project-detail' pk=None format='datatables' %}",
headers: {'X-CSRFToken': '{{ csrf_token }}'}
}
},
idSrc: 'project.slug',
fields: [
{ label: "Title:", name: "project.title" },
{ label: "Slug:", name: "project.slug" },
{ label: "Phase:", name: "project.phase", type: "select" },
{
label: 'Start Date:',
name: 'project.date_start',
type: 'datetime',
def: function () { return new Date(); },
format: 'DD/MM/YYYY'
},
{ label: "Client:", name: "project.client", type: "select" }
],
i18n: {
create: {
button: "Add",
title: "Add new project",
submit: "Add"
},
edit: {
button: "Edit",
title: "Edit project details",
submit: "Update"
},
remove: {
button: "Delete",
title: "Delete project",
submit: "Delete",
confirm: {
1: "Are you sure you want to delete the selected project?"
}
}
}
} );
$.fn.dataTable.Buttons.defaults.dom.button.className = 'btn btn-sm btn-primary';
var table = $('#project-table').DataTable( {
pageLength: 10,
order: [[0, "asc"]],
processing: true,
serverSide: true,
dom: "lBfrtip",
ajax: "{% url 'project-list' format='datatables' %}",
select: 'single',
columns: [
{ data: "project.title", orderable: true },
{ data: "project.slug", orderable: true },
{ data: "phase.name", orderable: true },
{ data: "project.date_start", orderable: true },
{ data: "client.name", orderable: true }
],
buttons: [
{ extend: "create", editor: editor},
{ extend: "edit", editor: editor},
{ extend: "remove", editor: editor}
]
});
table.buttons().container()
.appendTo($('.col-md-6:eq(0)', table.table().container()));
editor.field('project.phase').input().addClass('form-control');
editor.field('project.client').input().addClass('form-control');
});
</script>
django restframework serializer:
class ProjectSerializer(serializers.ModelSerializer):
# Can be removed as DATE_FORMAT has been set in settings.base.py
date_start = serializers.DateField(format="%d/%m/%Y")
class Meta:
model = Project
fields = ['url', 'pk', 'title', 'slug', 'phase', 'date_start', 'client']
def __init__(self, *args, **kwargs):
super(ProjectSerializer, self).__init__(*args, **kwargs)
self.fields["title"].error_messages["blank"] = u"Title cannot be blank"
self.fields["slug"].error_messages["blank"] = u"Slug cannot be blank"
self.fields["phase"].error_messages["required"] = u"Phase is required"
self.fields["date_start"].error_messages["blank"] = "Start date cannot be blank"
self.fields["client"].error_messages["required"] = u"Client is required"
datatables libraries:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/b-1.6.1/sl-1.3.1/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="{% static 'project/Editor-1.9.2/css/editor.dataTables.css' %}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/b-1.6.1/sl-1.3.1/datatables.min.js"></script>
<script type="text/javascript" src="{% static 'project/Editor-1.9.2/js/dataTables.editor.js' %}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.20/sorting/datetime-moment.js"></script>
django model:
class Project(models.Model):
title = models.CharField('title', max_length=65, db_index=True)
description = models.CharField('description', max_length=120, blank=True, null=True)
slug = models.SlugField(max_length=65, unique=True, help_text='A label for URL config.')
phase = models.CharField('phase', max_length=25, choices=PROJECT_PHASE_CHOICES, default='DESIGN')
date_start = models.DateField('date_start', default=timezone.now)
date_complete = models.DateField('date_complete', blank=True, null=True)
comment = models.TextField(null=True, blank=True)
client = models.ForeignKey(Client, on_delete=models.PROTECT, related_name='projects', blank=True, null=True)
class Meta:
ordering = ['date_start']
get_latest_by = 'date_start'
verbose_name = 'Project'
verbose_name_plural = 'Projects'
def __str__(self):
return '%s' % (self.title)
def get_absolute_url(self):
return reverse('project_detail', kwargs={'slug': self.slug})
def get_delete_url(self):
return reverse('project_delete', kwargs={'slug': self.slug})
def get_update_url(self):
return reverse('project_update', kwargs={'slug': self.slug})
Any assistance would be greatly appreciated.
Many thanks,
Michael
This question has an accepted answers - jump to answer
Answers
After changing the sequence of the datatables css and js files in my base HTML document, I eventually managed to get the date picker to display. However it is not loading correctly, some components are missing. For example, the month selection at the top of the widget is not visible, and the today link is missing. Is anyone familiar with this problem?
CSS and JS files:
Thanks,
Michael
It looks like you haven't included the dateTime.css file. If you look at this example here, ensure you have the necessary files listed on the Javascript and CSS tabs beneath the table, bearing in mind that the ordering is important as you noted in your reply.
Colin
Thanks Colin,
I have tried changing and re-arranging the css/js files as shown in the examples. Whilst the widget does display, the month selector is not visible. I know it is there as I can click on it but just can't see it, which I guess indicates a css problem. If I change the field type to 'date' instead of 'datetime' the widget looks different but good enough to do the job, however the actual date is not displaying in the date field when in edit mode, and in create mode the default date value is not displaying. Is this a formatting issue that I need to correct on the server before the data is sent to datatables?
Regards, Michael
Please could you link to your page so we can take a look, it'll help to understand what's going on,
Colin
Thanks Colin,
The link below will open the relevant page. If you create a new record or edit an existing record, and click on the date field, you will notice that the date picker month control (at the top of the widget) is not visible.
https://webfacilitator.com.au/project/
Many thanks,
Michael
Your page shows console errors regarding "not found" CSS files.
Thanks Colin for identifying that. There were 2 typos in the CSS file path which have now been fixed. Unfortunately, the date picker widget is still not displaying correctly. Any other thoughts on this?
https://webfacilitator.com.au/project/
It looks like you're mixing and matching BS4 styling (on the long line at the top) along with the DataTables default styling (Buttons and Select etc):
Take a look at this Editor example, again, look at the CSS and JS tabs and ensure you have the same files in the same order (I didn't realise you were using BS4 before).
It would be worth using the Download builder here, as it takes care of these styling and ordering issues for you.
Can you give that a try, please, and see if that helps,
Colin
Thanks Colin, I did not realize there was a download builder. Using the builder I was able to get all the correct files in the correct sequence. All good now.
Many thanks,
Michael