How to use the datepicker in html contenteditable element

Question

Hi I am using datepicker plugin in contenteditable element.Have to select the datepicker value in the contenteditable div. Html:

<div class="sample">
  <input name="date" class="datepicker-input"  />
  <div class="date1" contentEditable="true">test</div>
</div>

Script:

$('.date').click(function() {
  $(this).parent().find('.datepicker-input').focus();
  $(".datepicker-input").blur(function(){
    var valuew = $('.datepicker-input').val() ;
    console.log(valuew);
    $(".date1").val(valuew);
  });
});

the datepicker value is not assign to the div.If i use type hidden to datepicker is datepiker calender not showing.

Vikash Pandey · Accepted Answer · 2016-09-30T10:24:41.407

1

$(function(){
    
    $('#thedate').datepicker({
        dateFormat: 'dd-mm-yy',
         onSelect: function(dateText) {
     $('#dateContainer').text(dateText);
        console.log(dateText);
        }
        
    });
    
});

<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
Shown Date : <div id="dateContainer" type="button" > currentData </div>
<input id="thedate" type="text" /><br />
<input id="thesubmit" type="button" value="Submit" />

Well, Below is the jquery date picker with editable textbox.

JS Fiddle with date picker:- http://jsfiddle.net/vikash2402/8w8v9/1989/

JS Fiddle with date picker and div:- http://jsfiddle.net/vikash2402/8w8v9/1990/

Hoping this will help you :)

edited Sep 30 '16 at 10:24

answered Sep 30 '16 at 10:15

Vikash Pandey

5,407
6
41
42

1

Thanks for the comment :) – Raghul Rajendran Oct 05 '16 at 10:38
One more clarification if you know please help How to use the input field inside the table for using datepicker inside if i used inside the table but input field not came inside the table. – Raghul Rajendran Oct 05 '16 at 10:45
can you just create your html layout here so that i can provide you exact solution. However don't worry it is doable.. just give some more details about it.. or simlply post a new question and give me the link... – Vikash Pandey Oct 05 '16 at 10:56
Hi @ Developerrr thanks for the reply i posted other questine here is the link http://stackoverflow.com/questions/39874737/if-it-is-possible-to-focus-the-hidden-input-field it reflects the the above code if you know please comment for the question. – Raghul Rajendran Oct 05 '16 at 13:03
I have added an answer to the question check if that useful for you. – Vikash Pandey Oct 05 '16 at 13:59
Hi @ Developerrr could you know please comment for the question reg:bootstrap datepicker.here is the link http://stackoverflow.com/questions/40265208/datepicket-is-not-working-while-replacing-bootstrap-datepicket-with-js-datepicke – Raghul Rajendran Oct 26 '16 at 14:40
Hi @ Developerrrcould you know please comment for the question reg:datatable plugin .here is the link http://stackoverflow.com/questions/40971532/how-to-sort-the-datetime-field-in-datatable-plugin-in-php – Raghul Rajendran Dec 05 '16 at 10:03

score 1 · Answer 2 · edited Mar 25 '17 at 10:53

1

Use jQuery $(".date1").text(valuew);

or using DOM

document.getElementsByClassName("date1").textContent=valuew;

edited Mar 25 '17 at 10:53

marc_s

732,580
175
1,330
1,459

answered Sep 30 '16 at 11:18

subrahmanya bhat

588
3
11

score 0 · Answer 3 · answered Dec 20 '17 at 23:45

0

The selector for your event -

$('.date').click(function() {

references a class that doesn't exist... Shouldn't you be using:

$('.date1').click(function() {

Also shouldn't you be setting your DIV value with .html() and not .val()?

answered Dec 20 '17 at 23:45

Andrew

253
2
14

How to use the datepicker in html contenteditable element

3 Answers3