Editor with Datepicker + Firefox Bug
Editor with Datepicker + Firefox Bug
vedran.blazevic
Posts: 11Questions: 1Answers: 0
Hello
I have a problem with Editor and jQuery UI Datepicker in Firefox
I am using inline and normal editing for a table with a date field. For entering the date I am using a datepicker with select elements for month and year. Since I want to allow only the selection of a month and not of a particular day, the day selection of the datepicker is hidden using CSS. As long as I use only inline editing everything is normal. I can normally use the select elements of the datepicker. The problem occurs when I open the editor as a dialog, clicking the "Edit" button. After this, when I try to use the datepicker's drop-downs, they don't work at all. They are not expanded. I have also noticed, that the focus is - wrongly - set to the first field in the editor, in this case the first name. To reproduce the error:
- To verify that with inline editing everything works fine: click in one of the date fields and test the select boxes. They can be opened and you can select the month or year.
- Now select a row and click "Edit"
- Click in one of the date fields which opens the datepicker
- Click on one of the drop-down lists for month or year
- Instead of opening the drop-down, the first field is focused and any key strokes will write to the first field
- Close the editor and open a date picker inline. It will now exhibit the same - erroneous - behviour.
I have adapted the Editor's example file for Dates, to demonstrate the error. You can just copy this code in a file and put it into the examples/simple directory along with the JSON file.
Any help would be appreciated. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title>Editor example - Dates (with jQuery UI datepicker)</title>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../TableTools/css/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="../../css/dataTables.editor.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../../../TableTools/js/dataTables.tableTools.js"></script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.js"></script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js"></script>
<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajax": "dateTest.json",
"table": "#example",
"fields": [ {
label: "First name:",
name: "first_name"
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Updated date:",
name: "updated_date",
type: "date",
dateFormat: "dd.mm.yy",
opts: {
"dateFormat" : "dd.mm.yy",
"maxDate" : "+12M",
"changeMonth": true,
"changeYear": true,
"showAnim" : "slideDown",
"showButtonPanel": true,
"constrainInput" : true,
"showOn": "focus",
"onClose": function(dateText, inst) {
var month = parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val());
var year = parseInt($("#ui-datepicker-div .ui-datepicker-year :selected").val());
$(this).datepicker("setDate", new Date(year, month, 1));
}
}
}, {
label: "Registered date:",
name: "registered_date",
type: "date",
dateFormat: "dd.mm.yy",
opts: {
"dateFormat" : "dd.mm.yy",
"maxDate" : "+12M",
"changeMonth": true,
"changeYear": true,
"showAnim" : "slideDown",
"showButtonPanel": true,
"constrainInput" : true,
"showOn": "focus",
"onClose": function(dateText, inst) {
var month = parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val());
var year = parseInt($("#ui-datepicker-div .ui-datepicker-year :selected").val());
$(this).datepicker("setDate", new Date(year, month, 1));
}
}
}
]
} );
$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this );
} );
$('#example').dataTable( {
dom: "Tfrtip",
"ajax": "dateTest.json",
columns: [
{ data: "first_name" },
{ data: "last_name" },
{ data: "updated_date" },
{ data: "registered_date" }
],
tableTools: {
sRowSelect: "os",
aButtons: [
{ sExtends: "editor_create", editor: editor },
{ sExtends: "editor_edit", editor: editor },
{ sExtends: "editor_remove", editor: editor }
]
}
} );
} );
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body class="dt-example">
<div class="container">
<section>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th width="30%">First name</th>
<th width="20%">Last name</th>
<th width="18%">Updated date</th>
<th width="20%">Registered date</th>
</tr>
</thead>
</table>
</section>
</div>
</body>
</html>
And the JSON File dateTest.json:
{
"data": [
{
"DT_RowId": "row_1",
"first_name": "Quynn",
"last_name": "Contreras",
"updated_date": "2014-12-02",
"registered_date": "Fri, 6 Apr 12"
}
]
}
This discussion has been closed.
Answers
I have searched a bit and the only similar problem that I was able to find seems to be this:
http://stackoverflow.com/questions/22050641/month-select-in-datepicker-inside-a-bootstrap-modal-wont-work-in-firefox
However this deals with the same problem occuring when a bootstrap-modal dialog is used, which doesn't seem to be the case with Editor