Hola, estoy usando jqGrid y me pregunto, ¿cómo agrego el marcador de fecha de jQueryUI a algunos de los campos de entrada cuando estoy en el cuadro de diálogo agregar fila?¿Cómo agrego datepicker en el cuadro de diálogo agregar fila en jqGrid?
¿Cómo verifico si la entrada ingresada es válida?
¡Gracias de antemano!
Después de investigar esto por mi mismo hace un tiempo, esto es lo que hice un puré a partir de varios aportes de otros. Estoy asumiendo que ya tienes los archivos CSS y JS datepicker. Si no, avíseme y los buscaré para usted. Dentro de los <head> etiquetas, coloque el siguiente después su <link rel="stylesheet"... href="css/ui.jqgrid.css" /> línea:
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />
Entonces, todavía dentro de los <head> etiquetas que importa, inserte el siguiente después su <script src="js/jquery-ui-1.7.2.custom.min.js" ...></script>
<script type="text/javascript" src="js/ui.datepicker.js"></script>
Ahora, dentro del conjunto de colmodel, va a agregar su código JS de selector de fecha al campo del cual se usará el marcador de fecha. En mi caso, tenía un campo 'Última fecha modificada'. Así que dentro de la matriz colmodel, El código debería ser algo como esto:
{name:'last_modified_date', index:'last_modified_date', width:90, editable:true, editoptions:{size:20,
dataInit:function(el){
$(el).datepicker({dateFormat:'yy-mm-dd'});
},
defaultValue: function(){
var currentTime = new Date();
var month = parseInt(currentTime.getMonth() + 1);
month = month <= 9 ? "0"+month : month;
var day = currentTime.getDate();
day = day <= 9 ? "0"+day : day;
var year = currentTime.getFullYear();
return year+"-"+month + "-"+day;
}
}
},
Además, estoy seguro de que ya haya comprobado esto, pero no deje de visitar el jqGrid wiki. El wiki tiene documentación para la herramienta y el blog también tiene foros donde se hacen preguntas diariamente. De hecho, creo que Tony, el autor del plugin, incluso tiene un ejemplo de fechador UI en su página de ejemplo.
Espero que eso ayude.
es necesario agregar estas líneas a la updateDialog o al addDialog:
afterShowForm: function (formId) {
$("#CreationDate").datepicker();
}
Espero que esto ayude.
Modifiqué algunos fragmentos de código que encontré. Quería usar el uso de JSON con datos locales, junto con poner el marcador de fecha como parte de mi botón agregar fila y funcionó.
Javascript:
...
<script type="text/javascript">
// Here we set the altRows option globally
jQuery.extend(jQuery.jgrid.defaults, { altRows:true });
</script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
<script type="text/javascript">
$(function() {
$("#list").jqGrid({
datatype: "jsonstring",
jsonReader: {
repeatitems: false,
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
},
colNames: ['Date', 'Customer ID', 'Customer Name', 'Action'],
colModel: [
{ name: 'date' , index: 'date', width: 70, align: "center" },
{ name: 'custID' , index: 'custID', width: 70, align: "center" },
{ name: 'custName', index: 'custName', width: 150, align: "center", sortable: false },
{ name: 'custID', index: 'custID', width: 50, align: "center", sortable: false, formatter: editLink },
],
width: "650",
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
gridview: true,
autoencode: true
//,
//caption: "jqGrid Example"
});
});
</script>
<script type="text/javascript">
function editLink(cellValue, options, rowdata, action) {
return '<button onclick=editcall("' + rowdata.date + '","' + rowdata.custID + '","' + rowdata.custName + '")>edit</button>';
}
function editcall(date, custID, custName) {
$("#datepicker").val(date)
$("#Text1").val(custID)
$("#Text2").val(custName)
}
function addnewRow() {
var grid = jQuery("#list");
var myData = { "date": $("#datepicker").val(), "custID": $("#Text1").val(), "custName": $("#Text2").val() };
var recnum = grid.getGridParam('records');
grid.jqGrid('addRowData', recnum, myData);
$("#datepicker").val("");
$("#Text1").val("");
$("#Text2").val("")
}
function updateRow() {
var grid = jQuery("#list");
var myData = { "date": $("#datepicker").val(), "custID": $("#Text1").val(), "custName": $("#Text2").val() };
var recnum = grid.jqGrid('getGridParam', 'selrow');
grid.jqGrid('setRowData', recnum, myData);
$("#datepicker").val("");
$("#Text1").val("");
$("#Text2").val("")
}
HTML:
...
<div>
<input type="text" id="datepicker" size="15">
<input id="Text1" type="text" size="15"/>
<input id="Text2" type="text" size="20"/>
<button onclick="addnewRow()">Submit</button>
<button onclick="updateRow()">Update</button>
<input id="Button1" type="button" value="Add Row" onclick="return addnewRow();" />
<table id="list">
<tr>
<td></td>
</tr>
</table>
<div id="pager"></div>
</div>
Para obtener el selector de fechas en la edición emergente crear /, es necesario agregar estas líneas a la updateDialog o al addDialog:
afterShowForm: function (formId) {
$("#CreationDate").datepicker();
}
Si desea para formatearlo, puede establecer la opción de formato en datepicker() .. como:
afterShowForm: function (formId) { $("#CreationDate").datepicker({
dateFormat: "dd/M/yy"});}
Me funcionó, tqvm. –