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.

Answer 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 :)