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 />
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 am building an accommodation rental search form. The website is ASPX based and I am using the JS Jquery Datepicker setup with CSS to make it work.
I am able to make the date popup work and position correctly. However, when the website user chooses the first date, I need the second date popup window to open +2 days. Or the second date to be set to +2 days.
Does anyone know how to add JS code to my current setup to make this work? Any help would be greatly appreciated as I looked at several posts about this topic and could not get it to work.
Below is the JS that I am using so far:-
<script>
$(document).ready(function() {
$("#txtDate").datepicker({
showOn: 'button',
buttonText: 'Show Date',
numberOfMonths:1,
buttonImageOnly: true,
buttonImage: '/images/cont/mobile/calendar.png'
});
$("#txtDate2").datepicker({
showOn: 'button',
buttonText: 'Show Date',
numberOfMonths:1,
buttonImageOnly: true,
buttonImage: '/images/cont/mobile/calendar.png'
});
$(".ui-datepicker-trigger").mouseover(function() {
$(this).css('cursor', 'pointer');
});
});
</script>
And this is the HTML:-
<input type='text' id='txtDate' name="checkin" value=" " />
<input type="text" id="txtDate2" name="checkout" value=" " />
You can get the selected date and add 2 days to it based on onSelect event of the first datepicker.
$(function () {
$("#txtDate").datepicker({
//showOn: 'button',
buttonText: 'Show Date',
numberOfMonths: 1,
buttonImageOnly: true,
buttonImage: '/images/cont/mobile/calendar.png',
onSelect: function(dateText, inst) {
var txtDate = $(this).datepicker('getDate');
txtDate.setDate(txtDate.getDate() + 2);
$("#txtDate2").datepicker('setDate', txtDate);
}
});
$("#txtDate2").datepicker({
//showOn: 'button',
buttonText: 'Show Date',
numberOfMonths: 1,
buttonImageOnly: true,
buttonImage: '/images/cont/mobile/calendar.png'
});
$(".ui-datepicker-trigger").mouseover(function () {
$(this).css('cursor', 'pointer');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type='text' id='txtDate' name="checkin" value=" " />
<input type="text" id="txtDate2" name="checkout" value=" " />
I have a datepicker that shows the week of the year.
What I would like to do is enable the week number, so the user can choose the week number or the day.
Example: one user picked the week 32, and other user picked 08/08/2016.
HTML code:
<label>Select Week</label>
<input type="text" id="datepicker" name="weekPicker">
Script code:
$(function(){
$( "#datepicker" ).datepicker({
showWeek: true,
firstDay: 1,
maxDate: 'today'
});
});
Working demo:
https://jsfiddle.net/iandrabedin/jhducskr/
Adding an event handler to the week numbers in the beforeShow handler will do that
$(function() {
$("#datepicker").datepicker({
showWeek: true,
firstDay: 1,
maxDate: 'today',
beforeShow: function(elem, ui) {
$(ui.dpDiv).on('click', 'tbody .ui-datepicker-week-col', function() {
$(elem).val('Week ' + $(this).text()).datepicker( "hide" );
});
}
});
});
.ui-datepicker table tbody .ui-datepicker-week-col {
cursor: pointer;
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<p>Click week numbers to select weeks, dates to select dates etc.</p>
<label>Select Week</label>
<input type="text" id="datepicker" name="weekPicker">
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 :)
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">