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())
}
Related
I am trying to set a interactive grid column value (which is a date) based on a page item (which is also a date). I have already tried defaulting and using dynamic action set value (jquery seletor) to set item value to the interactive grid column but it does not work how I want it to work.
I have a page item called "P_DEF_DATE" and I want to set a date column in the interactive grid to this value but I want when I change the value in the page item and I click add row on the interactive grid, it must always use whatever value I have in the page item. For example:
P_DEF_DATE = 12-JAN-2021
when I click on add row in the interactive grid, my date column must equal to P_DEF_DATE and i add a few rows based on that date but then i change the date of P_DEF_DATE to:
P_DEF_DATE = 28-JAN-2021
now I want when I click on add row in the interactive grid, I it must show this new date from the page item in the date column in the interactive grid, keeping in mind the page does not refresh and I have rows with the date 12-JAN-2021.
Thank you in advance!
I implemented same few days ago. Following is what I did.
Create Dynamic Action on Row Initialization Event, set Region to your IG
Set True Action to Execute JavaScript Code
Use code
var model = this.data.model,
rec = this.data.record,
meta = model.getRecordMetadata(this.data.recordId);
if ( meta.inserted ) {
model.setValue(rec,"COLUMN_NAME", $v("P_DEF_DATE"));
}
Replace JOB with your column name and P_DEF_DATE with you Item name
More details Here
Also, out of curiosity, why there is no number like P1, P2 in your item name ??
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 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.
I am using Input mask from this link. My input mask working correctly. But i want validation for past dates only from current date. But i don't get any condition for this.
You can use below yearrange hash for setting up the past date validation.
$("#date_of_birth").inputmask("mm/dd/yyyy", { yearrange: { minyear: 1900, maxyear: 2015, }});
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.