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()
);
});
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.
As a part of , I am using component with settled value of datePattern as follows:
<rich:calendar id="effectiveDate"
value="#{itemBean.effectiveDate}"
datePattern="EEEE, MM/dd/yyyy" />
So when I load the form, the existing effectiveDate from the requested itemBean is properly displayed in the text field.
Problems:
when clicking on calendar icon, the content of the text field will be gone. So if I didn't select anything from the calendar popup, then the text field remains empty.
when the date is selected it is displayed like that (for example):
EEEE, 11/19/2012
So the week day is not displayed properly.
Noticed that without specifying the week day (EEEE part of datePattern) none of mentioned above problems occurs.
Is there some specific way to display the week day after selecting?
I am on RichFaces 4.2.2.
Thanks!
As I think this is a known issue with <rich:calendar>. I don't know much about that.
However try this,
<rich:calendar id="effectiveDate" value="#{itemBean.effectiveDate}" onchanged="formatCalendarString(event, this);" datePattern="EEEE, MM/dd/yyyy" />
Within <head></head> tags put this.
<head>
<script>
function formatCalendarString(event, cal) {
var date = new Date(Date.parse(event.rich.component.getSelectedDate()));
var weekdays=new Array(7);
weekdays[0]='Sunday';
weekdays[1]='Monday';
weekdays[2]='Tuesday';
weekdays[3]='Wednesday';
weekdays[4]='Thursday';
weekdays[5]='Friday';
weekdays[6]='Saturday';
var day = weekdays[date.getDay()];
if(typeof(day) !== 'undefined') {
var formattedDate = (day + ', ') + event.rich.component.getSelectedDateString().substring(6);
cal.value = formattedDate;
}
}
</script>
</head>
I want to programmatically set date for the input with datebox control, For this i know i can use something like this
$(element).trigger('datebox', {'method':'set', 'value':'dateString'});
but this doesn't seem to update the control(i.e when i open the calendar, it is set to current date and not equal to the value in the input field)
EDIT:
based on JTsage's pointers i overwrote the default dateformat to mm/dd/yyyy, using sth like this.
jQuery.extend(jQuery.mobile.datebox.prototype.options.lang, {
'en': {
dateFormat: '%m/%d/%Y'
}
});
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
useLang: 'en'
});
Then i tried setting the date using sth like this
$(element).trigger('datebox', {'method':'set', value:'07/02/2012'});
but this date is not appearing when i navigate to the page..Interestingly when i tried updating the date from firebug console(being on that page) it updated the field as well as datebox control.
I have no idea why this is happening..Need help, please respond JT
So finally i fixed the issue, by doing this
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'overrideDateFormat': '%m-%d-%Y',
'overrideHeaderFormat': '%m-%d-%Y'
});
setting the value of the input field explicitly
$(element).val('06-21-2012');
and then refreshing the datebox
$(element).trigger('datebox', {'method':'set', 'value':'06-21-2012'});
I found th solution, try this
$(element).trigger('datebox', { 'method': 'doset' });
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.
I need to add custom validation(I think) for validating input from an user. Here's my use case:
I'm using the jquery ui datepicker for selecting dates, with localization like this:
$.datepicker.setDefaults( $.datepicker.regional[ currentLocale ] );
I use the bassistance validation plugin, and using rules for date:true and such does not work with different formats(or if they do please tell me how!). So I've made my own date validation methods like this
$.validator.addMethod("validDate", function(value) {
return parseDateString(value) != null;
}, jQuery.validator.messages.date);
This all works very well except for the fact when selecting a date in the datepicker the validation is fired before the value of the componet is changed! So I actually validate the previous value....
Does anyone have a solution for me?
Thanks in advance:)
You could trigger validation upon the user closing the datepicker popup:
$("#birthdate").datepicker({
onClose: function() {
/* Validate a specific element: */
$("form").validate().element("#birthdate");
}
});
Using validate's element() function will enable you to validate a particular field immediately.
I've created an example here in which any date who's year != 2011 will trigger failed validation.