I'm using CoreUI admin template with vue js.
I want to custom date range inside datable componen.
Can anyone help me to configure out with this problem?
Anyways, I have found plugin for date range in dataTable
$.fn.dataTable.ext.search.push(function(oSettings, aData, iDataIndex) {
if (typeof aData._date == "undefined") {
aData._date = new Date(aData[0]).getTime();
}
if (minDateFilter && !isNaN(minDateFilter)) {
if (aData._date < minDateFilter) {
return false;
}
}
if (maxDateFilter && !isNaN(maxDateFilter)) {
if (aData._date > maxDateFilter) {
return false;
}
}
return true;
});
There is an example of CDataTable with a date range in the docs:
https://coreui.io/vue/docs/components/table.html#custom-data-structures-and-filtering-sorting
Related
I need to add a validation on the country field in all place where it can be used.
For registration or address editing it work fine but in checkout I tried several method but nothing worked. I want the validation on the field of the new shipping address form.
I add my validation in an js file countryValidation.js :
Same script for registration or edit address and it work fine
define([
'jquery',
'jquery/ui',
'mage/validation',
'mage/translate',
'domReady!'
], function($){
'use strict';
return function(validator) {
$.validator.addMethod(
"validate-country",
function(value, element) {
if (value === "FR") {
var zipValue = $('input[name="postcode"]').val();
if (zipValue) {
return !(zipValue.startsWith("97") || zipValue.startsWith("98"));
}
}
return true;
},
$.mage.__("You cannot choose France for DOM-TOM Zip Code")
);
return validator;
}
});
I registered it in requirejs-config.js in my module :
var config = {
config: {
mixins: {
'Magento_Ui/js/lib/validation/validator': {
'Gone_Customer/js/countryValidation': true
}
}
}
};
For adding validation to checkout method I tried different method
-> Method A : With a plugin
class AddCountryValidation
{
public function afterProcess(
\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
array $jsLayout
) {
// Country ID
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['country_id']['validation']['validate-country'] = true;
return $jsLayout;
}
}
-> Method B : add validation rule in attribute
In customer_eav_attribute in attribute country_id for validate_rules I added {"validate-country": true}
When I validate the form I have no validation error when I should have one.
Can you tell me if I'm missing something please?
Thank you for your response in the meantime I found something that worked.
I had to do a seperate js validation only for checkout :
define(['mage/translate', "jquery"], function($t, $) {
'use strict';
return function(rules) {
rules['validate-country'] = {
handler: function (value) {
if (value === "FR") {
var zipValue = $('input[name="postcode"]').val();
if (zipValue) {
return !(zipValue.startsWith("97") || zipValue.startsWith("98"));
}
}
return true;
},
message: $t('You cannot choose France for DOM-TOM Zip Code')
};
return rules;
};
});
And in my mixin I change Magento_Ui/js/lib/validation/validator for Magento_Ui/js/lib/validation/rules then my plugin method was working !
Please try this
define([
'jquery',
'jquery/validate'
], function($){
'use strict';
return function(validator) {
validator.addRule(
"validate-country",
function(value) {
if (value === "FR") {
var zipValue = $('input[name="postcode"]').val();
if (zipValue) {
return !(zipValue.startsWith("97") || zipValue.startsWith("98"));
}
}
return false;
},
$.mage.__("You cannot choose France for DOM-TOM Zip Code")
);
return validator;
}
});
I have used return false you can modify according to your need.Tested on version 2.2.2
How to change the size of fields in Infor EAM?
Anyone with experience with Infor EAM would be gladly appreciated.
You could do it using Extensible Framework. For example, following code will change width of work order and equipment description fields if you put it in EF of WSJOBS screen.
Ext.define(
'EAM.custom.external_WSJOBS', {
extend: 'EAM.custom.AbstractExtensibleFramework',
getSelectors: function () {
if( EAM.app.designerMode == false) {
return {
'[extensibleFramework] [tabName=HDR][isTabView=true]': {
afterlayout: function() {
try {
document.getElementsByName( 'description')[0].style.width = '700px';
document.getElementsByName( 'equipmentdesc')[0].style.width = '700px';
return true;
} catch( err) {
return true;
}
}
}
}
}
}
}
);
I have a custom element (a partial URL) called #customElement('partialurl')
partialurl.js
get isValid(){
if (this.element === undefined || this.element === null){
return false;
}
else{
const partialUrl = new RegExp('^\/[a-z0-9]+([-\/](?:[a-z0-9]+))*(\.(?:jpeg|jpg|gif|png|htm|html|asp|xml|txt|pdf))?$');
if (partialUrl.test(this.element)) {
return true;
} else {
return false;
}
}
}
My question is how do I reference the 'isValid'?
For example - this file references the custom element
html
<partialurl disabled.bind="readonly" value.bind="baseContent.LinkDestination" />
js
bind(){
return this.dataContext.getContent(this.id)
.then(baseContent => {
this.baseContent = baseContent;
this.validator = this.validation.on(this)
.ensure('baseContent.LinkDestination').isValidFromCustomElement();
}); }
I know the above doesn't work, I am new to Aurelia and still finding my feet with it.
Consider the following code i want to set the grid datePicker column empty if date validation fails WorkOrderDate< task date , any help would be higly appreciable.
***********Grid***************
columns.Bound(c => c.WorkOrderDetailsDate)
.Title("Estimated Start Date")
.EditorTemplateName("WorkOrderDetailsDate")
***********Editor**************
#model DateTime?
#(Html.Kendo().DatePicker()
.Name("WorkOrderDetailsDate")
.Value(Model == null ? DateTime.Now.Date : ((DateTime)#Model).Date)
.Events(d=>d.Change("TaskDateValidate"))
)
*************JavaScript***********
function TaskDateValidate(e)
{
if ($("#workOrder_EstStartDate").val() != null && $("#workOrder_EstStartDate").val() != "") {
var workDate = kendo.parseDate($("#workOrder_EstStartDate").val());
var taskDate = kendo.parseDate(kendo.toString(this.value(), 'd'));
if (taskDate < workDate)
{
showMessage("Task date should be after work order Date");
this.value(""); <-----this is not working want to set to empty to force user to select date again
this.value("28/02/2014");<---this is not working as well...
}
}
}
please advise on this problem
reagrds
Shaz
found the solution my self...
//Add validation on Grid
(function ($, kendo) {
$.extend(true, kendo.ui.validator, {
rules: {
greaterdate: function (input) {
if (input.is("[data-val-greaterdate]") && input.val() != "") {
var date = kendo.parseDate(input.val()),
earlierDate = kendo.parseDate($("[name='" + input.attr("data-val-greaterdate-earlierdate") + "']").val());
return !date || !earlierDate || earlierDate.getTime() < date.getTime();
}
return true;
},//end of greaterdate
shorterdate: function (input) {
if (input.is("[data-val-shorterdate]") && input.val() != "") {
var date = kendo.parseDate(input.val()),
laterDate = kendo.parseDate($("[name='" + input.attr("data-val-shorterdate-laterdate") + "']").val());
return !date || !laterDate || laterDate.getTime() > date.getTime();
}
return true;
},//end of shorter date
// custom rules
taskdate: function (input, params) {
if (input.is("[name=WorkOrderDetailsDate]")) {
//If the input is StartDate or EndDate
var container = $(input).closest("tr");
var tempTask = container.find("input[name=WorkOrderDetailsDate]").data("kendoDatePicker").value();
var tempWork = $("#workOrder_EstStartDate").val();
var workDate = kendo.parseDate(tempWork);
var taskDate = kendo.parseDate(tempTask);
if (taskDate < workDate) {
return false;
}
}
//check for the rule attribute
return true;
}
}, //end of rule
messages: {
greaterdate: function (input) {
return input.attr("data-val-greaterdate");
},
shorterdate: function (input) {
return input.attr("data-val-shorterdate");
},
taskdate: function (input) {
return "Task date must be after work date!";
},
}
});
})(jQuery, kendo);
I have a view that is loaded with a blank viewmodel initially. I want to populate that already rendered view with a json object (obtained view ajax post) that was based off the viewmodel for that view.
Is there a way of automatically doing this?
Is there a way of doing it in reverse? (fields to matching viewmodel json object)
The only way I am aware of taking data return from an ajax call and putting it in a field is manually
$('#TextField1').val(result.TextField1);
etc..
to send it back to the controller you can do
data: $('form').serialize(),
this will take all of the fields in that form and send them back to the controller
Ok it looks like this will suit my needs.
I need to follow a convention of naming containers the same name as their respective properties as well as putting a class on them to indicate that they contain subfields.
function MapJsonObjectToForm(obj, $container) {
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var $field = $container.find('#' + key);
if ($field.is('div')) {
MapJsonObjectToForm(obj[key], $field);
} else {
if (obj[key] == null) {
if ($field.hasClass('select2-offscreen')) {
$field.select2('val', '');
$field.select2().trigger('change');
} else {
$field.val("");
}
} else {
if ($field.hasClass('select2-offscreen')) {
$field.select2('val', obj[key]);
$field.select2().trigger('change');
} else {
$field.val(obj[key]);
}
}
}
}
}
}
function MapFormToJsonObject(containerid) {
var obj = {};
$('.dataitem').each(function () {
var exclude = "s2id";
if ($(this).attr("ID").substring(0, exclude.length) !== exclude) {
var parents = $(this).parents(".has-sub-fields");
if (parents.length > 0) {
obj = FindParents(obj, parents.get(), $(this).attr("ID"), $(this).val());
} else {
obj[$(this).attr("ID")] = $(this).val();
}
}
});
return obj;
}
function FindParents(obj, arr, id, value) {
if (arr.length == 0) {
obj[id] = value;
return obj;
}
var parentID = $(arr[arr.length - 1]).attr("ID");
arr.pop();
if (obj[parentID] == null) {
obj[parentID] = {};
}
obj[parentID] = FindParents(obj[parentID], arr, id, value);
return obj;
}