1

How can I add date and time picker in my content editable using jquery.

This is my <td>:

<td class='datepicker' class="dq1" data-id1="'.$row["id"].'" contenteditable>'.$row["dq1"].'</td>

This is my script:

$(".datepicker").datepicker({
    dateFormat: 'yyyy-mm-dd',
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true,
    onClose: function(dateText, inst) {
        $(this).parent().find("[contenteditable=true]").focus().html(dateText).blur();
    }
});
Aniket Sahrawat
  • 12,410
  • 3
  • 41
  • 67
Arnold Lagbas
  • 11
  • 5

1 Answers1

1

$('.datetimepicker').datetimepicker({
  onClose: function(dateText, inst) {
    inst.text(dateText);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.17/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.17/jquery.datetimepicker.css">

<div class="datetimepicker" contenteditable>click here</div>
Aniket Sahrawat
  • 12,410
  • 3
  • 41
  • 67
  • Thank you for your response, but not working coz I am using contenteditable – Arnold Lagbas Feb 03 '18 at 12:38
  • Yes, @Aniket Sahrawat I try the update but not working – Arnold Lagbas Feb 03 '18 at 12:47
  • @ArnoldLagbas This works with your options `buttonImage`, `dateFormat`, etc too. Edit the above snippet and see. You must be doing it wrong. – Aniket Sahrawat Feb 03 '18 at 12:49
  • Ok, Thank you @Aniket Sahrawat – Arnold Lagbas Feb 03 '18 at 12:52
  • Thank you @Aniket Sahrawat, the calendar does not show even though I copied the code and script. – Arnold Lagbas Feb 04 '18 at 02:53
  • @ArnoldLagbas Does it execute correctly in above snippet? Try running the above snippet on SO. – Aniket Sahrawat Feb 04 '18 at 02:55
  • @ArnoldLagbas Just copy paste [this fiddle](https://jsfiddle.net/b0x0j0gw/1/), it must work now – Aniket Sahrawat Feb 04 '18 at 02:59
  • Yes @Aniket Sahrawat it is working fine but when I apply in my page it is not working. I Dont know what is the problem . – Arnold Lagbas Feb 04 '18 at 03:08
  • @Aniket Sahrawat, the problem with your solution is that the resulting text is "Wed Nov 07 2018 23:06:00 GMT-0700 (Pacific Standard Time)" ...?? I just want the date back. That, and if there is a date in the DIV already (page load) such as 04/01/2018, that date is not set in datepicker; instead it's set to current date. So, while your solution "works", it seems to fail on these two points. – MacSpudster Nov 15 '18 at 06:08