Uncaught Error: Error serializing unrecognized object about a date in react - date

i use a react-datepicker which i adjust to be compatible with redux form. My Datepicker component is like this:
const MyDatePicker = ({ input, meta: { touched, error } }) => (
<div>
<DatePicker
{...input} dateFormat="YYYY-MM-DD"
selected={input.value ? moment(input.value, 'YYYY-MM-DD') : null}
/>
{
touched && error &&
<span className="error">
{error}
</span>
}
</div>
);
By the way it does not show the validation messages when i trigger a validation.
When i enter a date in a date input like the screenshot above:
an error is shown multiple times (5789 to be more accurate). That has the impact of making my app slow when i use dates. I google it but i didn't find a proper solution. Do you have any idea how to handle this? The error is:
Uncaught Error: Error serializing unrecognized object Sun Mar 26 2017 00:00:00 GMT+0200
at b.rep (index.js:143)
at Object.com.cognitect.transit.impl.writer.marshal (transit.js:2912)
at Object.com.cognitect.transit.impl.writer.emitObjects (transit.js:2755)
at Object.com.cognitect.transit.impl.writer.emitArray (transit.js:2765)
at Object.com.cognitect.transit.impl.writer.marshal (transit.js:2930)
at Object.com.cognitect.transit.impl.writer.emitTaggedMap (transit.js:2892)
at Object.com.cognitect.transit.impl.writer.emitEncoded (transit.js:2909)
at Object.com.cognitect.transit.impl.writer.marshal (transit.js:2934)
at Object.com.cognitect.transit.impl.writer.emitObjects (transit.js:2755)
at Object.com.cognitect.transit.impl.writer.emitArray
Last but not least i use REDUX-FORM/IMMUTABLE

I am too getting same issue. My code look like.
<Container>
{label && <Label icon={icon}>{label}</Label>}
<DatePickerPure
onBlur={() => input.onBlur()}
// onChange={(val) => input.onChange(val ? val.toDate(val) : null)}
onChange={(val) => input.onChange(val ? moment(val) : null)}
selected={dateValue}
id={`field_${input.name}`}
placeholder={placeholder}
/>
<FieldError touched={touched} error={error} warning={warning} />
</Container>
In beginning date Filed was not picking correct date for the very 1st time. It was always picking 1 previous day. As soon as I use momnet(val), date field picking correct date but i m getting this error in my console.
If any body can help

Related

bg-url in tailwindcss is not working for me

i get some problem that when i use add to extend / use as arbitary values ->> bg-url is not working
\Arbirtary Values
bg-[url('../../images/product/model-s.jpg')]
-- Module not found: Error: Can't resolve '../../images/product/model-s.jpg' in '....\MAIN PROJECT\0.PORTOFOLIO\tesla-clone\client\src' --
\Extend
backgroundImage: {"model-s": "url('./src/images/product/model-s.jpg')", },
-- Module not found: Error: Can't resolve './src/images/product/model-s.jpg' in ''....\MAIN PROJECT\0.PORTOFOLIO\tesla-clone\client\src' --
### BUT.......
when i import it i can use it as <img />
import models from "../../images/product/model-s.jpg";
<img src={models} alt="model S" className="w-full h-full object-cover bg-center bg-no-repeat" />
Can you help me ? please....
Here you have making the mistake while using the image in component. Since you already defined the image in tailwind.config.js like
.
.
extend: {
backgroundImage: {
'model_s': "url('./src/images/product/model-s.jpg')"
}
}
.
.
You can simply use it like
<div className="bg-model_s" ></div>
Note : I had change the name from model-s to model_s

vue-the-mask + element ui input slot 2 value error

anyone have the solution for below case ?
<el-input v-model="contactNo" v-mask="'## ### #####'" masked="true" /> // this is valid
I got the error, because v-mask directive requires 1 input, found 2
<el-input placeholder="enter phone number" v-model="contactNo" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="select">
<el-option label="restaurant phone" value="1"></el-option>
<el-option label="order phone" value="2"></el-option>
<el-option label="personal phone" value="3"></el-option>
</el-select>
You need to remove apostrophes from v-mask value or bind prop with ::
Option 1:
v-mask="## ### #####"
Option 2:
:v-mask="'## ### #####'"

How do I pass Variants as props to React Components in ReasonML?

I have tried the following approach to be able to send variants as props.
type ipAddr =
| IPV4
| IPV8;
[#react.component]
let make = () => {
let appData = Data.tileData;
<div className="App">
<header className="flex outline justify-between" />
<Content selected={ipAddr.IPV4} appData />
</div>;
};
But it throws the error,
ninja: error: rebuilding 'build.ninja': subcommand failed
I have tried sending variants directly to Component as well.
<div className="App">
<header className="flex outline justify-between" />
<Content selected=IPV4 appData />
</div>;
But it ended up returning another error
Start compiling ninja: error: dependency cycle: src/App-ReactHooksTemplate.cmj -> src/Content-ReactHooksTemplate.cmj
-> src/App-ReactHooksTemplate.cmj
Finish compiling(exit: 1)
Where am I going wrong?
DISCLAIMER: I don't know ReasonML, however
If it was OCaml, you'd just write IPV4, no need to qualify it like ipAddr.IPV4.
Perhaps this is the same in Reason?
I have solved this another way. Instead of passing the variant as prop, I simply rendered different components based on variant value.
[#react.component]
let make = () => {
let appData = Data.tileData;
switch (selected) {
| IPV4 =>
<div>
<IPV4Renderer appData />
</div>
| IPV6 =>
<div>
<IPV6Renderer appData />
</div>
};
};

Protractor css locator for md-select

I'm new to protractor and need to know how can i get the text i.e. Connections in the below code block. I need to click this "Connections". Anyhelp would be really appreciated. Thanks in advance
<md-option ng-repeat="worksite in vmSplashController.worksites track by $index" id="option_worksite_TRANSFER" ng-value="worksite" tabindex="0" class="ng-scope" role="option" aria-selected="false" value="[object Object]">
<div class="md-text ng-binding">
Connections
</div>
</md-option>
Full code
<md-dialog ng-cloak aria-span="" id="splashDialog" class="asui-popup-container splashContainer">
<form name="splash">
<md-dialog-content class="agentDetails" flex>
</md-dialog-content>
<md-dialog-content class="agentOptions" flex layout="row">
<md-input-container class="md-input-has-placeholder" id="nav_worksite" ng-if="vmSplashController.worksites.length >= 1" flex="50" layout="column">
<label class="select-lable">Worksite</label>
<md-select md-no-ink name="nav_worksite" required ng-model="vmSplashController.worksites.selected" ng-model-options="{trackBy: '$value.locationCode'}" aria-label="Select Worksite" md-container-class="md-select-custom nav-worksite-selectbox" ng-change="vmSplashController.onWorksiteChange(vmSplashController.worksites.selected)">
<md-option ng-repeat="worksite in vmSplashController.worksites track by $index" id="option_worksite_{{worksite.locationCode}}" ng-value="worksite">
{{**Here that Div is being created i.e. Connections along with other two options**}}
</md-option>
</md-select>
</md-input-container>
</md-dialog-content>
<md-dialog-actions layout="row">
<md-button md-no-ink class="md-primary nobg-btn" ng-click="vmSplashController.onConfirm()" ng-disabled="splash.$invalid">
CONFIRM
</md-button>
</md-dialog-actions>
</form>
</md-dialog>
I treid this
element(by.cssContainingText('.option_worksite_TRANSFER > div.md-text', 'Connections')).click();
but getting the below error.
Message:
Failed: No element found using locator: by.cssContainingText(".option_worksite_TRANSFER > div.md-text", "Connections")
First - I'm a bit confused. In example you are trying to select class option_worksite_TRANSFER, but in error message it has an id.
If you are trying to select value from dropdown, try this solution:
https://stackoverflow.com/a/39047319/6331748
Try this using xpath:
element(by.xpath("//div[text()='Connections']")).click();
Try using the below code:
element(by.cssContainingText('[id^="option_worksite"] > div.md-text', 'Connections')).click();
Adding waits:
var EC = protractor.ExpectedConditions;
var ele = element(by.cssContainingText('[id^="option_worksite"] > div.md-text', 'Connections'));
browser.wait(EC.visibilityOf(ele), 5000).then(function(){
ele.click();
});

Selecting a field in Protractor

<hs-details-item>
<hs-label>Location</hs-label>
<hs-value-block>
<hs>
<hs-text-box ng-class="{'disabled': isAmenityPosting }" class="required" input-control="{title:'Location', okCallback:setJobSite, value:jobSiteName,
autocomplete:{ values:getJobSiteList, reload: true }, ss:'location'}">
<i class="icon-room"></i><span hs-placeholder="Select Location" class="ng-binding"></span>
</hs-text-box>
</hs>
<hs>
<!-- ngIf: isBarcodeShow() --><hs-button ng-class="{'disabled': soCreating }" class="barcode-special-btn smaller ng-scope" ng-if="isBarcodeShow()" hs-gesture="{handler:startScan, param: onBarcodeScanCompleted}"><i class="icon-br-code"></i></hs-button><!-- end ngIf: isBarcodeShow() -->
</hs>
</hs-value-block>
</hs-details-item>
Scenario: click on “Location” field...
What would be the best way to come up with a command in Protractor to select "location" field from the above Snippet Code?
Can it be done by not using Xpath?
Multiple options here. A sort of a non-welcomed, but short and readable way, would be to use an XPath expression and check the preceding label:
var locationTextBox = element(by.xpath("//hs-label[. = 'Location']/following::hs-text-box"));
locationTextBox.click();