Replies

• allan Posts: 63,689Questions: 1Answers: 10,500 Site admin

  December 2013

  Do you mean like this: https://editor.datatables.net/release/DataTables/extras/Editor/examples/dates.html ?
  
  Allan
• noslan Posts: 29Questions: 0Answers: 0

  December 2013

  nope, I mean like this: http://jqueryui.com/datepicker/#inline
• allan Posts: 63,689Questions: 1Answers: 10,500 Site admin

  December 2013 edited December 2013

  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 Posts: 29Questions: 0Answers: 0

  December 2013

  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 Posts: 29Questions: 0Answers: 0

  December 2013

  Fixed, it should be:
  
  [code] $.fn.DataTable.Editor.fieldTypes.dateinline = $.extend( true, {}, $.fn.DataTable.Editor.models.fieldType, { ..... [/code]
• allan Posts: 63,689Questions: 1Answers: 10,500 Site admin

  December 2013

  Thank you, I've updated my code.
  
  Allan
• noslan Posts: 29Questions: 0Answers: 0

  December 2013

  i'm still having serious doubts about get and set, is there any tutorial where I can read about it?
• allan Posts: 63,689Questions: 1Answers: 10,500 Site admin

  December 2013

  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 Posts: 29Questions: 0Answers: 0

  December 2013 edited December 2013

  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 Posts: 63,689Questions: 1Answers: 10,500 Site admin

  December 2013

  > 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 Posts: 29Questions: 0Answers: 0

  December 2013 edited December 2013

  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 Posts: 63,689Questions: 1Answers: 10,500 Site admin

  December 2013

  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 Posts: 29Questions: 0Answers: 0

  December 2013

  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 Posts: 63,689Questions: 1Answers: 10,500 Site admin

  December 2013

  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