I'm looking for a way to use contentEditable with jQuery DatePicker. How can I use it on editable tables??
I found one answer here : http://www.sencha.com/forum/showthread.php?229598-Looking-to-enable-contenteditable-true-for-custom-input-type
And this is what I tried to do using the example given on the link above.
HTML code:
<td>
<div class='date' contenteditable='false'>2014-04-05</span>
<input type='hidden' class='datepicker' />
</td>
Javascript code:
$(".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();
}
});
But this method doesn't work for me.
Additional Info: I'm using bootstrap and jquery-tablesorter.
I made it for myself with the following steps:
Used a hidden input for the datepicker, to work along with the contenteditable div:
<div class="holder">
<input name="date" class="datepicker-input" type="hidden" />
<div class="date" contentEditable="true"></div>
</div>
With the following jQuery:
// Binds the hidden input to be used as datepicker.
$('.datepicker-input').datepicker({
dateFormat: 'dd-mm-yy',
onClose: function(dateText, inst) {
// When the date is selected, copy the value in the content editable div.
// If you don't need to do anything on the blur or focus event of the content editable div, you don't need to trigger them as I do in the line below.
$(this).parent().find('.date').focus().html(dateText).blur();
}
});
// Shows the datepicker when clicking on the content editable div
$('.date').click(function() {
// Triggering the focus event of the hidden input, the datepicker will come up.
$(this).parent().find('.datepicker-input').focus();
});
None of them worked for me.
I think there must have been a change in the browser specs where hidden type can't have focus.
Anyway, my solution is to hide the input with in a div.
Fyi: Trying to hide the input or wrapping it in a span will not work.
$('.datepicker-input').datepicker({
minDate: 0,
onClose: function(dateText, inst) {
$('.date').text(
inst.selectedDay +"-"+
(inst.selectedMonth+1) +"-"+
inst.selectedYear);
}
});
$('.date').click(function() {
$('.datepicker-input').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/start/jquery-ui.css">
<div style="height:0px; overflow:hidden">
<input class="datepicker-input" type="date"/>
</div>
<span class="date" contentEditable="true">Date?</span>
Enjoy! ^_^
You are not closing the div tag in your html
this
<div class='date' contenteditable='false'>2014-04-05</span>
should be
<div class='date' contenteditable='true'>2014-04-05</div>
Since the rows of the tables are generated dynamically, so you have to create the datepicker dynamically on editing the row. You can use the "focus" or "click" event of the row to bind the datepicker dynamically. Below code demonstrates the same:
//Add dynamic row when focused on the row
$(document).on("focus", "#tblMeetingDetails tr", function() {
if ($(this).find("input[type=hidden].datepicker").attr("id") === undefined) {
$(this).find("input[type=hidden].datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
showOn: "button",
buttonImage: "images/calendar-icon.png",
buttonImageOnly: true, onSelect: function() { },
onClose: function(dateText, inst) {
$(this).parent().find("[contenteditable=false]").html(inst.input.text()).blur();
}
});
$(this).find(".ui-datepicker-trigger").css("visibility", "hidden");
}
return false;
});
and your html for the row would look some what like the below code:
<tr>
<td>
<div class="date" contenteditable="false">
</div>
<input type="hidden" class="datepicker" />
</td>
</tr>
you can even use the ".date" class to find the contenteditable field for setting the date in the close event as below :
$(this).parent().find(".date").html(inst.input.text()).blur();
Hope this would help :)
Related
I am using the jQuery date picker and I want to clone the input element. The jQuery code seems to be working fine when cloning and static element but not with the date picker. Below is the code:
$(function(){
var $button = $('.datepicker-input--checkin').clone();
$('.package').html($button);
});
$(function(){
$('#thedate').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
});
Shown Field :
<input id="thedate" type="text" class="datepicker-input--checkin" /><br />
Hidden Field :
<input id="thealtdate" type="text" class="datepicker-input--checkin" /><br />
<input id="thesubmit" type="button" value="Submit" />
<div class="package">
</div>
Fiddle:
After cloning the input, you would need to initialize the datepicker again on the input.
You could do that by adding a class datepicker on the input intended to have the datepicker, and then initializing the datepicker (after cloning) using:
$(".package .datepicker").datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
Here's the updated fiddle: https://jsfiddle.net/txqepe36/3/
You could simplify the code even further by removing the datepicker initialization through element ID, since you have a class datepicker on both inputs expected to have a date picker control.
Your JS code could be simplified to:
$(function() {
var $button = $('.datepicker-input--checkin').clone();
$('.package').html($button);
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
});
Note that you would need to add a datepicker class to the input. So it should look like:
<input id="thedate" type="text" class="datepicker-input--checkin datepicker" />
Here's the fiddle: https://jsfiddle.net/txqepe36/4/
I have the following div:
<div class="input-group">
<input type="hidden" id="datepicker">
<input type="text" id="input_date" class="form-control" value="" readonly='readonly'>
<span class="input-group-addon" id="input_btn_calendar"><i class="fa fa-calendar"></i></span>
</div>
And the following JQuery call:
var today = new Date();
$("#input_date").datepicker({
changeYear: false,
numberOfMonths: 1,
altFormat: "yy-mm-dd",
altField: "#datepicker",
minDate: today,
onSelect : function () {
var inputdate = $.datepicker.parseDate('yy-mm-dd', $("#datepicker").val());
}
}).datepicker("setDate",today);
This makes the datepicker appear correctly when I press the text field. However, I also want it to show up when I click the input_btn_calendar button inside the accompanying span.
I've tried this:
$("#input_btn_calendar").click(function() {
$("input_date").datepicker('show')
});
But unfortunately, that does nothing. What am I missing?
You have an invalid selector of $('input_date').
Try this instead,
$("#input_btn_calendar").click(function() {
$("#input_date").datepicker('show')
});
How can I use the jquery datepicker to input date from an icon and also to take random text from keyboard.
For example
I need a text box to take Exact date (26-10-2015) and also text like since 3 years.
Thanks in advance.
You could just use a hidden input as datepicker with this kind of logic e.g:
$(function() {
$(".date").datepicker({
dateFormat: 'dd/mm/yy',
showOn: "button",
buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
buttonImageOnly: true,
buttonText: "Select date",
onSelect: function(dateText) {
$(this).prev().val(dateText);
}
});
$('input + .date').prev().on('change', function() {
var dateStr = this.value.split(/[\/-]/);
$(this).next().datepicker("setDate", new Date(dateStr[2], dateStr[1] - 1, dateStr[0]) );
})
});
.date {
display: none;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input placeholder="Any text there" />
<input type="text" name="date" class="date" readonly />
I am dynamically generating table rows using the following javascript codes:
$('#addNew').on('click', function() {
var clone = $('table.table-responsive tr.cloneme:first').clone();
console.log(clone);
clone.append("<td><button class='deleteAdded btn btn-danger'>Remove</button></td>")
$('table.table-responsive').append(clone);
calculateSum();
});
And this is my script for appending jQuery calendar to date inputs
$(function() {
$('input').filter('.datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
});
});
Now the problem I am facing is that the jQuery calendar pops up only in the first row. It doesn't work on the rows that are generated.
This in my html
<td>
<input type="text" class="form-control datepicker" name="invoiceDate[]" readonly="readonly" />
</td>
Please tell me how to make jQuery calendar work on all the rows that are dynamically generated. Looked around Google but nothing helped.
Thanks in advance.
You have to initiate the datepicker after the new rows are created
jQuery(function($) {
//create a original copy of the row to clone later
var $tr = $('table.table-responsive tr.cloneme:first').clone();
//add dp to existing rows
addDP($('input.datepicker'));
$('#addNew').on('click', function() {
var clone = $tr.clone();
console.log(clone);
clone.append("<td><button class='deleteAdded btn btn-danger'>Remove</button></td>");
//add dp to the new row
addDP(clone.find('input.datepicker'));
$('table.table-responsive').append(clone);
calculateSum();
});
function addDP($els) {
$els.datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<table class="table-responsive">
<tr class="cloneme">
<td>
<input type="text" class="form-control datepicker" name="invoiceDate[]" readonly="readonly" />
</td>
</tr>
</table>
<button id="addNew">Add</button>
$('#addNew').on('click',function(){
.....
.....
addDP();
});
addDP();
function addDP(){
$('input').filter('.datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
});
}
How i can get picked data in inline mode.
With popup its easy to do with input tag
<input type="hidden" id="defaultInlineDatepicker" size="60">. And when i can write data to database. But i need calendar on my page inline.
<p>
<span id="defaultInlineDatepicke" class="datepicker"></span>
</p>
<script>
$('#defaultInlineDatepicke').datepick({multiSelect: 999,
showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
</script>
The datepicker is not an input tag, it is a UI enhancement plugin. SO you need to change the span to an input field.
<p>
<input id="defaultInlineDatepicke" class="datepicker" type="text"/>
</p>
<script>
$('#defaultInlineDatepicke').datepick({multiSelect: 999,
showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
</script>
Here is working code for you:
Script::
$(function() {
$('#datepicker').datepicker({
altField: '#datepicker_pick',
onSelect: function() {
alert($("#datepicker_pick").val());
}
});
});
HTML:
Date: <div id="datepicker"></div>
<input type="hidden" id="datepicker_pick" name="datepicker_pick">