I am trying to validate date in vuelidate. I want to select today's date or a date in the past. But it's not working. Here is my minimal code:
import { required, maxValue } from 'vuelidate/lib/validators'
validations: {
operationalsince: { required, maxValue: maxValue(new Date()) }
},
computed: {
operationalsinceErrors () {
!this.$v.operationalsince.maxValue && errors.push('Date is invalid')
}
I also tried v-date-picker attributes:
:max-date="new Date()" :disabled-dates="{ start: new Date(), end: null }"
But I am not achieving what I want to achieve. Thanks for any suggestions.
As far as I can tell the v-date-picker does not support validation error messages, however you can limit the selection with the max, min, or the allowed-dates properties.
The max and min are taking the date in the ISO format (e.g. max="2018-03-20"), so you need to use:
<v-date-picker
label="operationalsince"
v-model="operationalsince"
:max="new Date().toISOString()"
#input="$v.operationalsince.$touch()"
#blur="$v.operationalsince.$touch()"
required
></v-date-picker>
Working CodePen
Related
(Hello all. This is my first post using the guided posting mode, so please bear with me)
I have been using Fullcalendar for a little while now to display events from JSON feeds for multiple calendars (One calendar per JSON feed). These JSON feeds are conversions of .ics feeds by ical.js to work fullcalendar. However, I now have need to break these calendars down into lists and filter them based on certain text in the event names in a manner similar to this:
Full event list.
January 1
lunch
gathering
outing
dinner
January 2
lunch
gathering
outing
dinner
January 3
lunch
closing
filtered event list for webpage (filtered for lunch).
January 1
lunch
January 2
lunch
January 3
lunch
Can I filter based on event title with Fullcalendar when the calendar is based on a feed and not a manual list of events?
I am running fullcalendar 3.9.0 (I may move to 3.10). It is the most current version I can run due to other software needing to be configured to work with version 4.
I am also employing the mozilla ical.js script to convert ical feeds into JSON feeds.
My expectation is that I may actually have two areas in which I could possibly filter:
within ical.js or ical_events.js
within my configuration for fullcalendar (maybe in the defaultView section)
Here is a portion of code I use to call up a calendar:
ics_sources = [
{
url:'https://www.example.com/calendaring/15/',
event_properties: {
color:'#7a9b49'
}
},
]
function data_req (url, callback) {
req = new XMLHttpRequest()
req.addEventListener('load', callback)
req.open('GET', url)
req.send()
}
function add_recur_events() {
if (sources_to_load_cnt < 1) {
$('#calendar').fullCalendar('addEventSource', expand_recur_events)
} else {
setTimeout(add_recur_events, 30)
}
}
function load_ics(ics){
data_req(ics.url, function(){
$('#calendar').fullCalendar('addEventSource', fc_events(this.response, ics.event_properties))
sources_to_load_cnt -= 1
})
}
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: '',
center: '',
right: ''
},
viewDisplay: function(view) {
parent.setIframeHeight(iframeId) ;
},
eventClick: function(event) {
window.open(event.url,);
return false;
},
defaultView: $(window).width() < 765 ? 'listYear':'listYear',
nowIndicator: false,
eventLimit: 4,
fixedWeekCount: false,
listDayFormat: 'MMMM Do',
listDayAltFormat: false,
noEventsMessage: "No Currently Scheduled Events"
})
sources_to_load_cnt = ics_sources.length
for (ics of ics_sources) {
load_ics(ics)
}
add_recur_events()
})
Expected (desired) results would be a list pre-filtered in the calendar call based on the desired event title for the end user.
Actual results: I currently do not have any pre-filtering going on.
I have a SuiteScript 2.0 that load and search transaction saved search with posting period filter. In my filter I am using 'anyof' operator which is not working for 'postingperiod' field
below is sample of my code:
function getTransactionData(datain)
{
try
{
var objSearch = search.load(
{
id: datain.savedsearchid
});
objSearch.filters.push(search.createFilter({ name: "postingperiod", operator: "ANYOF", values: ["42", "43"]}));
//above filter filters only record with internalid 42
result = readAllData(objSearch);
return result;
}
catch (ex)
{
log.error("getTransactionData", ex);
throw ex;
}
}
let me know if I am missing something here.
Please note above issue is occurring only for saved search, if I search other object for example 'account' object with internalid filter using 'anyof' operator, works fine.
Update: Today after more testing, found that its only happening for 'postingperiod' filter.
Try this code in Netsuite Debugger, Create a SavedSearch in Netsuite, don't add any filter in that , save that and get the id of saved search and use in below script against id value.
Also replace the Period Id with yours.
require(['N/runtime','N/search'],
function (runtime,search) {
var invoiceSearchObj = search.load({
type: "invoice",
id: '<your search id>',
columns:
[
search.createColumn({
name: "trandate",
sort: search.Sort.ASC,
label: "Date"
})
]
});
invoiceSearchObj.filters.push(search.createFilter({ name: "postingperiod", operator: "ANYOF", values: ["<your period value>"]}));
invoiceSearchObj.filters.push(search.createFilter({ name: "mainline", operator: "is", values : "T"}));
var searchResultCount = invoiceSearchObj.runPaged().count;
log.debug("invoiceSearchObj result count",searchResultCount);
invoiceSearchObj.run().each(function(result){
// .run().each has a limit of 4,000 results
return true;
});
});
var a=0;
I want to sort by a datetime value, and group by a date string.
I have found the sortProperty on the grouper:
You can set this configuration if you want the groups to be sorted on something other then the group string returned by the groupFn. This serves the same role as property on a normal Ext.util.Sorter.
So I tried the following, which only sorts the date correctly:
grouper:{
sortProperty: 'StartDate',
property: 'StartDateOnly',
direction: 'ASC'
},
and I tried the following, which only sorts the time correctly:
grouper:{
sortProperty: 'StartDate',
property: 'StartDateOnly',
direction: 'ASC'
},
sorters: [{
property: 'StartDate',
direction: 'ASC'
}]
You can try it here:
https://fiddle.sencha.com/#view/editor&fiddle/2cei
What am I doing wrong here?
The problem is that you make a sort on a string type but you have date by changing the code on your sencha fiddle like this :
Ext.application({
name : 'Fiddle',
launch : function() {
var mdl = Ext.define('', {
extend: 'Ext.data.Model',
fields: [{
/** #field {date} StartDate with format: Y-m-d H:i */
name: 'StartDate',
type: 'date',
dateFormat: 'Y-m-d H:i'
},{
name: 'StartDateOnly',
type: 'date', // <= here before it was 'string'
convert: function(v,rec) {
return Ext.Date.format(rec.get('StartDate'), 'D d.m.Y');
}
}]
});
...
Then you run, you can see that the group of date StartDateOnly is now order by ASC.
After that, you can retrieve this data in date format and convert it into a string. But if you make a sort on a string you will always have the first of February last like now.
The problem is that it does an alphabetical sort on the days of the week.
In order: Fri, Sat, Thu.
Sencha support did not provide a full solution, but helped me a bit on my way. They found how to "fix" the problem at hand and told me to change the data type of the StartDateOnly column to date, but neither did this fix prove universal nor did it make any sense that this fixed the problem at all. But it showed some underlying correlations, which helped me to dig into the problem and find a universal solution.
I would say the issue is a bug in ExtJS, but I am awaiting confirmation from Sencha on this. I have to yet find the exact line where the bug is introduced.
Problem description:
When sortProperty is set on the grouper and at least one sorter is added on the store, the "transform" function of the grouper is set to the "transform" function of the first sorter (otherwise, it is null).
Solution:
You can manually override the transform function on the grouper by adding the correct sort type explicitly to the grouper config:
grouper:{
sortProperty: 'StartDate',
property: 'StartDateOnly',
transform: Ext.data.SortTypes.asDate,
direction: 'ASC'
},
I am working with kendo ui controls.my functionality is to filter the grid based on date-time and drop down selection. This is working on chrome but not in FF and IE.
var gridResult = $('#Grid').data("kendoGrid");
var condition = {
logic: "and",
filters: [
{ field: "Category", operator: "equals", value: $("#nw").val() },
{ field: "Device", operator: "equals", value: $("#pro").val() },
{ field: "Orig", operator: "equals", value: $("#work").val() },
{ field: "Term", operator: "equals", value: $("#network").val() }
]
};
if (mindate !== null) {
condition.filters.push({ field: "Time", operator: "ge", value: new Date(mindate) });
}
if (maxdate !== null) {
maxdate = new Date(maxdate);
maxdate.setHours(23, 59, 59, 999);
condition.filters.push({ field: "Time", operator: "lt", value: maxdate });
}
gridResult.dataSource.filter(condition);
return false;
});
$('#fromdatetimepicker').attr('readonly', false);
$('#todatetimepicker').attr('readonly', false);
}
When i debug in firefox i didn't find aby bug can any one look at the code and please tell me where i am wrong?
I've been testing your code and I can't find any problems with it, besides that you have an extra ) at the end but that's probably because the function is cut from a larger section of code.
There are however several things that might be causing this problem and there's a lot of code missing so I can't say for sure. Some browsers try to help you out by ignoring errors you make. This can make it work in Chrome but not in FF and IE. The best way to deal with this is to go through the code and add validations that confirm the values every time the Filter method is call. Here are my suggestions for you:
When debugging in Internet Explorer, use IE 11 and use the F12 debugging tool.
You check that mindate and maxdate are not null, but if they're undefined or contain an empty value, they'll pass that test and will be added to the filters even though they're not set.
You don't have any check that mindate and maxdate are valid dates and that you successfully are able to create the JavaScript date variable, before adding it to the filter. This could be a source of error, depending on the other code in your script.
You use the values from $("#network").val() etc directly in your filter without validating them, and that could cause problems in the future. But this is not causing this error.
Edit: Encoding
You need to make sure the encoding of your webpage is correct. Please make sure these two lines exist in the head section of the html code. If you use ASP.NET MVC you can add these two files to the Views\Shared\_Layout.cshtml file. If you use ASP.NET Forms you can add them in your Masterfile. If you use PHP you just put them in the head section.
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
I have a column named event_date. I want to warn the user if he trys to submit the info without filling up the event_date column and prevent further execution. Here is how I define my column:
header: 'Event_date',
width: 115,
dataIndex: 'event_time',
renderer: this._renderExactDate,
field: {
type: 'textfield'
}
and my render function is:
_renderExactDate: function(date) {
if (date == '0000-00-00 00:00:00' || date == undefined) {
Ext.MessageBox.show({
title: 'New event',
msg: 'You must set a date',
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
else
{
return date;
}
}
but obv. renderer is not the way to do this, yet I haven't found a way to do this.
thanks
Leron
If this is using ExtJS4 then you should make use of the model field validations field to set the accepted format. Write a custom one if any of the standards don't fit the bill. Then you can check if the model is valid before any attempts to sync and flag a warning accordingly.
The event you want to hook into is this one. Then you can get the record/model and check its 'isValid' method before generating your warning.
Link: Ext.grid.plugin.CellEditing validateedit event