i have to date input fields which i defined like this:
const MyDatePicker = ({ input, meta: { touched, error } }) => (
<div>
<DatePicker
{...input} dateFormat="DD-MM-YYYY"
selected={input.value ? moment(input.value, 'DD-MM-YYYY') : null}
/>
{touched && error && <span>{error}</span>}
</div>
);
I use redux form for this. I want to add a validation with the following functionality. When the date in the "Date To Field" is lesser than the date in the "Date From" field a message will be shown that the date to field must me greater that the date from field. As you can see my date format is for example: 06-03-2017. The more "challenging" part is that in another component the date From and date To must have a time space of year. If the time space is more than a year a message should be appeared the the time space must be of a year at max
The synchronous validation function in Redux Form is given all of the form values. It seems like it would be pretty easy to say:
if(values.to.before(values.from) {
errors.from = 'Must be before'
}
Alternatively, if you are doing "field-level" validation, the second parameter to the validate function is all the values of the form.
Related
Is there a way to block off a date with the Kendo DatePicker? So if they click open the calendar, and they want to select the 10th of December, I can have that date either disabled or removed ( preferrably disabled ). I don't see any documentation on how to do this.
<div id="datePicker"></div>
$('#datePicker').kendoDatePicker({
// I need it dynamically done, I don't want to hard code the date.
// So if the user clicks it, a request will be handled to send back any dates that are previously taken.
});
For the 10th Dec you can do it like this:
$("#datepicker").kendoDatePicker({
value: new Date(2019,11,5),
disableDates: [new Date(2019,11,10)]
});
disableDates can be an array or a function. You can use dates or weekday names. please check the documentation in my comment to know more. Please notice that 11 is month 12. Why does the month argument range from 0 to 11 in JavaScript's Date constructor?
If you would like to use a function here is how:
disableDates: function (date) {
var dates = $("#datepicker").data("kendoDatePicker").options.dates;
if (your condition) {
return true;
} else {
return false;
}
}
I want to create validation rule to validate incoming date.
Format I want to validate is Y-m-d H:i:s. Here's my body request which I am validating:
{ "date":"2015.10.5 10:30:10" }
And here's my validation rule:
'date' => 'required|date_format:"Y.m.d H:i:s"',
And it returns:
{"date":["The date does not match the format Y.m.d H:i:s."]}
If you want to be able to pass the day without a leading zero, then for the day part of your datetime you need to use j instead of d.
'date' => 'required|date_format:"Y.m.j H:i:s"',
That will work for the example you have above.
If you are going to always have a leading zero in your day (so, 05 instead of just 5, then the date format you already have will work.
I have a date picker where the user simply chooses a date then a Dynamic Action is suppose to send an alert if the user clicks tomorrow(sysdate+1).
The Datepicker term is the simple layout.
The Dynamic Action-->
Name: Valid Date
Event: Change
Selection type: Item(s)
Item(s): datepicker_name
Condition: equal to
Value: sysdate+1
When I run the program and click any day on the calendar, no alert comes up. I thought the problem was the format. The Dynamic Action sees the date as "DD/MM/YYYY" while the Datepickers output is "DD-Mon-YY" so it could not compare them. Apples and Oranges. But I played around with the format to make it all the same but still no progress.
Thanks again for your time and help!
As #ScottWe mentions: you're trying to apply PLSQL logic in HTML/javascript. The 'When - Condition' is evaluated at runtime and thus you can't use PLSQL there.
The date arithmetic is a bit annoying in javascript though, so if you're a unfamiliar with it, here is a way you can perform your check (which is, is the entered date tomorrow or not).
Taking my clues from these:
Date difference in Javascript (ignoring time of day)
JavaScript how to get tomorrows date in format dd-mm-yy
Add this function to the page's javascript section for global variables and functions:
function isTomorrow(pDateItem){
function getTomorrow(){
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
return tomorrow;
};
function cutTime(pDate){
return new Date(pDate.getFullYear(), pDate.getMonth(), pDate.getDate());
};
// check if pDateItem leads to a selection
// check if it is a datepicker
// check if a date has been selected
if ( $(pDateItem).length
&& $(pDateItem).data("datepicker")
&& $(pDateItem).datepicker("getDate") !== null
)
{
var tomorrow = getTomorrow();
var check = $(pDateItem).datepicker("getDate");
var one = cutTime(check);
var two = cutTime(tomorrow);
return one.getDate() === two.getDate();
};
return false;
}
Then in your Dynamic action 'When' condition, use a javascript expression with this code:
isTomorrow(this.triggeringElement)
Then the corresponding True Actions will only fire when the date is set to tomorrow.
I have a pair of Kendo Datepicker fields on a page for Start Date and End Date. The Start Date defaults to today's date and the End Date defaults to today's date a year from now. The user is allowed to pick a date from the Kendo Datepicker calender or enter a date manually.
The Datepicker calendar popup on the End Date field has a 'max' option set so it won't show dates greater than one year from now, but a user can enter a later date manually. If they do so and click Submit on my form, the server-side validation will catch the problem and display the form again with an error.
I want to leave the date the user manually entered in the Datepicker field intact so they can see the source of the problem, but keep the 'max' option in the calendar. But when I set the Datepicker options with a 'max' and a 'value' that's after the max, it shows the value in the wrong format.
Here's how to replicate:
HTML:
<!-- Note future date in 'value' attribute. -->
<input id='dateField' style="width: 100%;" type="text" value="20160618">
JS:
var dateField = $("#dateField");
// The DatePicker's value comes from the dateField's 'value' attribute.
var value = moment(dateField.val(), 'YYYYMMDD').toDate(); // moment().toDate() gives a JavaScript Date object.
// Initialize the date picker options object with some common settings.
datePickerOptions = {
format: 'MM/dd/yyyy',
value: value,
}
// Set the max to be one year from now.
datePickerOptions.max = new Date(moment(new Date()).add('years', 1).toDate());
// Initialize the DatePicker.
dateField.kendoDatePicker(datePickerOptions);
// Here's a workaround I found... After initializing the picker, manually set the value back to the correctly formatted string.
//dateField.val(moment(value).format('MM/DD/YYYY'));
jsFiddle with the above code.
Set the 'value' attribute of the input tag to be a date after the max date and the date will display like this:
Fri Jun 19 2015 00:00:00 GMT-0700 (Pacific Standard Time)
instead of how it should be:
06/15/2015
Is this a Kendo bug or is it broken by design? Or am I goofing up somewhere?
Yeah, it looks like the control is working fine. The issue is that the control fails fast on testing for max, which means it doesn't apply some other options (eg. format). I'd vote for broken by design.
try this...
datePickerOptions = {
format: 'MM/dd/yyyy',
value: moment(value).format('MM/DD/YYYY'),
max: new Date(moment(new Date()).add('years', 1).toDate())
}
I have two text boxes, one is "From Date" and "To Date". user will enter the date in the format of "mm/dd/yyyy". Here the "To Date" is always Greater than "From Date". if not, i will alert the user "Not valide, To date is always greater than From Date".
Ex: From Date: 06/05/2011
To Date: 05/08/2011
The above statement is wrong.
Please give your answer.
First, you'll probably want to use <input type="date">, which does some validation on browsers that support it, and shows as a regular input box on browsers that don't.
For actually validating that one date is before the other, you can use a JavaScript Date Object.
var fromDate = new Date(from.value);
if (isNaN(fromDate.getTime())
alert("Invalid From Date");
var toDate = new Date(end.value);
if (isNaN(toDate.getTime())
alert("Invalid To Date");
if (toDate < fromDate)
alert("Not valid, To date is always greater than From Date");
That's one way to do it. Another might be to ask if the user wishes to reverse the two.