-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from vinoth-Kumar-S/main
Adding Angular DateTime Picker sample
- Loading branch information
Showing
19 changed files
with
484 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,15 @@ | ||
# getting-started-with-the-angular-datetimepicker-component | ||
# Getting Started with the Angular DateTime Picker Component | ||
|
||
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. | ||
|
||
Documentation: https://ej2.syncfusion.com/angular/documentation/datetimepicker/getting-started/ | ||
|
||
Online examples: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/datetimepicker/default | ||
|
||
## Project prerequisites | ||
|
||
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project. | ||
|
||
### How to run this application? | ||
|
||
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
{ | ||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", | ||
"version": 1, | ||
"newProjectRoot": "projects", | ||
"projects": { | ||
"myangularproject": { | ||
"projectType": "application", | ||
"schematics": { | ||
"@schematics/angular:application": { | ||
"strict": true | ||
} | ||
}, | ||
"root": "", | ||
"sourceRoot": "src", | ||
"prefix": "app", | ||
"architect": { | ||
"build": { | ||
"builder": "@angular-devkit/build-angular:browser", | ||
"options": { | ||
"outputPath": "dist/myangularproject", | ||
"index": "src/index.html", | ||
"main": "src/main.ts", | ||
"polyfills": "src/polyfills.ts", | ||
"tsConfig": "tsconfig.app.json", | ||
"assets": [ | ||
"src/favicon.ico", | ||
"src/assets" | ||
], | ||
"styles": [ | ||
"src/styles.css" | ||
], | ||
"scripts": [] | ||
}, | ||
"configurations": { | ||
"production": { | ||
"budgets": [ | ||
{ | ||
"type": "initial", | ||
"maximumWarning": "500kb", | ||
"maximumError": "1mb" | ||
}, | ||
{ | ||
"type": "anyComponentStyle", | ||
"maximumWarning": "2kb", | ||
"maximumError": "4kb" | ||
} | ||
], | ||
"fileReplacements": [ | ||
{ | ||
"replace": "src/environments/environment.ts", | ||
"with": "src/environments/environment.prod.ts" | ||
} | ||
], | ||
"outputHashing": "all" | ||
}, | ||
"development": { | ||
"buildOptimizer": false, | ||
"optimization": false, | ||
"vendorChunk": true, | ||
"extractLicenses": false, | ||
"sourceMap": true, | ||
"namedChunks": true | ||
} | ||
}, | ||
"defaultConfiguration": "production" | ||
}, | ||
"serve": { | ||
"builder": "@angular-devkit/build-angular:dev-server", | ||
"configurations": { | ||
"production": { | ||
"browserTarget": "myangularproject:build:production" | ||
}, | ||
"development": { | ||
"browserTarget": "myangularproject:build:development" | ||
} | ||
}, | ||
"defaultConfiguration": "development" | ||
}, | ||
"extract-i18n": { | ||
"builder": "@angular-devkit/build-angular:extract-i18n", | ||
"options": { | ||
"browserTarget": "myangularproject:build" | ||
} | ||
}, | ||
"test": { | ||
"builder": "@angular-devkit/build-angular:karma", | ||
"options": { | ||
"main": "src/test.ts", | ||
"polyfills": "src/polyfills.ts", | ||
"tsConfig": "tsconfig.spec.json", | ||
"karmaConfig": "karma.conf.js", | ||
"assets": [ | ||
"src/favicon.ico", | ||
"src/assets" | ||
], | ||
"styles": [ | ||
"src/styles.css" | ||
], | ||
"scripts": [] | ||
} | ||
} | ||
} | ||
} | ||
}, | ||
"defaultProject": "myangularproject" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
// Karma configuration file, see link for more information | ||
// https://karma-runner.github.io/1.0/config/configuration-file.html | ||
|
||
module.exports = function (config) { | ||
config.set({ | ||
basePath: '', | ||
frameworks: ['jasmine', '@angular-devkit/build-angular'], | ||
plugins: [ | ||
require('karma-jasmine'), | ||
require('karma-chrome-launcher'), | ||
require('karma-jasmine-html-reporter'), | ||
require('karma-coverage'), | ||
require('@angular-devkit/build-angular/plugins/karma') | ||
], | ||
client: { | ||
jasmine: { | ||
// you can add configuration options for Jasmine here | ||
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html | ||
// for example, you can disable the random execution with `random: false` | ||
// or set a specific seed with `seed: 4321` | ||
}, | ||
clearContext: false // leave Jasmine Spec Runner output visible in browser | ||
}, | ||
jasmineHtmlReporter: { | ||
suppressAll: true // removes the duplicated traces | ||
}, | ||
coverageReporter: { | ||
dir: require('path').join(__dirname, './coverage/myangularproject'), | ||
subdir: '.', | ||
reporters: [ | ||
{ type: 'html' }, | ||
{ type: 'text-summary' } | ||
] | ||
}, | ||
reporters: ['progress', 'kjhtml'], | ||
port: 9876, | ||
colors: true, | ||
logLevel: config.LOG_INFO, | ||
autoWatch: true, | ||
browsers: ['Chrome'], | ||
singleRun: false, | ||
restartOnFileChange: true | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
{ | ||
"name": "myangularproject", | ||
"version": "0.0.0", | ||
"scripts": { | ||
"ng": "ng", | ||
"start": "ng serve", | ||
"build": "ng build", | ||
"watch": "ng build --watch --configuration development", | ||
"test": "ng test" | ||
}, | ||
"private": true, | ||
"dependencies": { | ||
"@angular/animations": "~13.3.0", | ||
"@angular/common": "~13.3.0", | ||
"@angular/compiler": "~13.3.0", | ||
"@angular/core": "~13.3.0", | ||
"@angular/forms": "~13.3.0", | ||
"@angular/platform-browser": "~13.3.0", | ||
"@angular/platform-browser-dynamic": "~13.3.0", | ||
"@angular/router": "~13.3.0", | ||
"@syncfusion/ej2-angular-calendars": "^20.1.52", | ||
"rxjs": "~7.5.0", | ||
"tslib": "^2.3.0", | ||
"zone.js": "~0.11.4" | ||
}, | ||
"devDependencies": { | ||
"@angular-devkit/build-angular": "~13.3.5", | ||
"@angular/cli": "~13.3.5", | ||
"@angular/compiler-cli": "~13.3.0", | ||
"@types/jasmine": "~3.10.0", | ||
"@types/node": "^12.11.1", | ||
"jasmine-core": "~4.0.0", | ||
"karma": "~6.3.0", | ||
"karma-chrome-launcher": "~3.1.0", | ||
"karma-coverage": "~2.1.0", | ||
"karma-jasmine": "~4.0.0", | ||
"karma-jasmine-html-reporter": "~1.7.0", | ||
"typescript": "~4.6.2" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<div class="container"> | ||
<ejs-datetimepicker | ||
placeholder="Choose a date and time" | ||
[value]="dateValue" | ||
[min]="minDate" | ||
[max]="maxDate" | ||
[enableMask]="true" | ||
format="dd-MMM-yy hh:mm"> | ||
</ejs-datetimepicker> | ||
</div> | ||
|
||
<style> | ||
.container{ | ||
width: 250px; | ||
margin: 5% auto; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import { TestBed } from '@angular/core/testing'; | ||
import { RouterTestingModule } from '@angular/router/testing'; | ||
import { AppComponent } from './app.component'; | ||
|
||
describe('AppComponent', () => { | ||
beforeEach(async () => { | ||
await TestBed.configureTestingModule({ | ||
imports: [ | ||
RouterTestingModule | ||
], | ||
declarations: [ | ||
AppComponent | ||
], | ||
}).compileComponents(); | ||
}); | ||
|
||
it('should create the app', () => { | ||
const fixture = TestBed.createComponent(AppComponent); | ||
const app = fixture.componentInstance; | ||
expect(app).toBeTruthy(); | ||
}); | ||
|
||
it(`should have as title 'myangularproject'`, () => { | ||
const fixture = TestBed.createComponent(AppComponent); | ||
const app = fixture.componentInstance; | ||
expect(app.title).toEqual('myangularproject'); | ||
}); | ||
|
||
it('should render title', () => { | ||
const fixture = TestBed.createComponent(AppComponent); | ||
fixture.detectChanges(); | ||
const compiled = fixture.nativeElement as HTMLElement; | ||
expect(compiled.querySelector('.content span')?.textContent).toContain('myangularproject app is running!'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'app-root', | ||
templateUrl: './app.component.html', | ||
styleUrls: ['./app.component.css'] | ||
}) | ||
export class AppComponent { | ||
title = 'myangularproject'; | ||
public dateValue: Date = new Date("06/06/2022 15:30") | ||
public minDate: Date = new Date("06/06/2022 09:00") | ||
public maxDate: Date = new Date("06/10/2022 18:00") | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { BrowserModule } from '@angular/platform-browser'; | ||
import { DateTimePickerModule, MaskedDateTimeService } from '@syncfusion/ej2-angular-calendars'; | ||
import { AppComponent } from './app.component'; | ||
|
||
@NgModule({ | ||
declarations: [ | ||
AppComponent, | ||
], | ||
imports: [ | ||
BrowserModule, | ||
DateTimePickerModule | ||
], | ||
providers: [MaskedDateTimeService], | ||
bootstrap: [AppComponent] | ||
}) | ||
export class AppModule { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export const environment = { | ||
production: true | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
// This file can be replaced during build by using the `fileReplacements` array. | ||
// `ng build` replaces `environment.ts` with `environment.prod.ts`. | ||
// The list of file replacements can be found in `angular.json`. | ||
|
||
export const environment = { | ||
production: false | ||
}; | ||
|
||
/* | ||
* For easier debugging in development mode, you can import the following file | ||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. | ||
* | ||
* This import should be commented out in production mode because it will have a negative impact | ||
* on performance if an error is thrown. | ||
*/ | ||
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Myangularproject</title> | ||
<base href="/"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<link rel="icon" type="image/x-icon" href="favicon.ico"> | ||
</head> | ||
<body> | ||
<app-root></app-root> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { enableProdMode } from '@angular/core'; | ||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; | ||
import {registerLicense} from '@syncfusion/ej2-base'; | ||
import { AppModule } from './app/app.module'; | ||
import { environment } from './environments/environment'; | ||
|
||
registerLicense("ORg4AjUWIQA/Gnt2VVhhQlFac11JW3xNYVF2R2FJe1RzdF9DZkwgOX1dQl9hSXtTcEVhWndceXFdQmY="); | ||
if (environment.production) { | ||
enableProdMode(); | ||
} | ||
|
||
platformBrowserDynamic().bootstrapModule(AppModule) | ||
.catch(err => console.error(err)); |
Oops, something went wrong.