The Angular date picker is overly verbose in its data output regarding selected dates and requires optimization

Using Angular 5, I have integrated a specific npm package for handling dates

import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';

The problem arises when trying to send data to the server in this required format only

2018-05-23

Unfortunately, it is currently sending all of this unnecessary information

Tue%20May%2022%202018%2017:00:00%20GMT-0700%20(US%20Mountain%20Standard%20Time)

Complete service call can be seen below

Is there a way to correctly convert this date format?

Answer №1

The URI-encoded value %20 represents a space (a common encoding used frequently). This means that we can simply do the following:

const str = decodeURIComponent("Tue%20May%2022%202018%2017:00:00%20GMT-0700%20(US%20Mountain%20Standard%20Time)");
// this will result in: "Tue May 22 2018 17:00:00 GMT-0700 (US Mountain Standard Time)";

Since the string appears to be a valid date, we can proceed by passing it to the Date constructor...

new Date(str); // Note that the output will be in your local timezone.
// In my case: Wed May 23 2018 09:00:00 GMT+0900 (Japan Standard Time)

Given that your desired format closely resembles the ISO standard, we can utilize that and split at the "T".

const myFormat = new Date(str).toISOString().split("T")[0];
// resulting in "2018-05-23" (or adjusted according to your locale).

Some error-checking might be necessary, especially for validating the date.

If you require more advanced functionality, consider using date-fns

Edit: It appears I may have misinterpreted the problem. However, using toISOString() and split remains a straightforward solution without adding extra dependencies. You could also check out for more options...)

(The issue seems to stem from attempting to send a date object instead of a string.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating JSON Objects in Ionic 2

Example of my JSON array structure [{ label: "Interests", datatype: "check", lookupname: "null", order: "05", options: [ 0:{id: "01", value: "Photography"} 1:{id: "0 ...

Guide on transferring binary image data to a JavaScript function

I have $comment->image_data as the binary data of the image and I want to pass this data to the imgclick() function. Attempting the method below, but encountering an unexpected token error. <img src="data:image/jpg;base64,'.$comment->image_t ...

Using Nestjs to inject providers into new instances of objects created using the "new" keyword

Is it possible to inject a provider into objects created by using the new keyword? For instance: @Injectable() export class SomeService { } export class SomeObject { @Inject() service: SomeService; } let obj = new SomeObject(); When I try this in my t ...

What is the process for integrating GitHub repository code into my client-side JavaScript application?

I am attempting to incorporate the GitHub repository "zipcelx" into my client-side JavaScript, but all I see is an option to download it from npm, which I do not understand. It would be helpful if someone could explain how a module meant for client-side us ...

Utilizing the Aladin Lite application within a React application, despite not being specifically designed for React

I am interested in incorporating the Aladin Lite app into my React application. Typically, embedding the app in a div is straightforward when developing a website without React: <!-- include Aladin Lite CSS file in the head section of your page --> ...

Steps to resolve security vulnerabilities found in Angular 12.0.3 through npm audit

Upon creating a fresh Angular 12.0.3 project, running npm audit immediately uncovers 8 high and 40 moderate vulnerabilities. # npm audit report css-what <5.0.1 Severity: high Denial of Service - https://npmjs.com/advisories/1754 fix available via `npm ...

How can I dynamically swap one div with another within the same div using Javascript?

I have a piece of code that I am working with, and I need it to replace every div element whenever a specific div is clicked. function updateContent(target, replacementID) { document.getElementById(target).innerHTML = document.getElementById(replaceme ...

Unable to redirect Firebase Hosting root to a Cloud Function successfully

Currently I am utilizing Firebase Hosting along with a Firebase.json file that is configured to direct all traffic towards a cloud function (prerender) responsible for populating meta and og tags for SEO purposes. { "hosting": { "public": "dist/pr ...

The port has not been defined

My Node server appears to be operational, however the console is displaying an error message stating that the port is undefined. const express = require('express'); const env = require('dotenv') const app = express(); env.config(); ap ...

Unable to resolve all parameters for the RouterUtilities class

My goal is to develop a RouterUtilities class that extends Angular's Router. Despite the app running and compiling smoothly, when I run ng build --prod, it throws an error message like this: ERROR in : Can't resolve all parameters for RouterUtil ...

My unique VSCode extension performs flawlessly during debugging, but encounters issues once installed

While debugging, my custom language extension for VSCode is functioning perfectly. However, once installed, the VSIX doesn't seem to include any TypeScript features. When I open the correct file extension type, it highlights everything and displays th ...

Clicking on the <Link to=URL> in a React application built with Typescript and Redux triggers the disappearance of the component

Issue Background The application was created using npx create-react-app rrts --typescript, which sets up React, Redux, and Typescript. Problem Visualization (Content is the component with sentences) View Problem Image Here Problem Description Clicking o ...

How can I emphasize the React Material UI TextField "Cell" within a React Material UI Table?

Currently, I am working on a project using React Material UI along with TypeScript. In one part of the application, there is a Material UI Table that includes a column of Material TextFields in each row. The goal is to highlight the entire table cell when ...

Is it possible to apply the active class to the current list menu item in Mark using server-side techniques instead of client-side JS

When a menu item is clicked, I want to add the active class to that specific menu item. For example, if someone clicks on the contact page, the contact option in the menu should receive the active class. I am currently working with NodeJS and Koa. Below is ...

Unable to navigate to different tabs within the html tab content section

When I navigate to my new profile tab, I encounter an issue where I cannot switch to other tabs by clicking on them. Below is the code snippet that I am using. Navigating from the Dashboard tab to the New Profile tab works fine, but the reverse direction d ...

Crafting interactive buttons with angular material

I've been working on an angular application where I created 5 mat flat buttons using angular material. <button mat-flat-button [ngClass]="this.selected == 1 ? 'tab_selected' : 'tab_unselected'" (click)="change(1)">B-L1</b ...

Utilize jQuery to restrict decimal places to only 1

Whether to round or truncate: <div class="my-val">1.334</div> <div class="my-val">12.133</div> The output should be: 1.3 12.1 ...

Sorting List Algorithm

Looking to create an algorithm in Node.js that abides by specific rules. It takes a series of numbers as input and the maximum consecutive number before taking a break. The logic is as follows: The rules : Only one competition per day Competitions are hel ...

How to establish a session in CodeIgniter with the help of JavaScript

Currently, I am trying to save the session in jQuery. Specifically, I am attempting to store all the IDs that are checked via checkboxes in the export_type variable and then save them in the session. However, when running the following code snippet, I en ...

Mastering JQuery: Techniques for Managing Events Across Numerous Elements

My view page utilizes Ajax and JQuery to retrieve data from Codeigniter's controller, then presents it in HTML format. Below is the code for the Ajax post: $(document).ready(function(){ var fileId = 0; var wrapper = $("#preference"); ...