How to use mulitple date time pickers in a form react native functional approach. I'm using three datetime picker to get input

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• Command failed: xcrun instruments -s

  I want to run my react native app on a real ios device with this line :

  npx react-native run-ios --udid SOME-UDID
  

  but i got this error :

  xcrun: error: sh -c '/Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk -find instruments 2> /dev/null' failed with exit code 17664: (null) (errno=No such file or directory)
  xcrun: error: unable to find utility "instruments", not a developer tool or in PATH
  error Command failed: xcrun instruments -s
  xcrun: error: sh -c '/Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk -find instruments 2> /dev/null' failed with exit code 17664: (null) (errno=No such file or directory)
  xcrun: error: unable to find utility "instruments", not a developer tool or in PATH
  

  everything is ok on simulator

  I'm using XCODE 13
• How to maintain global states created dynamically

  I am trying to Display list of items with then name and button to download its respective file Same list are available in different other screens. When I click on download

  1. State info sharing: It should start download and the state/progress of the download should be visible to same item available in different other screens.unique identifier is item id

  2. There can be parallel downloads

  Problem statement:

  1. Unable to share the information for same item if we use state within the same item
  2. On use of redux its solving problem 1 however Parallel download information is getting overwritten as its writing to same reducer state

  Any idea or approach is appreciated. Thanks
• unable to save to array react state from response from server

  Hi I'm trying to save my response.data to my array state of react but it never stores the correct array but when I do a temporary array it works.

  Any help would be appreciated, thanks!

   const [allstudentlist, setAllStudentlist] = useState([]);
  
  await Axios.post(currentUrl, params).then((res) => {
    // if res.data[0][]
    // if res data is there then ;
    if (res.data["error"]) {
      alert(res.data["error"]);
    } else {
      // alert("Register Successful");
      // console.log(res.data[0]);
      console.log(res.data);
      // works
      let temp = res.data;
      setAllStudentlist(...temp);
      // works
      console.log(temp);
      // returns an empty array
      console.log(allstudentlist);
    }
  });
  

  Reponse data

  reponse data

  I tried to test as well with a fake api but it looks like there is an issue with setting Arrays at react

  I tried to test with codeSandbox as well with a fake API and it does not work

  import "./styles.css";
  import React, { Component, useState, useEffect } from "react";
  
  import Axios from "axios";
  export default function App() {
    const [array2, setArray] = useState([]);
  
    function handleClick() {
      Axios.get("https://finalspaceapi.com/api/v0/character/?limit=2").then(
        function (response) {
          console.log(response.data);
          setArray(response.data);
          console.log(array2);
        }
      );
    }
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={handleClick}></button>
      </div>
    );
  }
  
• How does React hook handle dependency lists when passing objects to child components?

  Parent component like this:

  function ParentComponent(){
    return (
      <ChildComponent data={{ x: 1, y: 2 }} />
    )
  }
  

  Child component like this:

  function ChildComponent({ data }){
    const [sum, set] = useState(0)
    
    useEffect(() => {
      set(data.x + data.y)
    }, [data])
  
    return (
      <div>{sum}</div>
    )
  }
  

  If it is like the above method, it will cause repeated rendering between subgroups, because the data is always changing. How should I deal with such a scenario?

  Of course I know it's possible to cache data in the parent component by const [data] = useState({ x: 1, y: 2 }), but I want to know if there is a better solution, if any object parameter is required useState to cache, is this implementation too complicated?

  In addition, it can also be stored in the child component through const dataRef = useRef(data), but if a value of data changes, it will not be recalculated.

  Other parameters such as functions and arrays are the same.

  What's wrong with my thinking?
• How do I call react function in js map?

  I have the below code, the problem is in the part where I am calling the RemoveProduct function in the map function:

  function AddOrder() {
      const d = new Date();
      let text = d.toString();
      const [addOrder] = useMutation(queries.ADD_ORDER);
      const [editUser] = useMutation(queries.EDIT_USER_CART);
      const [editProduct] = useMutation(queries.EDIT_PRODUCT);
  
      function RemoveProduct (x)  {
  
          let getProd = useQuery(queries.GET_PRODUCTS_BY_ID, {
            fetchPolicy: "network-only",
            variables: {
              _id : x._id
            },
          });
          console.log(getProd.quantity)
          console.log(x.quantity)
          let a = getProd.quantity - x.quantity
          console.log(a)
          editProduct({
            variables: {
              _id : x._id,
              quantity: a
            },
          });
          return null;
      }
  
      const { currentUser } = useContext(AuthContext);
  
      if (error) {
          return <h1> error</h1>;
      } else if (loading) {
          return <h1> loading</h1>;
      } else if (data && getUserOrders.data && currentUser && data.getUser.cart.length > 0) {
          let newCart = [];
          let total = 0;
          for (let i = 0; i < data.getUser.cart.length; i++) {
              total += data.getUser.cart[i].price * data.getUser.cart[i].quantity;
              newCart.push({
                  orderedQuantity: data.getUser.cart[i].quantity,
                  _id: data.getUser.cart[i]._id,
                  name: data.getUser.cart[i].name,
                  image: data.getUser.cart[i].image,
                  price: data.getUser.cart[i].price,
              });
          }
          
          newCart.map((x) => RemoveProduct(x))
  
      
  
          editUser({
              variables: {
                  id: currentUser.uid,
                  cart: [],
              },
          });
      }
      
  }
  export default AddOrder;
  

  I get the following error when I run this code:

  Uncaught Error: Rendered more hooks than during the previous render.
  

  How can I fix this? I tried to create a separate component for RemoveProducts and call in this function but that did not work either.
• ant design vuejs current date auto focus each month

  Hi I'm currently working on an old project using vuejs and I have this issue can someone please help me I'm using Vue version 2.6.11 and antd ver 1.7.8 here are the steps: when clicking previous month / Next to next month It focuses on the same date as picked (eg: 4th) every month when clicking next or previous month enter image description here

  enter image description here I would like to have an event or a way to turn autofocus off each month when the previous month or next month button is clicked only keep the selected date Thank you guys really much!
• Is it possible to import vue-datepicker language via a variable

  I am using vue-datepicker plugin in my project. According to the docs, you set the language like this:

  <datepicker :language="nl" />
  

  And

  import {nl} from 'vuejs-datepicker/dist/locale'
  

  And

   data() {
     return {
       nl: nl
     }
   }
  

  My question is: Is it possible to use a variable coming from a parent component or an env file to load all of this ?

  So something like this:

  CountryCode = "nl" //Coming from somewhere
  
  <datepicker :language=CountryCode />
  import {CountryCode} from 'vuejs-datepicker/dist/locale'
  data() {
    return {
      CountryCode: CountryCode
    }
  }
  

  I know the code above is totally incorrect, but just trying to show what i mean, if that makes any sense.
• Symfony DateTime format errors - datatransformation (external datepicker)

  I'm working with Symfony 6 and a TempusDomini datepicker. I have read (amongst many others) the symfony documentation, https://symfony.com/doc/current/reference/forms/types/datetime.html. Based on the documentation I found I initially implemented the form builder as followed:

  ->add('TextDateField')
  ->add('RegistrationDateTime', DateTimeType::class, [
                  'required' => false,
                  'widget' => 'single_text',
                  'format' => 'm/d/Y, h:i a',
                  'attr' => [
                      'class' => 'datetimepicker-input',
                      'data-target' => '#datetimepicker1'
                  ],
                  'html5' => false,
              ])
          
  

  The "TextDateField" is for troubleshooting, see explanation below. And the actual TWIG file looks like this (for the TextDateField I have a similar datapicker block as the one for RegistrationDateTime):

  {{form_start(form)}}
  {{form_row(form.username)}}
  
                  <div class> 
                      <label for="datetimepicker1Input" class="form-label">Simple picker</label>
                      <div class="input-group" id="datetimepicker1" data-td-target-input="nearest" data-td-target-toggle="nearest">
                          <input id="user_creation_form_RegistrationDateTime" name="user_creation_form[RegistrationDateTime]" type="text" class="form-control" data-td-target="#datetimepicker1">
                          <span class="input-group-text" data-td-target="#datetimepicker1" data-td-toggle="datetimepicker">
                 <span class="fa-solid fa-calendar"></span> 
               </span>
   
                  </div>
                  <script type="text/javascript">
                      const picker = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));
                  </script>
               </div>
   
  {{form_row(form.roles)}}
  {{form_row(form._token)}}
  {{form_row(form.submit)}}
  

  What I notice is that the dates are correctly given from a datepicker to the controller if passed via Text. Please see this dump where you can see 2 datepicker values as passed to the controller, both for the same dates (6 may 2022)

  App\Entity\TUser^ {#361
    -id: null
    -username: "scdsqd"
    -roles: array:2 [
      0 => "ROLE_USER"
      1 => "ROLE_ADMIN"
    ]
    -TextDateField: "05/06/2022, 12:42 PM"
    -RegistrationDateTime: DateTime @1640599500 {#828
      date: 2021-12-27 11:05:00.0 Europe/Berlin (+01:00)
    }
  }
  

  So as you can see the text is passed correctly for the "text" datepicker but using the symfony DateTimeType::class messes it up by giving a seemingly random date. Using other formats as datetime (for example timestamp) is not possible.

  So how can I pass the value correctly to the database?

  One possible "solution" is to work with TextType::class but since I want to keep the field RegistrationDateTime in the database as a DateTimeType this is not the best solution either since that would mean I have to transform the data.

  Maybe I'm not looking at the right place, but it seems to me as if Symfony is not well adjusted to use external datepickers. I have found tons of post with people struggling to implement a datepicker...

  Is the approach I use correct?

  How can I "force" symfony to "understand" the datepicker provided dates?

  If the only way is to use TextType in the form-builder, how do I tackle the datatransformations to make sure that via doctrine I save in the datetime format?

  Any pointers in the right direction are welcome... I'm getting rather frustrated by it since I've struggled on it an embarrassingly long time now...
• @mui/x-date-pickers UTC always, please

  Using @mui/x-date-pickers I need to both display and edit in UTC. My stored data is also in UTC. I can wrap the value in a render function to force-display it in the format I need, but then upon edit the date is shown in my locale! I feel like there should be an option to say, "Just let me show and edit in UTC." Any help greatly appreciated. I can't believe this hasn't come up for scientific apps before.

  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
  import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
  import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
  
  const dateFormat = 'yyyy-MM-dd HH:mm:ss';
  const inputMask = '____-__-__ __:__:__';
  const views = ['year', 'month', 'day', 'hours', 'minutes', 'seconds'];
  const renderUTC = new Date(date).toISOString().replace('T', ' ').substring(0, 19);
  
  ...render returning:
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <DateTimePicker
              value={renderUTC(value)}
  ...
  
• Force user to pick time in jQuery datetimepicker

  I am currently using jQuery datetimepicker in inline mode, but users can currently select a date but not a time. How do I force users to pick a time after they've picked a date?