I've got a week picker that is working great, but I'd like for the picker to open by clicking on the Glyphicons PRO icon for a calendar.
Anyone know how to use a Glyphicons PRO calendar icon instead of the input field to open the date picker's calendar?
I'd also like the calendar to correctly highlight rows as I hover over any date in that row. Now, the rows are highlighted only if my chosen date is within that week's range.
$(function () {
var startDate;
var endDate;
var selectCurrentWeek = function () {
window.setTimeout(function () {
$('.ui-weekpicker').find('.ui-datepicker-current-day a').addClass('ui-state-active').removeClass('ui-state-default');
}, 1);
}
var setDates = function (input) {
var $input = $(input);
var date = $input.datepicker('getDate');
if (date !== null) {
var firstDay = $input.datepicker("option", "firstDay");
var dayAdjustment = date.getDay() - firstDay;
if (dayAdjustment < 0) {
dayAdjustment += 7;
}
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment + 6);
var inst = $input.data('datepicker');
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
$('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
}
}
$('.week-picker').datepicker({
beforeShow: function () {
$('#ui-datepicker-div').addClass('ui-weekpicker');
selectCurrentWeek();
},
onClose: function () {
$('#ui-datepicker-div').removeClass('ui-weekpicker');
},
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function (dateText, inst) {
setDates(this);
selectCurrentWeek();
$(this).change();
},
beforeShowDay: function (date) {
var cssClass = '';
if (date >= startDate && date <= endDate) cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function (year, month, inst) {
selectCurrentWeek();
}
});
setDates('.week-picker');
var $calendarTR = $('.ui-weekpicker .ui-datepicker-calendar tr');
$calendarTR.live('mousemove', function () {
$(this).find('td a').addClass('ui-state-hover');
});
$calendarTR.live('mouseleave', function () {
$(this).find('td a').removeClass('ui-state-hover');
});
});
Here's my fiddle.... http://jsfiddle.net/notanothercliche/ke62p/
Instead of Glyphicons pro, jQuery UI datepicker is providing a calendar icons which can used lik
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true
JSFiddle
As per your comments,
I have triggered the datepicker when the icon class is clicked,
$('.glyphicon-calendar').on('click', function () {
$('.week-picker').focus()
});
check this fiddle.
FYI .live is removed in jQuery 1.9.1 so replace .live with .on
You can use a label with "glyphicon" and "for" attribute
<label for="date_control" class="glyphicon glyphicon-calendar"></label>
Related
it looks like the beforeShowDay doesn't work the first time I open the calendar on the current month.
I'm having the jquery ui datepicker with few active days each month.
when I refresh the website and open the calendar for the first time, i'll see that all the dates in January are unactive but if I move to February and go back to Jan i'll see the active days (as I should the first time I opened it).
$("#divDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(value, date) {
//chose date
$("#search_term").val( $("#search_term").val() + value );
$("#divDatePicker").hide();
},
beforeShowDay: function(d) {
var year = d.getFullYear(),
month = ("0" + (d.getMonth() + 1)).slice(-2),
day = ("0" + (d.getDate())).slice(-2);
var formatted = year + '-' + month + '-' + day;
if ($.inArray(formatted, availableDates) != -1) {
return [true, "","Available"];
} else{
return [false,"","unAvailable"];
}
}
});
any ideas?
Consider the following example.
$(function() {
var availableDates = ["23-01-21", "23-01-22"];
$("#divDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(value, date) {
//chose date
var temp = $("#search_term").val();
temp += value;
$("#search_term").val(temp);
$("#divDatePicker").hide();
},
beforeShowDay: function(d) {
var formatted = $.datepicker.formatDate("y-mm-dd", d);
if (availableDates.indexOf(formatted) != -1) {
return [true, "", "Available"];
} else {
return [false, "", "unAvailable"];
}
}
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div id="divDatePicker"></div>
<input type="text" id="search_term" />
You can use the utility $.datepicker.formatDate( format, date, options ) to format a Date into a String. You stated you wanted YY-MM-DD, so "23-01-05" for today. This must match with some of your availableDates elements, which I am assuming is an array.
I have two date-pickers #from and #to, as usual, now what I need to do is make sure that the date range selected between the two is always within 3months of each other. So basically, on selecting one of the pickers, I need to set minDate/maxDate option for the other one relative to the selected date, But I don't know what would be the best way to find these relative dates. Any suggestions?
Alternatively you could do it like this:fiddle
Both ways are valid, i suppose.
.js
$("#startDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText,dateObj){
var dateObject = $(this).datepicker("getDate");
dateObject.setMonth(dateObj.currentMonth+3);
$("#endDatePicker").datepicker( "option", "maxDate",dateObject);
}
});
$("#endDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
onSelect: function(dateText,dateObj){
var dateObject = $(this).datepicker("getDate");
dateObject.setMonth(dateObj.currentMonth-3);
$("#startDatePicker").datepicker( "option", "minDate",dateObject);
}
});
I have created a jsfiddle.The range between the days is set to 3 days.you can edit based on ur requirement
$(document).ready(function () {
$("#startDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (date) {
if ($('#endDatePicker').val() == "") {
var selectedDate = new Date(date);
var secsPerDay = 86400000;
var endDate = new Date(selectedDate.getTime() + 2 * secsPerDay);
alert(endDate);
$("#endDatePicker").datepicker("option", "minDate", selectedDate);
$("#endDatePicker").datepicker("option", "maxDate", endDate);
}
}
});
$("#endDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
onSelect: function (date) {
if ($('#startDatePicker').val() == "") {
var selectedDate = new Date(date);
var secsPerDay = 86400000;
var startDate = new Date(selectedDate.getTime() - 5 * secsPerDay);
$("#startDatePicker").datepicker("option", "minDate", startDate);
$("#startDatePicker").datepicker("option", "maxDate", selectedDate);
}
}
});
});
and HTML
<p>Start Date:
<input type="text" id="startDatePicker"/>
</p>
<p>End Date:
<input type="text" id="endDatePicker"/>
</p>
I have a JQuery dialog that has two textboxes associated with Jquery date pickers, which are used to accept a date range.
I have added a custom button to the Jquery datepicker, called "Save". Problem is, when I click the button, the function associated with it executes, but the calendar remains open. I have to click on an area outside the datepicker to make the calendar close.
How do I fix this? This is seen only with IE. Works fine with FF.
var startDateTextBox = $('#StartDate');
var endDateTextBox = $('#EndDate');
This is my custom function:
function addSaveButton(textBoxObject)
{
//These variables can be ignored. Used to set limits for the other datepicker
var idTextBox = textBoxObject.attr('id');
var otherTextBoxObject = idTextBox == "StartDate" ? endDateTextBox : startDateTextBox;
var optionName = idTextBox == "StartDate" ? "minDate" : "maxDate";
setTimeout(function ()
{
var buttonPane = textBoxObject
.datepicker("widget")
.find(".ui-datepicker-buttonpane");
$("<button>", {
text: "Save",
click: function ()
{
//Get the date
var dateToBeSet = getDateToSet(idTextBox);
//Set the date
textBoxObject.datepicker('setDate', dateToBeSet);
//Set the limits for the other date picker
otherTextBoxObject.datepicker("option", optionName, dateToBeSet);
//Hide this datepicker
textBoxObject.datepicker("hide");
//Remove focus
textBoxObject.blur();
}
}).appendTo(buttonPane).addClass(".ui-datepicker-buttonpane ui-state-default ui-priority-primary ui-corner-all");
}, 1);
}
This is my datepicker code For one of the textboxes:
startDateTextBox.datepicker({
autoSize: true,
closeText: "OK",
showButtonPanel: true,
constrainInput: true,
showWeek: true,
maxDate: "+0",
dateFormat: 'd MM yy',
changeMonth: true,
changeYear: true,
beforeShow: function (input, inst)
{
addSaveButton(startDateTextBox);
},
onChangeMonthYear: function (year, month, inst)
{
addSaveButton(startDateTextBox);
},
onSelect: function (dateText, inst)
{
//Set the limits for the other date picker
instance = startDateTextBox.data("datepicker");
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
dateText,
instance.settings);
endDateTextBox.datepicker("option", "minDate", date);
},
onClose: function (dateText, inst)
{
//Remove focus
startDateTextBox.blur();
}
});
I updated the function addSaveButton(textBoxObject) and added code to briefly disable the input textbox associated wth the datapicker and it worked.
function addSaveButton(textBoxObject)
{
...
setTimeout(function ()
{
var buttonPane = textBoxObject
.datepicker("widget")
.find(".ui-datepicker-buttonpane");
$("<button>", {
text: "Save",
click: function ()
{
.
.
.
//Remove focus
textBoxObject.blur();
//Disable textbox
textBoxObject.attr("disabled", "disabled");
setTimeout(function ()
{
// Removed the 'disabled' attribute after 1 millisecond
textBoxObject.removeAttr("disabled");
}, 1);
}
}).appendTo(buttonPane).addClass(".ui-datepicker-buttonpane ui-state-default ui-priority-primary ui-corner-all");
}, 1);
}
I have a jquery ui datepicker range with a from-date and to-date, how do I send an alert when the date range is changed? here's my code:
$(function() {
var dates = $("#date-from, #date-to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onSelect: function(selectedDate) {
instance = $(this).data("datepicker"), date = $.datepicker.parseDate(
instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.datepicker("option", "dateFormat", "DD, d MM, yy");
}
});
$('#date-from').datepicker({
onClose: function() {
alert("closed");
}
});
});
but the onClose: event is not fired. Thanks
You can either separately initialise #date-from and #date-to, or include the onClose option in the combined initiation and check for the element ID. Here is an example for the 2nd approach:
var dates = $("#date-from, #date-to").datepicker({
...
onClose: function() {
if ($(this).attr('id') == 'date-from') {
alert("closed");
}
}
});
See this in action: http://jsfiddle.net/william/L9Szd/1/
I have this code
$("#calendar").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText, inst) {
$('.selected-date').html(dateText);
}
});
I am looking for a way to send the date in 1 format to the database with ajax(not shown) and also update a div with a different date format.
What is the best way to do this?
Update # 1
$("#calendar").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText, inst) {
var fmt2 = $.datepicker.formatDate("mm-dd-yy", dateText);
$(".selected-date").html(fmt2);
}
});
Update # 2
$("#calendar").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText, inst) {
var d = new Date(dateText);
var fmt2 = $.datepicker.formatDate("DD, d MM, yy", d);
$(".selected-date").html(fmt2);
}
});
You've already got the function that's called when a date is selected, so you can then do something similar to the following:
onSelect: function(dateText, inst) {
$('.selected-date').html(dateText);
var fmt1 = $.datepicker.formatDate("yy-mm-dd", dateText);
$.get("/your/ajax/url/" + fmt1, yourCallbackFunction);
var fmt2 = $.datepicker.formatDate("mm-dd-yy", dateText);
$("#someotherdiv").html(fmt2);
}
Not tested but should work... :-)
Update #1
Looks like the datepicker.formatDate() function needs a Date object to work with. The following works here...
onSelect: function(dateText, inst) {
$('.selected-date').html(dateText);
var d = new Date(dateText);
var fmt1 = $.datepicker.formatDate("dd/mm/y", d);
$.get("/your/ajax/url/" + fmt1, yourCallbackFunction);
var fmt2 = $.datepicker.formatDate("MM o, yy", d);
$("#someotherdiv").html(fmt2);
}