Category: javascript

I have a date range picker on my website.

When a user inputs the date and time range, I want to send separately within the form the startDate and the endDate

daterangepicker code:

    $('input[name="datetimes"]').daterangepicker({
        timePicker: true,
        timePickerIncrement: 5,
        startDate: moment().startOf('hour'),
        endDate: moment().startOf('hour').add(32, 'hour'),
        locale: {
          format: 'YYYY-MM-DD hh:mm'
        },
        opens: 'center',
        drops: 'auto'
    });

And this is what I tried:

$('#formid').submit(function(e) {
    e.preventDefault();
    let startDate = ($('#datetimes').data('daterangepicker').startDate).format('YYYY-MM-DD hh:mm');
    let endDate = ($('#datetimes').data('daterangepicker').endDate).format('YYYY-MM-DD hh:mm');
    $(this).append('<input type="hidden" name="start_date" value='+startDate+' /> ');
    $(this).append('<input type="hidden" name="end_date" value='+endDate+' /> ');
    this.submit();
});

Before the this.submit(); I did a console.log(startDate) and thi is what I am getting:

I am getting the date and the time (as expected), but then if I try doing a print(request.POST) in the view (django back-end), this is what I get:

Somehow, during the POST the HH:mm disappeared.

How can I keep the values of hh:mm during the POST?

I’m seeing a lot of Javascript plugins utilizing a pattern like the one below in the beginning of the main plugin script.

I’ve tried looking up the Internet but couldn’t find any explanation and I don’t have any idea why this is needed.

Excerpt from Datatables:

(function( factory ) {
    "use strict";

    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery'], function ( $ ) {
            return factory( $, window, document );
        } );
    }
    else if ( typeof exports === 'object' ) {
        // CommonJS
        module.exports = function (root, $) {
            if ( ! root ) {
                // CommonJS environments without a window global must pass a
                // root. This will give an error otherwise
                root = window;
            }

            if ( ! $ ) {
                $ = typeof window !== 'undefined' ? // jQuery's factory checks for a global window
                    require('jquery') :
                    require('jquery')( root );
            }

            return factory( $, root, root.document );
        };
    }
    else {
        // Browser
        factory( jQuery, window, document );
    }
}
(function( $, window, document, undefined )
...

Excerpt from Slick.js

;(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports !== 'undefined') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }

}(function($) {
...

I am getting this error while trying to map an array with the object.

Type 'unknown' is not assignable to type 'ReactNode'.
  Type 'unknown' is not assignable to type 'ReactPortal'.ts(2322)
index.d.ts(1353, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>'

Here is my code.

const data = [
  {
    label: "CLIENT ID",
    value: "clientId",
  },
  {
    label: "BILLING CUSTOMER ID",
    value: "billingCustomerId",
  },
  {
    label: "EMAIL",
    value: "email",
  },
  {
    label: "PHONE NUMBER",
    value: "phoneNumber",
  },
  {
    label: "BUSINESS NAME",
    value: "businessName",
  },
  {
    label: "BILLING ADDRESS",
    value: "billingAddress",
  },
  {
    label: "TAX DETAILS",
    value: "taxDetails",
  },
  {
    label: "LOCATION",
    value: "location",
  },
  {
    label: "LANGUAGE",
    value: "language",
  },
];
const ProfileDetail = (props: any) => {
 

 
  const dispatch = useDispatch();
  useEffect(() => {
    if (clientId !== null && userMasterId !== null && accessToken !== null) {
     
      clientDetail(accessToken, clientId);
    }
  }, [clientId, userMasterId, accessToken]);
  const profileState: any = useSelector((state: any) => state.profileBilling);
  const clientDetail = async (aToken: string, cId: string) => {
    await dispatch(getClientDetailThunk(aToken, cId));
  };

  return (
    <div>
      {data.map((item: any, i: number) => {
        return (
          <Box marginY={2} key={item.label}>
            <Typography className={classes.menuTitle}>{item.label}</Typography>
            <p className={classes.menuSubtitle}>
              {item.value === Object.keys(profileState?.cDetail)[i].     // I tried to map the array value like this so that i don't have to repeat this block of code.
                ? Object.values(profileState?.cDetail)[i]
                :  null}
            </p>
          </Box>
        );
      })}
    </div>
  );
};

export default ProfileDetail;

I am not sure if i am doing it write or wrong. But the code is working on UI but it is showing the typescript error which i am not sure how to resolve.

This how profileState.cDetail looks like.

{
billingAddress: "Street2",
billingCustomerId: "cus_Kf4ylZZmyALR6f",
businessName: "xxxxxxx",
clientId: "67f3b1f6",
email: "[email protected]",
language: "English",
location: "xxxx",
phoneNumber: "1234123412",
taxDetails: "123",
}