Skip to content

Commit cead06f

Browse files
vinoth-Kumar-Svinoth-Kumar-S
authored
Adding Angular DateTime Picker sample
1 parent ce40609 commit cead06f

19 files changed

Lines changed: 484 additions & 1 deletion

‎README.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,15 @@
1-
# getting-started-with-the-angular-datetimepicker-component
1+
# Getting Started with the Angular DateTime Picker Component
2+
23
A quick-start project that shows how to add the Syncfusion Angular DateTime Picker component to an Angular project. This project contains simple code customization, as well as some important features like setting specific date values, formatting, placeholder, range restrictions, and mask support.
4+
5+
Documentation: https://ej2.syncfusion.com/angular/documentation/datetimepicker/getting-started/
6+
7+
Online examples: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/datetimepicker/default
8+
9+
## Project prerequisites
10+
11+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
12+
13+
### How to run this application?
14+
15+
To run this application, you need to clone the `getting-started-with-the-angular-datetimepicker-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `ng serve` command.

‎angular.json‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"myangularproject": {
7+
"projectType": "application",
8+
"schematics": {
9+
"@schematics/angular:application": {
10+
"strict": true
11+
}
12+
},
13+
"root": "",
14+
"sourceRoot": "src",
15+
"prefix": "app",
16+
"architect": {
17+
"build": {
18+
"builder": "@angular-devkit/build-angular:browser",
19+
"options": {
20+
"outputPath": "dist/myangularproject",
21+
"index": "src/index.html",
22+
"main": "src/main.ts",
23+
"polyfills": "src/polyfills.ts",
24+
"tsConfig": "tsconfig.app.json",
25+
"assets": [
26+
"src/favicon.ico",
27+
"src/assets"
28+
],
29+
"styles": [
30+
"src/styles.css"
31+
],
32+
"scripts": []
33+
},
34+
"configurations": {
35+
"production": {
36+
"budgets": [
37+
{
38+
"type": "initial",
39+
"maximumWarning": "500kb",
40+
"maximumError": "1mb"
41+
},
42+
{
43+
"type": "anyComponentStyle",
44+
"maximumWarning": "2kb",
45+
"maximumError": "4kb"
46+
}
47+
],
48+
"fileReplacements": [
49+
{
50+
"replace": "src/environments/environment.ts",
51+
"with": "src/environments/environment.prod.ts"
52+
}
53+
],
54+
"outputHashing": "all"
55+
},
56+
"development": {
57+
"buildOptimizer": false,
58+
"optimization": false,
59+
"vendorChunk": true,
60+
"extractLicenses": false,
61+
"sourceMap": true,
62+
"namedChunks": true
63+
}
64+
},
65+
"defaultConfiguration": "production"
66+
},
67+
"serve": {
68+
"builder": "@angular-devkit/build-angular:dev-server",
69+
"configurations": {
70+
"production": {
71+
"browserTarget": "myangularproject:build:production"
72+
},
73+
"development": {
74+
"browserTarget": "myangularproject:build:development"
75+
}
76+
},
77+
"defaultConfiguration": "development"
78+
},
79+
"extract-i18n": {
80+
"builder": "@angular-devkit/build-angular:extract-i18n",
81+
"options": {
82+
"browserTarget": "myangularproject:build"
83+
}
84+
},
85+
"test": {
86+
"builder": "@angular-devkit/build-angular:karma",
87+
"options": {
88+
"main": "src/test.ts",
89+
"polyfills": "src/polyfills.ts",
90+
"tsConfig": "tsconfig.spec.json",
91+
"karmaConfig": "karma.conf.js",
92+
"assets": [
93+
"src/favicon.ico",
94+
"src/assets"
95+
],
96+
"styles": [
97+
"src/styles.css"
98+
],
99+
"scripts": []
100+
}
101+
}
102+
}
103+
}
104+
},
105+
"defaultProject": "myangularproject"
106+
}

‎karma.conf.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/1.0/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', '@angular-devkit/build-angular'],
8+
plugins: [
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-jasmine-html-reporter'),
12+
require('karma-coverage'),
13+
require('@angular-devkit/build-angular/plugins/karma')
14+
],
15+
client: {
16+
jasmine: {
17+
// you can add configuration options for Jasmine here
18+
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19+
// for example, you can disable the random execution with `random: false`
20+
// or set a specific seed with `seed: 4321`
21+
},
22+
clearContext: false // leave Jasmine Spec Runner output visible in browser
23+
},
24+
jasmineHtmlReporter: {
25+
suppressAll: true // removes the duplicated traces
26+
},
27+
coverageReporter: {
28+
dir: require('path').join(__dirname, './coverage/myangularproject'),
29+
subdir: '.',
30+
reporters: [
31+
{ type: 'html' },
32+
{ type: 'text-summary' }
33+
]
34+
},
35+
reporters: ['progress', 'kjhtml'],
36+
port: 9876,
37+
colors: true,
38+
logLevel: config.LOG_INFO,
39+
autoWatch: true,
40+
browsers: ['Chrome'],
41+
singleRun: false,
42+
restartOnFileChange: true
43+
});
44+
};

‎package.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "myangularproject",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/animations": "~13.3.0",
14+
"@angular/common": "~13.3.0",
15+
"@angular/compiler": "~13.3.0",
16+
"@angular/core": "~13.3.0",
17+
"@angular/forms": "~13.3.0",
18+
"@angular/platform-browser": "~13.3.0",
19+
"@angular/platform-browser-dynamic": "~13.3.0",
20+
"@angular/router": "~13.3.0",
21+
"@syncfusion/ej2-angular-calendars": "^20.1.52",
22+
"rxjs": "~7.5.0",
23+
"tslib": "^2.3.0",
24+
"zone.js": "~0.11.4"
25+
},
26+
"devDependencies": {
27+
"@angular-devkit/build-angular": "~13.3.5",
28+
"@angular/cli": "~13.3.5",
29+
"@angular/compiler-cli": "~13.3.0",
30+
"@types/jasmine": "~3.10.0",
31+
"@types/node": "^12.11.1",
32+
"jasmine-core": "~4.0.0",
33+
"karma": "~6.3.0",
34+
"karma-chrome-launcher": "~3.1.0",
35+
"karma-coverage": "~2.1.0",
36+
"karma-jasmine": "~4.0.0",
37+
"karma-jasmine-html-reporter": "~1.7.0",
38+
"typescript": "~4.6.2"
39+
}
40+
}

‎src/app/app.component.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="container">
2+
<ejs-datetimepicker
3+
placeholder="Choose a date and time"
4+
[value]="dateValue"
5+
[min]="minDate"
6+
[max]="maxDate"
7+
[enableMask]="true"
8+
format="dd-MMM-yy hh:mm">
9+
</ejs-datetimepicker>
10+
</div>
11+
12+
<style>
13+
.container{
14+
width: 250px;
15+
margin: 5% auto;
16+
}
17+
</style>

‎src/app/app.component.spec.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { TestBed } from '@angular/core/testing';
2+
import { RouterTestingModule } from '@angular/router/testing';
3+
import { AppComponent } from './app.component';
4+
5+
describe('AppComponent', () => {
6+
beforeEach(async () => {
7+
await TestBed.configureTestingModule({
8+
imports: [
9+
RouterTestingModule
10+
],
11+
declarations: [
12+
AppComponent
13+
],
14+
}).compileComponents();
15+
});
16+
17+
it('should create the app', () => {
18+
const fixture = TestBed.createComponent(AppComponent);
19+
const app = fixture.componentInstance;
20+
expect(app).toBeTruthy();
21+
});
22+
23+
it(`should have as title 'myangularproject'`, () => {
24+
const fixture = TestBed.createComponent(AppComponent);
25+
const app = fixture.componentInstance;
26+
expect(app.title).toEqual('myangularproject');
27+
});
28+
29+
it('should render title', () => {
30+
const fixture = TestBed.createComponent(AppComponent);
31+
fixture.detectChanges();
32+
const compiled = fixture.nativeElement as HTMLElement;
33+
expect(compiled.querySelector('.content span')?.textContent).toContain('myangularproject app is running!');
34+
});
35+
});

‎src/app/app.component.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-root',
5+
templateUrl: './app.component.html',
6+
styleUrls: ['./app.component.css']
7+
})
8+
export class AppComponent {
9+
title = 'myangularproject';
10+
public dateValue: Date = new Date("06/06/2022 15:30")
11+
public minDate: Date = new Date("06/06/2022 09:00")
12+
public maxDate: Date = new Date("06/10/2022 18:00")
13+
}

‎src/app/app.module.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { DateTimePickerModule, MaskedDateTimeService } from '@syncfusion/ej2-angular-calendars';
4+
import { AppComponent } from './app.component';
5+
6+
@NgModule({
7+
declarations: [
8+
AppComponent,
9+
],
10+
imports: [
11+
BrowserModule,
12+
DateTimePickerModule
13+
],
14+
providers: [MaskedDateTimeService],
15+
bootstrap: [AppComponent]
16+
})
17+
export class AppModule { }

‎src/environments/environment.prod.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const environment = {
2+
production: true
3+
};

‎src/environments/environment.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// This file can be replaced during build by using the `fileReplacements` array.
2+
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
3+
// The list of file replacements can be found in `angular.json`.
4+
5+
export const environment = {
6+
production: false
7+
};
8+
9+
/*
10+
* For easier debugging in development mode, you can import the following file
11+
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12+
*
13+
* This import should be commented out in production mode because it will have a negative impact
14+
* on performance if an error is thrown.
15+
*/
16+
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.

0 commit comments

Comments
 (0)