When I use the jquery datepicker, it almost always is configured as such:
$('#dateFld').datepicker({
dateFormat: 'mm/dd/yy',
showOn: 'button',
buttonText: 'Edit date value',
buttonImage: '<s:url includeParams="none" value="/images/calendar.gif"/>',
buttonImageOnly: true
});
...
<p>Date: <input type="text" id="dateFld" /></p>
The only thing that tends to change each time I define a field like this is the buttonText value. I would love to be able to use the input field's title attribute as the buttonText value so that I could configure all my datepickers using a .datepicker class selector instead. Something like this:
$('.datepicker').datepicker({
dateFormat: 'mm/dd/yy',
showOn: 'button',
buttonText: $(this).attr('title'),
buttonImage: '<s:url includeParams="none" value="/images/calendar.gif"/>',
buttonImageOnly: true
});
...
<p>Date: <input class="datepicker" type="text" id="dateFld" title="Edit date value" /></p>
This approach almost works, but I'm ending up with the title from the page, not the selected input field. Thoughts?
$('.datepicker').each(function() {
$currentDatepicker = $(this);
$currentDatepicker.datepicker({
dateFormat: 'mm/dd/yy',
showOn: 'button',
buttonText: $currentDatepicker.attr('title'),
buttonImage: '<s:url includeParams="none" value="/images/calendar.gif"/>',
buttonImageOnly: true
});
});
This should work !
Related
I'm using two datepickers in my project, start date and end date.
The first one open the second calendar with show method.
I notice the next button on the second calendar close and reopen the calendar.
I want to avoid this "open/reopen" issue.
What am i doing wrong ?
HTML
<input id="startDate" type="text" /><br />
<input id="endDate" type="text" /><br />
Javascript
$(function(){
$('#startDate').datepicker({
dateFormat: 'dd-mm-yy',
onClose: function (dateText, inst) {
$('#endDate').datepicker("show");
}
});
$('#endDate').datepicker({
dateFormat: 'dd-mm-yy'
});
});
Please check my code : http://jsfiddle.net/8w8v9/3078/
I have a dirty solution, I can only suppose what happen: you show the "endDate" datepicker before is totaly closed the first one and this creates some conflict.
The JSFiddle
$(function() {
$('#startDate').datepicker({
dateFormat: 'dd-mm-yy',
onClose: function(dateText, inst) {
setTimeout(function() {
$('#endDate').datepicker('show');
}, 50);
}
});
$('#endDate').datepicker({
dateFormat: 'dd-mm-yy'
});
});
Have the following code... (in a bootstrap environment)
<script>
$(document).ready(function(){
$( "#DateValidfrom" ).datepicker( {
showAnim: "clip",
minDate: +2,
maxDate: "+24M +1D",
dateFormat: "DD, d M yy",
altFormat: "yy-mm-dd",
altField: "#alt-date",
changeMonth: true,
changeYear: true,
onClose: function() {
var date2 = $('#DateValidfrom').datepicker('getDate');
date2.setDate(date2.getDate()+364)
$( "#DateValidTo" ).datepicker("setDate", date2);
}
});
$( "#DateValidTo" ).datepicker({dateFormat: "yy-mm-dd"});
});
</script>
All works good - no probs UNTIL I click out of the datepicker field say to go to fill out a another field, come back to the datepicker field, click, and get the error "Uncaught TypeError: Cannot read property 'setDate' of null(…)"
I refresh the page - all good again..
So, first click - works well, click out and come back again - no go - error as above.
This part of the code the problem?
onClose: function() {
var date2 = $('#DateValidfrom').datepicker('getDate');
date2.setDate(date2.getDate()+364)
$( "#DateValidTo" ).datepicker("setDate", date2);
}
The 3 fields are
<input type="text" id="DateValidfrom" name="DateValidfrom" readonly class="form-control" required>
<input type="hidden" id="alt-date" name="DateValidfrom" />
<input name="DateValidTo" type="hidden" id="DateValidTo">
Arrrgghhhh.... Surely it can't be this simple???
Changed
onClose: function() {
To
onSelect: function() {
Seems to work? Correct?
I am trying to get the Datepicker Calendar Icon to appear next to the input textbox. However, using 'id=datepicker' I can only get it to appear next to the Departure Date's textbox, but not next to the Return Date's textbox. This is because I am using 'id' twice, however when I switch it to 'class=datepicker' the Icon disappears from both.
<html>
...
<head>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="jquery-ui.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true
});
});
</script>
...
</head>
<body>
...
<strong>Departure date</strong><span>*</span>:
<input type="text" id="datepicker" name="departuredate"/>
<strong>Return date</strong><span>*</span>:
<input type="text" id="datepicker" name="returndate"/>
...
...
Do not:
Include the same JavaScript (either minified or not) multiple times in the one page.
Assign the same ID to multiple elements in the one page.
If you do the following (note the different IDs):
<strong>Departure date</strong><span>*</span>:
<input type="text" id="dDatepicker" class="datepicker" name="departuredate"/>
<strong>Return date</strong><span>*</span>:
<input type="text" id="rDatepicker" class="datepicker" name="returndate"/>
Then this will work:
$(function() {
$( ".datepicker" ).datepicker({
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true
});
});
Fiddle here.
Edit
You may also need to check your CSS, as the datepicker class may be overridden. Maybe try including onlynone jquery-ui.css to test.
If it is just a case of the calendar icon not rendering, then you need to specify the correct path to the calendar.gif file. So say you can see the file in your browser when you go to http://mysite.com/path/to/images/calendar.gif
You then need to set up datepicker like so:
$(function() {
$( ".datepicker" ).datepicker({
showOn: "button",
buttonImage: "/path/to/images/calendar.gif",
buttonImageOnly: true
});
});
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true
});
$( "#datepicker2" ).datepicker({
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true
});
});
</script>
My code is
jQuery(function() {
jQuery("#fromDatepicker").datepicker({
changeMonth : true,
changeYear : true,
dateFormat: 'mm/dd/yy'
});
});
jQuery(function() {
jQuery("#toDatepicker").datepicker({
changeMonth : true,
changeYear : true,
dateFormat: 'mm/dd/yy'
});
});
and input fields are
<input type="text" id="fromDatepicker" name="searchStartDate" size="20">
<input type="text" id="fromDatepicker" name="searchStartDate" size="20">
the calender is displaying but,
when I select a date on the calendar, the date is not selecting and not entering the date into the text field.
i am using
jquery-1.6.2.js
jquery-1.6.2.min.js
jquery.ui.core.js
jquery.ui.datepicker.js
jquery.ui.datepicker.css
You are including the same version of jQuery twice, jquery-1.6.2.js and jquery-1.6.2.min.js. Just load the latter and this should stop some of the issues you are having.
Additionally, you have unnecessarily put the code into 2 jQuery(); calls, they could be put into one like this
jQuery(function() {
jQuery("#fromDatepicker").datepicker({
changeMonth : true,
changeYear : true,
dateFormat: 'mm/dd/yy'
});
jQuery("#toDatepicker").datepicker({
changeMonth : true,
changeYear : true,
dateFormat: 'mm/dd/yy'
});
});
You can simplify this entire thing a bit:
<input type="text" id="fromDatepicker" size="20" />
<input type="text" id="toDatepicker" size="20" />
jQuery(function() {
jQuery("#fromDatepicker, #toDatepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy'
});
});
See it in action here: http://jsfiddle.net/MarkSchultheiss/jUsTr/
By putting the comma between the selectors they are two selectors.
I am using JQuery's UI datepicker: http://jqueryui.com/demos/datepicker/
implemented here:
http://www.clients.eirestudio.net/old/
I want to use a link as the trigger but I can't get it to work.
Here is my code:
// JQuery UI
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy'
});
<p class="clearfix hidden">
<input id="" class="input float datepicker" type="input" name="" value="" />
<a class="calendar ui-icon ui-icon-calendar">Date</a>
<span class="mid-info">To</span>
<input id="" class="input datepicker" type="input" name="" value="" />
<a class="calendar" href="#">Date</a>
</p>
Any ideas?
You could do something like I did in this fiddle
HTML:
Toggle
JS:
var $dp = $("<input type='text' />").hide().datepicker({
onSelect: function(dateText, inst) {
$("body").append("<div>Selected "+dateText+"</div>");
}
}).appendTo('body');
$("#toggleDP").button().click(function(e) {
if ($dp.datepicker('widget').is(':hidden')) {
$dp.show().datepicker('show').hide();
$dp.datepicker("widget").position({
my: "left top",
at: "right top",
of: this
});
} else {
$dp.hide();
}
//e.preventDefault();
});
I just solved this very easily in my app -- if you have your datepicker open with a text field, you can use this solution too. I added a $('#date_field').focus() link to the icon. Click the icon, the text field gets focus and that triggers the datepicker to open. Voila.
Try using:
Text here
<input type="hidden" id="inputID"/>
...
<script type="text/javascript">
$(document).ready(
function()
{
$('#inputID').datepicker();
}
);
</script>
This might help somebody else.
I ended up getting it to work with JQuery UI.
Code below:
$(".date-pick").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImage: 'http://www.example.com/elements/images/calendar.png',
buttonImageOnly: true
});
and I changed the datepicker id to date-pick class
Based on #camilokawerin answer, I did this and I find it the easieast and cleanest solution:
HTML:
Click <div id="datepicker" style="display:none"></div>
JS:
$("#datepicker").datepicker();
$('#selec').click(function(){
$('#datepicker').toggle();
});
From jqueryui, it seems like you should add showOn and maybe (don't know if it's required) buttonImage:
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImage: 'images/calendar.gif', // adapt this to your image
buttonImageOnly: true
});
With inline datepicker is pretty easier to do this. Check my JSFiddle.
HTML
Pick a date
JS
var dpToggler = $('a.datepicker').button(),
dp = $("<div />").css('position', 'absolute').hide().datepicker().appendTo(dpToggler);
dpToggler.on('click', function(e) {
e.preventDefault();
if (dp.is(':hidden')) {
dp.show().position({
my: 'left top',
at: 'right top',
of: this
});
} else {
dp.hide();
}
});