In my project, I have a simple datePicker, and another option to select range-of-days and I display chart according to the selected date(s).
when the user select a date, all works well.
but when the user select range-of-days, I want to display in the datePicker-text-box "(manual selection)".
How can I display my text in the datepicker text-box ?
My code:
$( "#datepicker" ).datepicker({
minDate: new Date(2016, 2 - 1, 11),
maxDate: new Date(2016, 2 - 1, 19),
defaultDate: new Date(2016, 2 - 1, 13),
onSelect: function(dateText, inst) {
DispalyChart(dateText);
}
});
$( "#datepicker" ).datepicker( "setDate", new Date(2016, 2 - 1, 13));
Is it something like appending placeholder to textbox...? please refer below code:
<input type="text" class="datepicker" placeholder="Start date:" />
<script>
$(".datepicker").datepicker({
onSelect: function(arg) {
$(this).val($(this).attr("placeholder") + arg);
}
});
</script>
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?
Im trying to get rid of the drop down menu here (circled in red) and have just display the month (circled in green)
Here is my code for the datepicker so far:
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
Get rid of changeMonth: true,.
jsFiddle example
HTML
<label for="checkIn">Check in</label>
<input type="text" readonly="readonly" name="checkIn" id="checkIn" />
<label for="checkOut">Check out</label>
<input type="text" readonly="readonly" name="checkOut" id="checkOut" />
javaScript
var dates = $( "#checkIn, #checkOut" ).datepicker({
autoSize: true,
minDate: "+0",
maxDate: "+6M",
onSelect: function( selectedDate ) {
var option = this.id == "checkIn" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat
|| $.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
now what I want that, whenever a user set any date for checkIn, checkOut should be next to that selected date along with all other options.
see the fiddle for the same
I tried a lot but not succeed. Please help me what logic to apply?
Try to separate the fields and initiate datepicker separately, and then, try this:
$('#date1').datepicker({
constrainInput: true,
dateFormat: 'D, dd M yy',
// Once change, set date2 min date
onSelect: function (dateText, inst) {
$('#date2').datepicker("option", "minDate", dateText);
}
});
$('#date2').datepicker({
constrainInput: true,
minDate: 0,
dateFormat: 'D, dd M yy'
});
Hope this help :)
shennyL answer didn't account for selected date + n.
So:
On your #checkIn place:
minDate: 0, //sets the minDate offset to 0, meaning today.
onSelect: function() {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() + 1);
$("#checkOut").datepicker("option", "minDate", date)
}
}
This works quite ok as far as I can tell. You may just need to clean up some code on your fiddle perhaps ?
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();
}
});