I want to render a datepicker on click of a small image, select the date, use the selected date to populate a group of select elements of years, months and days based on the selected date. I figured out the onSelect portion and applying the selected date to the options in the select element.
My problem is the datepicker doesn't close on date selection. It stays there. If i call the hide() method, it hides the image (part of the span element) as well. This is my HTML code:
<span id="pickupCalendar"><img src="/images/calendar.png"></img></span>
This is the script:
$("#pickupCalendar").click(function () {
$("#pickupCalendar").datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function (dateText, inst) {
//code to fill the other elements with the selected date goes here
$("#pickupCalendar").datepicker().hide(); //<-- hides the image (span element along with the datepicker)
}
});
});
I would change the HTML markup, so it makes it easier to target the elements.
<span id="pickupCalendar"></span><button>Button</button>
$("button").click(function () {
$("#pickupCalendar").show();
$("#pickupCalendar").datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function (dateText, inst) {
//code to fill the other elements with the selected date goes here
$("#pickupCalendar").datepicker().hide();
}
});
});
FIDDLE
Can you try this?
$("#pickupCalendar").click(function () {
$("#pickupCalendar").datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function (dateText, inst) {
//code to fill the other elements with the selected date goes here
$("#pickupCalendar").datepicker().hide();
$("#pickupCalendar img").hide();
}
});
});
Related
I'm starting with javascript and I have a little problem with the datepicker. I have an object created which select a date from a panel (with format mm-yy). The problem is that if I write a date manually it doesn't save that data and puts the default one in the displayed calendar. I need to define the date both from the calendar and by written in the text box. This problem doesn't occur when the format is dd-mm-yy, but I need the mm-yy format. Thank you!
The code is:
$(function() {
$('.calendar').datepicker( {
showButtonPanel: true,
dateFormat: 'mm-yy',
onClose: function(selectedText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
Date from calendar
$(function() {
$('#datepicker').datepicker( {
showButtonPanel: true,
dateFormat: 'dd-mm-yy',
onClose: function(dateVal) {
var ym = dateVal.substring(3);
document.getElementById("datepicker").value = ym;
}
});
});
I have below code, which allows the user to select weekDays only.
However, the datepicker module is not closing when you select the dates nor refreshing.
I am trying to add the onClose: function() but not much luck :(
Please advise.
NWF.FormFiller.Events.RegisterAfterReady(function (){
NWF$('.nf-date-picker').datepicker('option',
{
minDate: 0,
maxDate: '+2y',
beforeShowDay: NWF$.datepicker.noWeekends,
onSelect: function(datestr){startdate = $(this).datepicker('getDate');}
onClose: function() {$(datestr).trigger('change');}
});
});
How can I trigger onSelect event when I select a selected date on jQuery UI datepicker?
Working demo : http://jsfiddle.net/YbLnj/
Documentation: http://jqueryui.com/demos/datepicker/
code
$("#dt").datepicker({
onSelect: function(dateText, inst) {
var date = $(this).val();
var time = $('#time').val();
alert('on select triggered');
$("#start").val(date + time.toString(' HH:mm').toString());
}
});
Use the following code:
$(document).ready(function() {
$('.date-pick').datepicker( {
onSelect: function(date) {
alert(date)
},
selectWeek: true,
inline: true,
startDate: '01/01/2000',
firstDay: 1,
});
});
You can adjust the parameters yourself :-)
If you are also interested in the case where the user closes the date selection dialog without selecting a date (in my case choosing no date also has meaning) you can bind to the onClose event:
$('#datePickerElement').datepicker({
onClose: function (dateText, inst) {
//you will get here once the user is done "choosing" - in the dateText you will have
//the new date or "" if no date has been selected
});
$(".datepicker").datepicker().on("changeDate", function(e) {
console.log("Date changed: ", e.date);
});
If the datepicker is in a row of a grid, try something like
editoptions : {
dataInit : function (e) {
$(e).datepicker({
onSelect : function (ev) {
// here your code
}
});
}
}
I have this piece of code that uses jquery datepicker and jquery masked input.
jQuery(function($) {
$(document).on('click', '#date', function () {
var me = $("#date");
me.datepicker({
showOn: 'focus',
altFormat: "mm/dd/yy",
dateFormat: "mm/dd/yy",
minDate: '12/12/2000',
maxDate: '12/12/2020'
}).focus();
me.mask('99/99/9999');
}).on('select', '#date', function () {
var me = $("#date");
me.mask('99/99/9999');
});
});
JSFiddle
The code uses jquery on because the input element in the application is dynamically added into the page. And the masked input is also registered from select event because user can come to the input by pressing tab from previous input.
It doesn't work on Firefox 31, but it works fine on Chrome 36 and IE 11.
When the input field is empty, user should be able to type anything (based on masked filter) in the input element.
Kindly suggest me what's wrong with the code.
Just fixed it by changing the select into focus, I can't remember why I used select in the first place.
jQuery(function($) {
$(document).on('click', '#date', function () {
var me = $("#date");
me.datepicker({
showOn: 'focus',
altFormat: "mm/dd/yy",
dateFormat: "mm/dd/yy",
minDate: '12/12/2000',
maxDate: '12/12/2020'
}).focus();
}).on('focus', '#date', function () {
var me = $("#date");
me.mask('99/99/9999');
});
});
Fixed JSFiddle
I am working on my personal work website.
My problem is, in calender "From" date can be picked even before today (not good), moreover if "From" date is selected 5 days from today, in "To" date it still gives me option to select date for before "From" selected date.
while it should only let me select date beyond what I have in "From" date. Moreover can't figure out how to bring hover effect in "end date"(Like even if hover 6th day from now, shouls highlight 5th & sixth day.)
JavaScript:
$(document).ready(function(){
$('#from').datepicker({
numberOfMonths:2
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#to').datepicker({
numberOfMonths:2
});
});
</script>
To adjust the from date and set the minDate try something like the following.
You can find the api documentation here: http://api.jqueryui.com/datepicker
$(document).ready(function(){
$('#from').datepicker({
minDate: 0,
numberOfMonths:2,
onSelect: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$('#to').datepicker({
minDate: 0,
numberOfMonths:2
});
});
According to API DatePicker
you need to set minDate & maxDate on selection.
$(document).ready(function(){
$('#from').datepicker({
numberOfMonths:2,
onSelect: function (date) {
$("#to").datepicker("option", "minDate", date);
}
});
$('#to').datepicker({
numberOfMonths:2,
onSelect: function (date) {
$("#from").datepicker("option", "maxDate", date);
}
});
});