Set inline datepicker in edit/add form

noslan

Hi,

I'm trying to set an inline datepicker inside edit/new form, and for now I can't, I know how to do it in a normal way: http://jqueryui.com/datepicker/

But if I create a new vustom field with this code:

[code]
$(function() {
$( "#datepicker" ).datepicker();
});

'Date: '

[/code]
Nothing happens, any suggestion?

Thanks!

allan

Do you mean like this: https://editor.datatables.net/release/DataTables/extras/Editor/examples/dates.html ?

Allan

noslan

nope, I mean like this: http://jqueryui.com/datepicker/#inline

allan

Ah I see - you'll need to create a custom field type plug-in in that case, since different markup is used.

Something like:

[code]
$.fn.dataTable.Editor.fieldTypes['date-inline'] = $.extend( {}, $.fn.DataTable.Editor.models.fieldType, {
"create": function ( conf ) {
conf._input = $('').attr( $.extend( {
id: conf.id
}, conf.attr || {} ) );

if ( ! conf.dateFormat ) {
conf.dateFormat = $.datepicker.RFC_2822;
}

if ( ! conf.dateImage ) {
conf.dateImage = "../media/images/calender.png";
}

// Allow the element to be attached to the DOM
setTimeout( function () {
$( conf._input ).datepicker({
showOn: "both",
dateFormat: conf.dateFormat,
buttonImage: conf.dateImage,
buttonImageOnly: true
});
$('#ui-datepicker-div').css('display','none');
}, 10 );

return conf._input[0];
},

"get": function ( conf ) {
return conf._input.val();
},

"set": function ( conf, val ) {
conf._input.datepicker( "setDate" , val );
},

"enable": function ( conf ) {
conf._input.datepicker( "enable" );
},

"disable": function ( conf ) {
conf._input.datepicker( "disable" );
}
} ) );
[/code]

Allan

noslan

not working, if it set up this code, the datatable doesn't appear,

Why in this case the field creation starts like:
[code]$.fn.dataTable.Editor.fieldTypes['date-inline'] = {[/code]

when normaly is:
[code]$.fn.DataTable.Editor.fieldTypes.paxes = $.extend( true, {}, $.fn.DataTable.Editor.models.fieldType, {[/code]

noslan

Fixed, it should be:

[code] $.fn.DataTable.Editor.fieldTypes.dateinline = $.extend( true, {}, $.fn.DataTable.Editor.models.fieldType, { ..... [/code]

allan

Thank you, I've updated my code.

Allan

noslan

i'm still having serious doubts about get and set, is there any tutorial where I can read about it?

allan

Humm - yes, the get looks like it would be broken:

[code]
conf._input.datepicker( "getDate" , val );
[/code]

perhaps?

I'm just going on the jQuery UI documentation here.

Allan

noslan

I have this code** to init inline datepicker I need not get date and set it in another input text inside the form, I know that the code to get date is like this:

[code]
$("#datepicker").datepicker({
onSelect: function(dateText, inst) {
$("#datepicker_value").val(dateText);
}
});
[/code]

as you can see the calendar's id is inlinecalendar so the code should be something like:
[code]
$("#inlinecalendar").datepicker({
onSelect: function(dateText, inst) {
$("#inlinecalendar").val(dateText);
}
});
[/code]

But it doesn't work so, the question is, is datatables editor creating this id and setting it by itself? Which name does it have? m I doing something wrong?


**
[code]
"create": function ( conf ) {
conf._input = $('').attr( $.extend( {
id: conf.id
}, conf.attr || {} ) );


// Allow the element to be attached to the DOM
setTimeout( function () {
$( conf._input ).datepicker({
showOn: "both",
dateFormat: conf.dateFormat,
buttonImage: conf.dateImage,
buttonImageOnly: true
});
$('#ui-datepicker-div').css('display','none');
}, 10 );

[/code]


Thanks!!

allan

> id="inlinecalendar"

I would suggest not doing that, since id's must be unique and it would mean you could only have one inline calendar field per form!

What to do is use the `node()` method ( https://editor.datatables.net/api/#node ). That will give you the `div` element and you can act on it as you need:

[code]
$( editor.field( 'myInlineDate' ).node() ).datepicker( ... );
[/code]

If you need to get and set the value of the field, use the `get()` and `set()` methods of Editor.

Allan

noslan

Ok, I'm getting off this ID, so input config is like this:
[code] conf._input = $('').attr( $.extend( { ... [/code]

Using [code]$( editor.field( 'Fechainline' ).node() ).datepicker( ... ); [/code] I'm getting an error, this object does not have node property but if I use:

[code] $( editor.field( 'Fechainline' ).node() ).datepicker(... [/code]

It works but I'm seeing a huge datepicker and two instences of it, any suggestion?

allan

I'm not sure I see any difference between the two lines of code above, however, two date pickers suggests that it is being initialised twice. Try this:

[code]
$( 'div.hasDatepicker', editor.field( 'Fechainline' ).node() ).datepicker(...
[/code]

I think that should resolve the issue.

Allan

noslan

Sorry, my fault, the code which works but sets two datepickers is like this:

[code]$(editor.node( 'Fechainline' )).datepicker(....) [/code]

If I try with any like *****.node() it appears an error (We are close to fix this! I can feel it!)

Thanks again!

allan

Did you try a jQuery selector like in my last post? Running the line of code you currently have will add an extra date picker since `editor.node( 'Fechainline' )` is not a date picker (thus it will create one).

Allan