I am using Jquery-ui-datepicker as inline with multidate: true. when i select multiple dates and click outside the calendar still the last selected date is highlighted. I want to remove the highlight when we click outside the calendar after the dates got selected
I have tried to remove the active class from the date, but what is ts doing is from UI the highlight is going Off, but the datepicker is not updated, so when i click on other date both the dates are getting highlighted.
Another issue is like if i call update method, it is working fine but the thing is the calendar is resetted to current month.
I want to stay in the month where the user selected the dates, for example, i am selecting dates in November, if i update the datepicker, it is showing the "September" month which is current month.
$('.date').datepicker()
var new_options = {
multidate: true,
startDate: new Date,
todayHighlight: true,
// daysOfWeekHighlighted: [0, 6],
endDate: new Date('12/31/2050'),
dateFormat: 'mm-dd-yyyy',
beforeShowDay: function(date){
let formattedDate = moment(date).format("MM/DD/YYYY");
if ($.inArray(formattedDate, already_active_generalHolidays) != -1){
return {
classes: 'generalHolidayClass'
};
}
}
Related
I'm trying validate two QDateEdits. I have two fields, startdate and enddate and i want to validate that the minimum date of enddate be the selected startdate date. But also, i want give the user opportunity that the enddate field can be empty.
I conected both fields
connect(startDate,SIGNAL(dateChanged(QDate)),endDate,SLOT(setMinDate(QDate)));
startDate and endDate are QDateEdit with a popup calendar.
So, where is the problem here?? When i click over endDate the minimun date it's ok but the next day (fisrt valid date) appears in blue color like it was selected, but when i clicked over that date the popup close and the date it's not set. For example:
When i open the form the startdate field have by default the current date. Latter i click over endDate field and the minimum allowed date is one more day wich it's ok, but this minimum allowed date it's blue marked and when i clicked the date it's not set.
Sorry if my english it's so bad, i hope that you can help me. Thanks any way
I found what my problem is. I connected the slot to dateChanged(QDate) signal, so, by default the QDateEdit set the first allowed date as selected, so if you select it again the signal it's not emited and by result the date it's not set. My solution is use editingFinished() signal instead dateChanged(QDate) signal. I hope has been helpful. Regards,
I am using the following code for datepicke in my template.
{^{datepicker fromValue readonly="true" class="myclass"/}}
{^{datepicker toValue ^_minDate=fromValue class="myclass" readonly icon="show"/}}
I tried to achieve following things.
I want to make the datepicker field readonly. For the above code it is not happening.
How to show the calendar icon within the text box. currently its not happening. icon=show...I tried it . I didn't see anywhere.
In my case I have to show the toDate and FromDate at same time. If user first selects the toValue and come back to from value , how to restrict his max date. Currently it is not restricting user.So I can able to select from date which is greater than todate.
Thanks in advance.
For a readonly datepicker, it needs to be on a div, and have _disabled=true. If it is not a div the setting _disabled=true will disable the input, so the datepicker won't show.
{^{datepicker startDate elem="div" _disabled=true/}}
For providing an icon:
{^{datepicker startDate
_showOn= "button"
_buttonImage="https://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
_buttonImageOnly= true
_buttonText= "Select date"
/}}
For start and end date, see http://www.jsviews.com/#samples/tag-controls/datepicker/simple
{^{datepicker startDate
^_maxDate=endDate
/}}
{^{datepicker endDate
^_minDate=startDate
/}}
I have a list of events but I'm struggling to work out how to show specific date ranges in the index view.
I would like to list the events by showing events today, this week, this month etc.
I'm new to rails so I've tried to use this site and I've come up with the following which works for today's events.
#events_today = Event.find(:all, :conditions => ["date between ? and ?", Date.today, Date.tomorrow])
But I'm not sure how to set the page to automatically update and show only this weeks events and this month.
Your basic query should do something like this:
Event.where(date: date_range)
Now before calling this query you can set the date range variable. If you only want this week:
date_range = Date.today.beginning_of_week..Date.today
Event.where(date: date_range)
Now there are all sorts of things you can do. You can select a start and end date or a custom period using either a form or a dropdown select. In this case date_range is set based on your params. You could also always use one predefined period.
If you want to work with several date range periods it could be nice to have a last_week, last_month, etc. scope in your model (or concern). Or you could simply define date_range constants in your initializers.
As per my understanding, you want to show all the event of a week or month on click of tab 'Week' or 'Month' from view.
When you clicked on month or week for getting events, you send simply month or week in params(assuming params[:events_in] hold 'week' or 'month')
apply check on this attributes of params
def get_events_in_week_or_month
if params[:events_in] =='week'
start_date_of_time_period = Date.today.beginning_of_week
end_date_of_time_period = Date.today.end_of_week
else
start_date_of_time_period = Date.today.beginning_of_month
end_date_of_time_period = Date.today.end_of_month
end
#events in descending order
#events = Event.where("date between ? and ? ", start_date_of_time_period, end_date_of_time_period).order("created_at DESC")
#events in ascending order
#events = Event.where("date between ? and ? ", start_date_of_time_period, end_date_of_time_period)
end
for getting more methods of date class, you should run following command on rails console :
Date.public_methods
In the display numberOfMonths: 3, when I click on a date in the second month, it is sliding left. Is there a possiblity to disable this effect?
You would want to use the default functionality for the JQuery UI Date Picker. Link below. Basically take away the animations code.
http://jqueryui.com/datepicker/#default
Delete the code that looks similiar to this:
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
I have found that on github.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/issues/9, the "slide effect" is enabled, but when you go out of the 3 selected months, it is worse than before: at each date you add, you come back to the 3 selected months.
onSelect:function (dateText, inst) {
var newDate = new Date();
inst.drawMonth = newDate.getMonth();
inst.drawYear = newDate.getFullYear();
inst.currentMonth = newDate.getMonth();
inst.currentYear = newDate.getFullYear();
}
This piece of code put the the top-left month to be always the same on each select (in this case the current month).
So still searching...
I use jquery datepicker (v1.8.20) with the date format set to 'D MM d' which looks like: 'Wed September 12'. When I select different year than the current one from a calendar, the getDate method returns me current year. Moreover, when I open calendar again, both selected day and month are preserved, but the year is changed for the current one. Generally it looks like year is set to current one when the date format does not contain it. Any idea how to fix that?
Datepicker stores value only in input element, so if you don't have a year in format string, datepicker merely doesn't store it. Here one of jquery.ui developers says, that this is not a bug and "Datepicker is only designed to pick a full date".
Anyway, I had the same problem in my project, and solved it by ugly trick, that forces datepicker to store full date:
(function($) {
$.datepicker._selectDateParent = $.datepicker._selectDate;
$.datepicker._adjustInstDateParent = $.datepicker._adjustInstDate;
$.datepicker._adjustInstDate = function(inst, offset, period) {
var fullDate = inst.input.data('fullDate');
if(fullDate && !period) {
inst.drawYear = inst.currentYear = fullDate.getFullYear();
}
this._adjustInstDateParent(inst, offset, period);
};
$.datepicker._selectDate = function(id, dateStr) {
var target = $(id);
var inst = this._getInst(target[0]);
var date = this._daylightSavingAdjust(new Date(inst.currentYear, inst.currentMonth, inst.currentDay));
inst.input.data('fullDate', date);
this._selectDateParent(id, dateStr);
}
})(jQuery);
I've tested it only with datepicker 1.9.0+ and I'm not sure, that this is a good solution, but it works for me :)