Datepicker after customization not showing

Hello, I have problem with date picker after I do some customization on my portal, the issue is that the date picker not appears to the customers:
it show like:

after I review each pice of code I find that the problem appear after I add the arraies ( I do hide and show fields useing arraies and mapping).

Hello,
We have recently released Crayons V3. Can you let me know which version of Crayons you are using?

Thanks
Kaushal Cavale

From where I can check that?

Hey @AlAnoud_AlZamil
You can find the version in the Crayons CDN URL in the head section of your html file.

For example:
Here we are using the Crayons version 2 (notice the crayons@2 in the URL)

<script
  type="module"
  src="https://unpkg.com/@freshworks/crayons@2/dist/crayons/crayons.esm.js">
</script>
<script
  nomodule
  src="https://unpkg.com/@freshworks/crayons@2/dist/crayons/crayons.js">
</script>

Thank you @tejakummarikuntla for the reply, at my case I don’t have any I try to add the second script but still the date picker not working.

Hey @AlAnoud_AlZamil,

after I review each pice of code I find that the problem appear after I add the arraies ( I do hide and show fields useing arraies and mapping).

Please share a simple code snippet of your logic for us to debug better.

Thanks

I use:
var start =[‘helpdesk_ticket_custom_field_cf_requested_period_2223988’,‘helpdesk_ticket_custom_field_cf_iqama_number_2223988’,‘helpdesk_ticket_custom_field_cf_family_invitation_request_number_2223988’,‘helpdesk_ticket_custom_field_cf_invite_full_name_as_passport_2223988’,‘helpdesk_ticket_custom_field_cf_nationality_2223988’,‘helpdesk_ticket_custom_field_cf_company_name_2223988’,‘helpdesk_ticket_custom_field_cf_positionjob_title_2223988’,‘helpdesk_ticket_custom_field_cf_saudi_embassy_to_be_addressed_to_2223988’,‘helpdesk_ticket_custom_field_cf_attached_passport_scan_copy_2223988’,‘helpdesk_ticket_custom_field_cf_type_of_invitation_2223988’,‘helpdesk_ticket_custom_field_cf_request_type116118_2223988’,‘helpdesk_ticket_custom_field_cf_addressed_to_2223988’,‘helpdesk_ticket_custom_field_cf_purpose_2223988’,‘helpdesk_ticket_custom_field_cf_deduction_end_date_2223988’,‘helpdesk_ticket_custom_field_cf_deduction_start_date_2223988’,‘helpdesk_ticket_custom_field_cf_requested_amount_2223988’,‘helpdesk_ticket_custom_field_cf_i_have_understand_and_agree_the_terms_and_conditions_of_personal_loan_policy_for_raqtan_2223988’,‘helpdesk_ticket_custom_field_cf_job_title_2223988’,‘helpdesk_ticket_custom_field_cf_joining_date_2223988’,‘helpdesk_ticket_custom_field_cf_vacation_allowance_period_from_2223988’,‘helpdesk_ticket_custom_field_cf_vacation_allowance_period_to_2223988’,‘helpdesk_ticket_custom_field_cf_order_id_2223988’,‘helpdesk_ticket_custom_field_cf_is_it_related_to_the_order_2223988’,‘helpdesk_ticket_custom_field_cf_voltage_2223988’,‘helpdesk_ticket_custom_field_cf_department_requester_2223988’,‘helpdesk_ticket_custom_field_cf_cost_of_airfreight_in_fse_2223988’,‘helpdesk_ticket_custom_field_cf_mode_of_shipping_2223988’,‘helpdesk_ticket_custom_field_cf_item_description_2223988’,‘helpdesk_ticket_custom_field_cf_vendor_manufacturer_name_2223988’,‘helpdesk_ticket_custom_field_cf_unit_2223988’,‘helpdesk_ticket_custom_field_cf_fse_ref_2223988’,‘helpdesk_ticket_custom_field_cf_receiver_name_2223988’,‘helpdesk_ticket_custom_field_cf_from_location_2223988’,‘helpdesk_ticket_custom_field_cf_to_location_2223988’,‘helpdesk_ticket_custom_field_cf_qty_of_packagesenvelopes_2223988’,‘helpdesk_ticket_custom_field_cf_pns_number_2223988’,‘helpdesk_ticket_custom_field_cf_reason_of_return_2223988’,‘helpdesk_ticket_custom_field_cf_site_contact_person_2223988’,‘helpdesk_ticket_custom_field_cf_site_contact_number_2223988’,‘helpdesk_ticket_custom_field_cf_address_2223988’,‘helpdesk_ticket_custom_field_cf_confirmed_fses_2223988’,‘helpdesk_ticket_custom_field_cf_product_type_2223988’,‘helpdesk_ticket_custom_field_cf_maintenance_req_location_2223988’,‘helpdesk_ticket_custom_field_cf_req_details_2223988’,‘helpdesk_ticket_custom_field_cf_requested_by_2223988’,‘helpdesk_ticket_custom_field_cf_targeted_company_2223988’,‘helpdesk_ticket_custom_field_cf_area_2223988’,‘helpdesk_ticket_custom_field_cf_printer_type_2223988’,‘helpdesk_ticket_custom_field_cf_model_2223988’,‘helpdesk_ticket_custom_field_cf_printer_issue_2223988’,‘helpdesk_ticket_custom_field_cf_issue_type_2223988’,‘helpdesk_ticket_custom_field_cf_it_department_2223988’,‘helpdesk_ticket_custom_field_cf_hardware_type_2223988’,‘helpdesk_ticket_custom_field_cf_old_hardware_acquisition_date_2223988’,‘helpdesk_ticket_custom_field_cf_old_hardware_status_2223988’,‘helpdesk_ticket_custom_field_cf_ax_user_name_2223988’,‘helpdesk_ticket_custom_field_cf_customers_order_reference_2223988’,‘helpdesk_ticket_custom_field_cf_brand_2223988’,‘helpdesk_ticket_custom_field_cf_bv_item_refunded_2223988’,‘helpdesk_ticket_custom_field_cf_marketplace_item_refunded_2223988’,‘helpdesk_ticket_custom_field_cf_currency_2223988’,‘helpdesk_ticket_custom_field_cf_subsubject_2223988’,‘helpdesk_ticket_custom_field_cf_finance_refund_status_2223988’,‘helpdesk_ticket_custom_field_cf_others_2223988’,‘helpdesk_ticket_custom_field_cf_customer_name_2223988’,‘helpdesk_ticket_custom_field_cf_customer_contact_number_2223988’,‘helpdesk_ticket_custom_field_cf_account_title_2223988’,‘helpdesk_ticket_custom_field_cf_refund_reason_2223988’,‘helpdesk_ticket_custom_field_cf_returned_item_2223988’,‘helpdesk_ticket_custom_field_cf_payment_method_2223988’,‘helpdesk_ticket_custom_field_cf_sales_order_number_2223988’,‘helpdesk_ticket_custom_field_cf_waybill_number_2223988’,‘helpdesk_ticket_custom_field_cf_amount_paid_2223988’,‘helpdesk_ticket_custom_field_cf_amount_to_be_deducted_if_any_2223988’,‘helpdesk_ticket_custom_field_cf_total_refund_2223988’,‘helpdesk_ticket_custom_field_cf_invoice_number_2223988’,‘helpdesk_ticket_custom_field_cf_tech_name_2223988’,‘helpdesk_ticket_custom_field_cf_total_payable_amount_2223988’,‘helpdesk_ticket_custom_field_cf_po_fse_number_2223988’,‘helpdesk_ticket_custom_field_cf_item_number_2223988’,‘helpdesk_ticket_custom_field_cf_quantity_2223988’,‘helpdesk_ticket_custom_field_cf_months_2223988’,‘helpdesk_ticket_custom_field_cf_finance_region_2223988’,‘helpdesk_ticket_custom_field_cf_due_date_of_payment_2223988’,‘helpdesk_ticket_custom_field_cf_due_invoice_2223988’,‘helpdesk_ticket_custom_field_cf_bank_name_2223988’,‘helpdesk_ticket_custom_field_cf_iban_2223988’,‘helpdesk_ticket_custom_field_cf_swift_code_2223988’,‘helpdesk_ticket_custom_field_cf_bank_address_2223988’,‘helpdesk_ticket_custom_field_cf_complete_beneficiary_name_2223988’,‘helpdesk_ticket_custom_field_cf_po_no_2223988’,‘helpdesk_ticket_custom_field_cf_supplier_name_2223988’,‘helpdesk_ticket_custom_field_cf_amount_in_foreign_currency_2223988’,‘helpdesk_ticket_submit’,‘helpdesk_ticket_email’,‘helpdesk_ticket_custom_field_cf_destination_2223988’,‘helpdesk_ticket_custom_field_cf_purpose_of_travel_2223988’,‘helpdesk_ticket_custom_field_cf_job_description_2223988’,‘helpdesk_ticket_custom_field_cf_period_of_last_settlement_date_of_the_vacation_2223988’,‘helpdesk_ticket_custom_field_cf_employee_name_2223988’,‘helpdesk_ticket_custom_field_cf_period_per_months_2223988’,‘helpdesk_ticket_custom_field_cf_amount_per_sar_2223988’,‘helpdesk_ticket_custom_field_cf_project_2223988’,‘helpdesk_ticket_custom_field_cf_payment_type_2223988’,‘helpdesk_ticket_custom_field_cf_petty_cash_type_2223988’,‘helpdesk_ticket_product_id’,‘helpdesk_ticket_ticket_body_attributes_description_html’,‘ticket_file’,‘helpdesk_ticket_custom_field_cf_phone_number_2223988’];

  start.map(function(field_id){
  jQuery('#'+field_id).parents('.control-group').remove();

I use many arraies but this to use as sample.

@AlAnoud_AlZamil you cannot use Crayons without CDN added to the HTML, I think you’re not using Crayons.

Could you also elaborate on what arraies here?

Assuming you’re building an app and want to use Datepicker in the application.

Step 1:
Please add this to the Head section of your HTML file:

<script
  type="module"
  src="https://unpkg.com/@freshworks/crayons@2/dist/crayons/crayons.esm.js">
</script>
<script
  nomodule
  src="https://unpkg.com/@freshworks/crayons@2/dist/crayons/crayons.js">
</script>

Step 2:
Add the Datepicker component to your code

<fw-datepicker value="22-05-2020" date-format="DD-MM-YYYY"></fw-datepicker>

Find more about the usage at Datepicker (fw-datepicker) | Crayons

If the issue is something different, please elaborate and share the relevant code snippets/files without sensitive data.

Hello, I use array then mapping ro remove this fields from the form.

the date picker I add from your code working, but still the date fields provided by freshdesk not working.