Does anyone know how I can detect the main displayed month changing in react-datepicker? I know there's an "onMonthChange" event but it only fires when you use the "advance month" or "previous month" button or change the month from a dropdown - NOT when you trigger a change of the month by pressing the arrow keys, for example. I need to make sure I get notified of any change of the month.
To test this out you can go to reactdatepicker.com and modify the Default as follows:
() => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker inline selected={startDate} onChange={(date) => setStartDate(date)} onMonthChange={() => {console.log('MONTH CHANGE')}} />
);
};
Then try using the right-arrow key to move to the next month; you will see that the onMonthChange event doesn't fire.
Related
Please help me!!!
I can see there are some calendars available in WIX Editor you can use on your site.
Now, how to make this: you click on calendars where you can select date of arrival and departure (f.example 2021-07-16 and 2021-07-17) and click a button (confirm) which picks up those dates and forward you to the new site where those dates will be pasted into address http://....com#/&from=2021-07-16&to=2021-07-17
Thank you!!!
UI
Add a form component
Add 2 date fields
Add a submit button
(I don't know of a way of setting range of dates in a single datepicker)
Code
$w.onReady(function () {
//
$w('#datePicker1').onChange(e => {
const fromDate = new Date(e.target.value);
fromDate.setDate(fromDate.getDate() + 1);
$w('#datePicker2').value = fromDate;
// this way the user couldn't select an "to" date lower than the "from" date
$w('#datePicker2').minDate = fromDate;
});
$w('#wixForms1').onWixFormSubmit(e => {
const fromDate = e.fields[0].fieldValue.toLocaleDateString('fr-CA');
const toDate = e.fields[1].fieldValue.toLocaleDateString('fr-CA');
wixLocation.to(`https://example.com/?start=${fromDate}&end=${toDate}`);
});
});
https://moshef9.wixsite.com/dates-range
OK! Thanks Mosh! I'm a huge step forward!
I make a simple form with 2 dates an "submit" button.
I pasted your code on my Wix site.
If I click "submit" button then ...nothing happens;(
Why???
I'd like to just say that imported wixLocation from 'wix-location' and everything
seems to be correct.
My problem is that Jquery UI allows selecting a year or month from dropdown menu only.
How can I modify the default date picker to allow selecting year and month as additional calendar tables for default date picker?
Default view:
How I want to select months -> clicking on a month to show extra calendar:
Desired month functionality:
clickable month label
no dropdowns
when clicking on month label - it should open now calendar where days are replaced with month selection
(screen 2 shows what happens when you click on target area on screen 1)
How I want to select years -> clicking on year to show extra calendar:
Desired year functionality:
clickable year label
no dropdowns
when clicking on year label - it should open now calendar where days are replaced with year selection
(screen 2 shows what happens when you click on target area on screen 1)
As I understand, I need to create a new calendars onclick of "month" or "year" label but I don't have any idea how to make that + how to show months or years in calendar instead of a dropdown.
Due to the dynamic nature of Datepicker, it rebuilds each calendar, there is not a good way to do this "out of the box".
How can I modify the default date picker to allow selecting year and month as additional calendar tables for default date picker?
Here is a basic example of how you could start to set this up. The issue comes in when you then make a selection. The datepicker redraws all the various elements and will remove all the customization.
Example: https://jsfiddle.net/Twisty/v6c9r8pa/56/
JavaScript
$(function() {
var dp = $("#datepicker-1").datepicker({
changeMonth: true,
changeYear: true
});
$("#datepicker-2").datepicker();
$(".ui-datepicker-month", dp).hide();
$("<span>", {
class: "ui-datepicker-month-btn btn"
}).html($(".ui-datepicker-month option:selected", dp).text()).insertAfter($(".ui-datepicker-month", dp));
$(".ui-datepicker-year", dp).hide();
$("<span>", {
class: "ui-datepicker-year-btn btn"
}).html($(".ui-datepicker-year option:selected", dp).text()).insertAfter($(".ui-datepicker-year", dp));
function selectMonth(ev) {
var mObj = $(ev.target);
$(".ui-datepicker-month", dp).val(mObj.data("value")).trigger("change");
$(".ui-datepicker-month-btn", dp).html(mObj.text().trim());
mObj.closest(".ui-datepicker").find(".ui-datepicker-calendar").show();
mObj.closest(".ui-datepicker-month-calendar").remove();
}
function showMonths(trg) {
$(".ui-datepicker-calendar", trg).hide();
var mCal = $("<table>", {
class: "ui-datepicker-month-calendar"
}).insertAfter($(".ui-datepicker-calendar", trg));
var row, cell;
$(".ui-datepicker-month option").each(function(i, o) {
if (i % 4 == 0) {
row = $("<tr>").appendTo(mCal);
}
cell = $("<td>").appendTo(row);
$("<span>", {
class: "ui-widget-header circle btn"
})
.data("value", $(o).val())
.html($(o).text().trim())
.click(selectMonth)
.appendTo(cell);
if ($(o).is(":selected")) {
$("span", cell).addClass("selected");
}
});
}
$(".ui-datepicker-month-btn").click(function() {
console.log("Show Months");
showMonths(dp);
})
});
If you want to get in "under the hood", then take some time to review the following, Widget Factory.
The jQuery UI Widget Factory is an extensible base on which all of jQuery UI's widgets are built. Using the widget factory to build a plugin provides conveniences for state management, as well as conventions for common tasks like exposing plugin methods and changing options after instantiation.
So you could rebuild some of the elements in your own making from inside, so that when you do make a selection, it redraws all the elements as you desire.
I am using datebox plugin for jquery mobile http://dev.jtsage.com/jQM-DateBox2/unit/datebox.html
Everything works fine.
Here my question is how do i validating the individual year, month, date input fields by entering the numeric values in the specific fields ((ie) keydown/keypress..) without using of plus and minus buttons.
Thanks in advance...
This function checks if the input changed and logs the new date into the console.log:
$("div.ui-grid-b div input.ui-input-text").change(function() {
var parent = $(this).parent().parent();
console.log("date changed to: "
+parent.find("div.ui-block-a input.ui-input-text").val()+":"
+parent.find("div.ui-block-b input.ui-input-text").val()+":"
+parent.find("div.ui-block-c input.ui-input-text").val()
);
});
I am using the jquery mobile datebox at http://dev.jtsage.com/jQM-DateBox2/demos/fullopt.html
In particular I am using the calbox option at http://dev.jtsage.com/cdn/datebox/1.1.0/jqm-datebox-1.1.0.mode.calbox.js
I need to intercept the click event that is triggered when you click on a day and then do something custom (E.g. change the background color of that date). What is the best way of doing this? I tried to register a click event for the element $('div.ui-datebox-griddate.ui-corner-all.ui-btn-up-d') but that does not seem to be working.
I am using backbonejs and the relevant portion of the class in coffeescript looks something like (SimpleView extends Backbone.View):
class A extend SimpleView
....
events: {
'click div.ui-datebox-griddate.ui-corner-all.ui-btn-up-d': "clicked"
}
clicked: (event) ->
console.log 'clicked'
The above does not work and moreover this perhaps is not the best way to do what I want since it depends on internal class names to create the click event.
Thanks in advance!
Datebox triggers a custom event called "datebox" (creatively enough). The event is fired three times when a day is clicked, but more importantly, it passes a second argument to the event that has the details about the day being clicked.
Give this a shot:
....
events: {
'datebox' : 'clicked'
},
clicked: function(e, eventDetail) {
// Of the three event triggers, "method" varies, so I checked for "set"
if (eventDetail.method == "set") {
var jsDateObj = eventDetail.date;
console.log(jsDateObj);
}
}
....
I think I figured out one way to do it. Instead of creating a click on the "day" element - create one on the input date field to which the calendar is attached. From there you can get the content and use that as a filter to get to the correct calendar day element at which point you can do whatever you want using css styling. The relevant code piece is given below...
class A extend SimpleView
....
events: {
'change #mydate': "clicked"
}
clicked: (event) ->
t = $(event.target)
day = t.data('datebox').theDate.getDate()
dayFilter= "div.ui-datebox-griddate.ui-corner-all:contains('#{day}')"
$(dayFilter).filter( ->
thisDay = parseInt($(#).text())
if thisDay == day
# do your css magic here
)
Our project using JSF1.2, Icefaces 1.8.2, jQuery UI component datepicker (veresion 1.8.14). Problem with IE7 (Firefox is fine). Problem will happen with following sequence: Select a date (for example, couple days befor doday). Note we have set year range from 1991 to 2012. Our business logic is print a document use that date (in code, called dateOfStudy) as title, once done, in the JSF back bean, I clear the calendar inputext date field to null. Now click datepicker icon again, the year corrtly shows 2011, select any previous month (for example go back to Auguest, 2011), problme happend right here: the year will change to 1991, can not keep at 2011.
The problem will not happen if I do not touch that date field (don't do clear, keep the old date). The problem will still appear even I just change the date font to other color via CSS (seems whenever I touch that field, datepicker will messed up). The problem will not happen if you click today once, or close datepicker, open again.
Seems the datepick need some initializtion after I cleared date?
I attached some code. I have trid method/option like setDate, onChangeMonthYear, beforShowDay, can not solve. Any help is appreciated !!
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function() {
jq("[id$=fmv]").live('click', function() {
jq(this).datepicker( {
showOn : 'focus',
changeMonth : true,
changeYear : true,
dateFormat : 'mm/dd/yy',
yearRange : '-20:+1',
showButtonPanel : true,
closeText : 'Close'
}).focus();
});
});
</script>
<ice:inputText id="fmv"
style="background-image:url ('../../../jquery/images/calendar1.png');
background-repeat:no-repeat;background-position:right;"
value="#{pItem.dateOfStudy}"
validator="#{pItem.validate}"
partialSubmit="true"
name="fmv"
valueChangeListener="#{pItem.dateChangeListener}">
</ice:inputText>
When backbean clear or change input text in calendar inputText, I think that causes a focus event, and calendar confused under IE7. The reason I am using showOn focus is the code is in a table AJAX display area, so use calendar show on image button not work since the button image will not show when AJAX update comes back (the jQuery calendar will not get called), which force me to use showOn focus. I finally solved this year change problem by adding the following refresh calendar line after the final .focus():
jq(this).datepicker("setDate",jq("[id$=fmv]").datepicker("getDate"));
things working fine now. I am not sure how to make this call only when backbean clean the calendar date, but performance seems ok.