Input:date not displaying date picker

luclib · January 26, 2024, 8:51pm

One of my applications uses two input:date elements to get a start date and an end date for my form.

    <form [formGroup]="dateRangeForm" (submit)="onSubmit()">
        <div class="card-block">
            <div class="form-group">
                <label for="start-date">Start Date: </label>
                <input id="start-date"
                       type="date"
                       class="form-control"
                       formControlName="startDate"/>
            </div>
            <div class="form-group">
                <label for="end-date">Start Date: </label>
                <input id="end-date-date"
                       type="date"
                       class="form-control"
                       formControlName="startDate"/>
            </div>
            <div class="card-footer separator">
                <input id="search" type="submit" value="Search">
            </div>
        </div>
    </form>

In an earlier version of my application it was properly displaying a box with the proper placeholder (mm/dd/yyyy) and a calendar icon at the end, which would display a popup date picker upon selecting it.

Early version

I do not know if this is related, but I did update my global version of the C8Y cli to version 1018 from 1016, and since that time the date picker is not longer being disabled and neither is the calendar icon.

I have tried downgrading the CLI back to the earlier version, but the problem persisted.

Cyril_Poder · January 29, 2024, 12:03am

Hi,

You need to use the ngx-bootstrap date picker component.

First ensure you import BsDatepickerModule in your module.

Then your code should look like this:

  <form [formGroup]="dateRangeForm" (submit)="onSubmit()">
    <div class="card-block">
      <label for="start-date">Start Date: </label>
      <div class="form-group datepicker">
        <input
          id="start-date"
          class="form-control"
          formControlName="startDate"
          bsDatepicker
        />
      </div>
      <label for="end-date">End Date: </label>
      <div class="form-group datepicker">
        <input
          id="end-date"
          class="form-control"
          formControlName="endDate"
          bsDatepicker
        />
      </div>
      <div class="card-footer separator">
        <input id="search" type="submit" value="Search" />
      </div>
    </div>
  </form>

Note the below points:

You need to put the label outside the form-control div, otherwise the date icon will be missplaced
Add the datepicker class to the form-control div
Add the bsDatepicker attribute to the input
Remove the date type from the input, otherwise the date won’t be displayed

You could also use the date-picker component instead, in which case you don’t need to import the BsDatepickerModule:

      <label for="dates">Dates: </label>
      <c8y-date-picker
        id="dates"
        dateFrom="startDate"
        dateTo="endDate"
      ></c8y-date-picker>

luclib · January 29, 2024, 2:34pm

Hi Cyril,

Thanks for the response. Unfortunately, I cannot test these changes because I am now encountering a problem trying to run my c8y application; this problem is concerning the c8y/style and c8y/ngx-components packages.

I have them listed in my list of dependencies in my root package.json file and they appear under the @c8y folder in node_modules, but whenever I try to start the application in localhost mode I am getting an error that the CLI cannot find the package.json files for each of the two previous modules.

Main error

Proxying requests to remote instance https://[domain].us.cumulocity.com
@c8y/style not found, no preview images included Error: Cannot find module '@c8y/style'
Require stack:
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\config\plugin.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\config\index.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\Application.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\index.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\cli\ServerCommand.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\cli\CumulocityCommandLine.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\cli.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\cli.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at config (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\config\plugin.    at C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\config\index.js:43:41
    at Array.reduce (<anonymous>)
    at config (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\config\index.j
    at Application.createWebpack (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webication.js:95:24)
    at Application.createDevelopmentMiddleware (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8t\webpack\Application.js:59:14)
    at DevServer.addMiddleware (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpaver.js:157:39)
    at DevServer.startDevServer (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webprver.js:84:18)
    at ServerCommand.action (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\cli\Serv.js:47:23) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\dist\\webpack\\config\\plugi
    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\dist\\webpack\\config\\index
    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\dist\\webpack\\Application.j
    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\dist\\webpack\\index.js',
    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\dist\\cli\\ServerCommand.js'
    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\dist\\cli\\CumulocityCommand    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\dist\\cli.js',
    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\cli.js'
  ]
}
Failed to start local development server
Error: Cannot find module '@c8y/ngx-components/package.json'
Require stack:
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\utils\federationUtils.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\config\federation.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\config\plugin.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\config\index.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\Application.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\index.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\cli\ServerCommand.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\cli\CumulocityCommandLine.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\cli.js
- C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\cli.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at resolveDependenciesFromNgxComponents (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\ctils\federationUtils.js:99:41)
    at resolveDependencies (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\utils\fedils.js:92:39)
    at getSharedDependencies (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\utils\fUtils.js:24:47)
    at getModuleFederationExports (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\wefig\federation.js:21:62)
    at config (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\config\plugin.    at C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\config\index.js:43:41
    at Array.reduce (<anonymous>)
    at config (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpack\config\index.j
    at Application.createWebpack (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webication.js:95:24)
    at Application.createDevelopmentMiddleware (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8t\webpack\Application.js:59:14)
    at DevServer.addMiddleware (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webpaver.js:157:39)
    at DevServer.startDevServer (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\webprver.js:84:18)
    at ServerCommand.action (C:\Users\lucas.liberman\AppData\Roaming\npm\node_modules\@c8y\cli\dist\cli\Serv    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\dist\\webpack\\config\\index.js',
    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\dist\\webpack\\Application.js',
    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\dist\\webpack\\index.js',   
    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\dist\\cli\\ServerCommand.js',
    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\dist\\cli\\CumulocityCommandLine.js',    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\dist\\cli.js',     
    'C:\\Users\\lucas.liberman\\AppData\\Roaming\\npm\\node_modules\\@c8y\\cli\\cli.js'
  ]
}

Here they are listed as dependencies in my main package.json:

  "dependencies": {
    "@angular/animations": "14.0.6",
    "@angular/cdk": "14.1.2",
    "@angular/common": "14.0.6",
    "@angular/compiler": "14.0.6",
    "@angular/core": "14.0.6",
    "@angular/forms": "14.0.6",
    "@angular/material": "^14.1.2",
    "@angular/platform-browser": "14.0.6",
    "@angular/platform-browser-dynamic": "14.0.6",
    "@angular/router": "14.0.6",
    "@angular/upgrade": "14.0.6",
    "@c8y/client": "1018.0.211",
    "@c8y/ngx-components": "^1018.0.211",
    "@c8y/style": "^1018.0.211",
    "@ngx-translate/core": "14.0.0",
    "chart.js": "^2.9.4",
    "jest": "^28.1.3",
    "ng2-charts": "^2.4.2",
    "ngx-bootstrap": "^9.0.0",
    "rxjs": "^6.5.3",
    "ts-node": "^10.9.1",
    "zone.js": "~0.11.7"
  },

The same dependencies are listed under node_modules, which I checked to verify that they contain a package.json folder.

In addition, I have already tried the following steps:

re-installing c8y/ngx-components and c8y/style using npm i
Upgrading the c8y CLI from version 1016 to 1018
Deleting and reinstalling node_modules
Retrying the last step but clearing the cache with npm cache clean --force

Unfortunately, all of the above steps have resulted in the same error.

Cyril_Poder · January 29, 2024, 10:10pm

Hi,

This is clearly an npm related error specific to Windows which has nothing to do with the packages you mention: simply npm is trying to resolve those dependencies globally, most probably because your npm install is not correctly configured or corrupted.
You need to be more specific regarding how you are trying to run your app, from which folder, with which npm and node version, and since you’re using Windows the npm related env variables (I don’t know them since I’m not using Windows myself).
If you can, try to use WSL to run your app instead of native Windows, or maybe try using nvm or other version managers (nvs, volta) which might help you create a clean node environment: Set up NodeJS on native Windows | Microsoft Learn

luclib · February 1, 2024, 2:28pm

Hi Cyril,

I managed to solve the problem with Tristan’s help. The application was missing the @c8y/cli dependency under the devdependencies property of the package.json file.

Cheers

Cyril_Poder · February 1, 2024, 2:58pm

Aaah! I had made the assumption that you had started by cloning an existing app!
It’s always tricky to start from scratch
I was to quick pointing at Windows…
Anyway good to know that this is resolved

system · July 30, 2024, 2:59pm

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.

Input:date not displaying date picker

Related topics