2016-09-30 3 views
1

Привет Я использую плагин datepicker в contenteditable element.Have, чтобы выбрать значение datepicker в contenteditable div. Html:Как использовать datepicker в html contenteditable element

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

Сценарий:

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

значение по DatePicker не присвоить div.If я использовать тип скрытый для DatePicker является datepiker каландр не показывает.

ответ

1

$(function(){ 
 
    
 
    $('#thedate').datepicker({ 
 
     dateFormat: 'dd-mm-yy', 
 
     onSelect: function(dateText) { 
 
    \t \t $('#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" />

Ну Ниже jquery date picker с редактируемым текстовым полем.

JS Fiddle с выбором даты: - http://jsfiddle.net/vikash2402/8w8v9/1989/

JS Fiddle с выбором даты и DIV: - http://jsfiddle.net/vikash2402/8w8v9/1990/

Надеясь это поможет :)

+1

Спасибо за комментарий :) –

+0

вы можете :) –

+0

еще одно уточнение, если вы знаете, пожалуйста, помогите Как использовать поле ввода внутри таблицы для использования DatePicker внутри , если я использовал внутри таблицы , но вход поле не попало в таблицу. –

1

Использование JQuery $(".date1").text(valuew);

или с помощью DOM

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

Селектор для Вашего мероприятия -

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

ссылки класс, который не существует ... Вы не должны использовать :

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

Также не следует устанавливать значение вашего DIV с помощью .html(), а не .val()?