├── src ├── app │ ├── appstyles.scss │ ├── examples │ │ ├── views │ │ │ ├── timepicker.html │ │ │ ├── basic.html │ │ │ ├── rangepicker.html │ │ │ └── usingwithforms.html │ │ ├── datetimepicker.ts │ │ ├── simpledatepicker.ts │ │ ├── datepicker.ts │ │ ├── rangepicker.ts │ │ └── usingWithForms.ts │ ├── angular2-datetimepicker │ │ ├── model.ts │ │ ├── index.ts │ │ ├── interface.ts │ │ ├── datepicker.module.ts │ │ ├── clickOutside.ts │ │ ├── rangepicker.scss │ │ ├── datepicker.component.ts │ │ ├── datepicker.component.html │ │ └── datepicker.component.scss │ ├── app.component.css │ ├── app.component.ts │ ├── app.component.html │ ├── app.component.spec.ts │ ├── adsense.component.ts │ ├── app.router.ts │ └── app.module.ts ├── assets │ ├── .gitkeep │ └── images │ │ ├── coffee11.png │ │ ├── coffee14.png │ │ ├── sand-background.jpg │ │ └── cuppa-logo-coffee11.png ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── typings.d.ts ├── tsconfig.app.json ├── main.ts ├── tsconfig.spec.json ├── test.ts ├── styles.css ├── polyfills.ts └── index.html ├── npm-debug.log.1078121941 ├── docs ├── favicon.ico ├── assets │ └── images │ │ ├── coffee11.png │ │ ├── coffee14.png │ │ ├── sand-background.jpg │ │ └── cuppa-logo-coffee11.png ├── fontawesome-webfont.674f50d287a8c48dc19b.eot ├── fontawesome-webfont.b06871f281fee6b241d6.ttf ├── fontawesome-webfont.af7ae505a9eed503f8b8.woff2 ├── fontawesome-webfont.fee66e712a8a08eef580.woff ├── index.html ├── inline.bundle.js.map └── inline.bundle.js ├── e2e ├── tsconfig.e2e.json ├── app.e2e-spec.ts └── app.po.ts ├── .editorconfig ├── tsconfig.json ├── .gitignore ├── tsconfig-aot.json ├── protractor.conf.js ├── karma.conf.js ├── .angular-cli.json ├── webpack-test.config.ts ├── gulpfile.js ├── webpack-umd.config.ts ├── tslint.json ├── package.json ├── inline-resources.js └── README.md /src/app/appstyles.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /npm-debug.log.1078121941: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/examples/views/timepicker.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-datetimepicker/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-datetimepicker/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /docs/assets/images/coffee11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-datetimepicker/HEAD/docs/assets/images/coffee11.png -------------------------------------------------------------------------------- /docs/assets/images/coffee14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-datetimepicker/HEAD/docs/assets/images/coffee14.png -------------------------------------------------------------------------------- /src/assets/images/coffee11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-datetimepicker/HEAD/src/assets/images/coffee11.png -------------------------------------------------------------------------------- /src/assets/images/coffee14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-datetimepicker/HEAD/src/assets/images/coffee14.png -------------------------------------------------------------------------------- /src/app/angular2-datetimepicker/model.ts: -------------------------------------------------------------------------------- 1 | export class DateRange { 2 | startDate: Date; 3 | endDate: Date; 4 | constructor(){} 5 | } -------------------------------------------------------------------------------- /src/assets/images/sand-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-datetimepicker/HEAD/src/assets/images/sand-background.jpg -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /docs/assets/images/sand-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-datetimepicker/HEAD/docs/assets/images/sand-background.jpg -------------------------------------------------------------------------------- /docs/assets/images/cuppa-logo-coffee11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-datetimepicker/HEAD/docs/assets/images/cuppa-logo-coffee11.png -------------------------------------------------------------------------------- /src/assets/images/cuppa-logo-coffee11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-datetimepicker/HEAD/src/assets/images/cuppa-logo-coffee11.png -------------------------------------------------------------------------------- /src/app/angular2-datetimepicker/index.ts: -------------------------------------------------------------------------------- 1 | export { DatePicker } from './datepicker.component'; 2 | export { AngularDateTimePickerModule } from './datepicker.module'; -------------------------------------------------------------------------------- /docs/fontawesome-webfont.674f50d287a8c48dc19b.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-datetimepicker/HEAD/docs/fontawesome-webfont.674f50d287a8c48dc19b.eot -------------------------------------------------------------------------------- /docs/fontawesome-webfont.b06871f281fee6b241d6.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-datetimepicker/HEAD/docs/fontawesome-webfont.b06871f281fee6b241d6.ttf -------------------------------------------------------------------------------- /docs/fontawesome-webfont.af7ae505a9eed503f8b8.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-datetimepicker/HEAD/docs/fontawesome-webfont.af7ae505a9eed503f8b8.woff2 -------------------------------------------------------------------------------- /docs/fontawesome-webfont.fee66e712a8a08eef580.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-datetimepicker/HEAD/docs/fontawesome-webfont.fee66e712a8a08eef580.woff -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "node" 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { Angular2DatepickerPage } from './app.po'; 2 | 3 | describe('angular2-datetimepicker App', () => { 4 | let page: Angular2DatepickerPage; 5 | 6 | beforeEach(() => { 7 | page = new Angular2DatepickerPage(); 8 | }); 9 | 10 | 11 | }); 12 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class Angular2DatepickerPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/examples/views/basic.html: -------------------------------------------------------------------------------- 1 |

{{title}}

2 |
3 | 4 | 5 |
6 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "es2015", 6 | "baseUrl": "", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .left-sidebar, .right-sidebar { 2 | width: 330px; 3 | max-width: 330px; 4 | min-width: 330px; 5 | } 6 | .outer-wrapper { 7 | padding: 30px; 8 | } 9 | .center-content{ 10 | background: #ffffff; 11 | border: 1px solid rgba(0,0,0,.125); 12 | border-radius: 3px; 13 | padding: 15px; 14 | } 15 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule); 12 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "baseUrl": "", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | }, 13 | "files": [ 14 | "test.ts" 15 | ], 16 | "include": [ 17 | "**/*.spec.ts", 18 | "**/*.d.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /src/app/angular2-datetimepicker/interface.ts: -------------------------------------------------------------------------------- 1 | export interface Settings{ 2 | bigBanner?: Boolean; 3 | timePicker: Boolean; 4 | format: string; 5 | defaultOpen?: Boolean; 6 | cal_days_labels: Array; 7 | cal_full_days_lables: Array; 8 | cal_months_labels: Array; 9 | cal_months_labels_short: Array; 10 | closeOnSelect?: boolean; 11 | rangepicker?: boolean; 12 | } -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /src/app/examples/views/rangepicker.html: -------------------------------------------------------------------------------- 1 |

{{title}}

2 | 5 |
6 | 7 | 8 | 9 |
10 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "baseUrl": "src", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "moduleResolution": "node", 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "target": "es5", 12 | "typeRoots": [ 13 | "node_modules/@types" 14 | ], 15 | "lib": [ 16 | "es2016", 17 | "dom" 18 | ] 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/angular2-datetimepicker/datepicker.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { DatePicker } from './datepicker.component'; 4 | import { FormsModule } from '@angular/forms'; 5 | import { ClickOutsideDirective } from './clickOutside'; 6 | @NgModule({ 7 | imports: [CommonModule,FormsModule], 8 | declarations: [DatePicker, ClickOutsideDirective], 9 | exports: [DatePicker,FormsModule, ClickOutsideDirective] 10 | }) 11 | export class AngularDateTimePickerModule{ 12 | 13 | } -------------------------------------------------------------------------------- /src/app/examples/datetimepicker.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit } from '@angular/core'; 2 | 3 | @Component({ 4 | template: ` 5 | 6 | ` 7 | }) 8 | export class DateTimePickerExample implements OnInit { 9 | date: Date = new Date(); 10 | settings = { 11 | bigBanner: true, 12 | timePicker: true, 13 | format: 'dd-MM-yyyy hh:mm', 14 | defaultOpen: true 15 | } 16 | constructor(){ 17 | 18 | } 19 | ngOnInit(){ 20 | 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/app/examples/simpledatepicker.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit } from '@angular/core'; 2 | 3 | @Component({ 4 | template: ` 5 | 6 | ` 7 | }) 8 | export class SimpleDatePickerExample implements OnInit { 9 | date: Date = new Date(); 10 | settings = { 11 | bigBanner: false, 12 | timePicker: false, 13 | format: 'dd-MM-yyyy', 14 | defaultOpen: true 15 | } 16 | constructor(){ 17 | 18 | } 19 | ngOnInit(){ 20 | 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css', './appstyles.scss'] 7 | }) 8 | export class AppComponent implements OnInit, AfterViewInit { 9 | date: Date = new Date(); 10 | settings = { 11 | bigBanner: true, 12 | timePicker: true, 13 | format: 'dd-MM-yyyy', 14 | defaultOpen: true 15 | } 16 | constructor() { 17 | 18 | } 19 | ngAfterViewInit() { 20 | 21 | } 22 | ngOnInit() { 23 | 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/app/examples/datepicker.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: './views/basic.html' 5 | }) 6 | export class DatePickerExample implements OnInit { 7 | date: any = '04-18-1990'; 8 | settings = { 9 | bigBanner: true, 10 | timePicker: false, 11 | format: 'dd-MM-yyyy', 12 | defaultOpen: true, 13 | closeOnSelect: false, 14 | rangepicker: false 15 | } 16 | constructor() { 17 | 18 | } 19 | onDateSelect(date: any){ 20 | console.log(date); 21 | } 22 | ngOnInit() { 23 | 24 | } 25 | title: string = "Basic Example"; 26 | } 27 | -------------------------------------------------------------------------------- /src/app/examples/rangepicker.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: './views/rangepicker.html' 5 | }) 6 | export class DateRangePickerExample implements OnInit { 7 | date: any = {startDate: new Date('04-18-1990'), endDate: new Date('04-20-2017')}; 8 | settings = { 9 | bigBanner: true, 10 | timePicker: false, 11 | format: 'dd-MM-yyyy', 12 | defaultOpen: true, 13 | closeOnSelect: false, 14 | rangepicker: true 15 | } 16 | constructor() { 17 | 18 | } 19 | onDateSelect(date: any){ 20 | console.log(date); 21 | } 22 | ngOnInit() { 23 | 24 | } 25 | title: string = "Range picker Example"; 26 | } 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | testem.log 34 | /typings 35 | 36 | # e2e 37 | /e2e/*.js 38 | /e2e/*.map 39 | 40 | # System Files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /src/app/angular2-datetimepicker/clickOutside.ts: -------------------------------------------------------------------------------- 1 | import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[clickOutside]' 5 | }) 6 | export class ClickOutsideDirective { 7 | constructor(private _elementRef: ElementRef) { 8 | } 9 | 10 | @Output() 11 | public clickOutside = new EventEmitter(); 12 | 13 | @HostListener('document:click', ['$event', '$event.target']) 14 | public onClick(event: MouseEvent, targetElement: HTMLElement): void { 15 | if (!targetElement) { 16 | return; 17 | } 18 | 19 | const clickedInside = this._elementRef.nativeElement.contains(targetElement); 20 | if (!clickedInside) { 21 | this.clickOutside.emit(event); 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/app/examples/usingWithForms.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: './views/usingwithforms.html' 5 | }) 6 | export class UsingWithFormExample implements OnInit { 7 | title: string = "Using with angular forms"; 8 | formModel = { 9 | name: '', 10 | dob: new Date(), 11 | }; 12 | dobSettings = { 13 | bigBanner: false, 14 | timePicker: true, 15 | format: 'dd-MM-yyyy hh:mm', 16 | defaultOpen: true, 17 | closeOnSelect: true, 18 | rangepicker: false 19 | 20 | } 21 | constructor() { 22 | 23 | } 24 | onDateSelect(date: any) { 25 | console.log(date); 26 | } 27 | ngOnInit() { 28 | 29 | } 30 | submitted = false; 31 | onSubmit() { this.submitted = true; } 32 | 33 | } 34 | -------------------------------------------------------------------------------- /tsconfig-aot.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["es2015", "es2017", "dom"], 5 | "module": "es2015", 6 | "moduleResolution": "node", 7 | "sourceMap": true, 8 | "declaration": true, 9 | "removeComments": false, 10 | "noImplicitAny": true, 11 | "experimentalDecorators": true, 12 | "emitDecoratorMetadata": true, 13 | "allowUnreachableCode": false, 14 | "allowUnusedLabels": false, 15 | "pretty": true, 16 | "stripInternal": true, 17 | "skipLibCheck": true, 18 | "outDir": "dist", 19 | "rootDir": "./tmp/src-inlined" 20 | }, 21 | "files": [ 22 | "./tmp/src-inlined/index.ts" 23 | ], 24 | "angularCompilerOptions": { 25 | "genDir": "dist", 26 | "debug": false, 27 | "skipTemplateCodegen": true, 28 | "skipMetadataEmit": false, 29 | "strictMetadataEmit": true 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | beforeLaunch: function() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | }, 27 | onPrepare() { 28 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | Examples 6 | 7 | Date picker 8 | Date Time picker 9 | Range picker 10 | Simple 11 | Using with forms 12 |
13 |
14 |
15 | 16 |
17 |
18 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | }).compileComponents(); 12 | })); 13 | 14 | it('should create the app', async(() => { 15 | const fixture = TestBed.createComponent(AppComponent); 16 | const app = fixture.debugElement.componentInstance; 17 | expect(app).toBeTruthy(); 18 | })); 19 | 20 | it(`should have as title 'app works!'`, async(() => { 21 | const fixture = TestBed.createComponent(AppComponent); 22 | const app = fixture.debugElement.componentInstance; 23 | expect(app.title).toEqual('app works!'); 24 | })); 25 | 26 | it('should render title in a h1 tag', async(() => { 27 | const fixture = TestBed.createComponent(AppComponent); 28 | fixture.detectChanges(); 29 | const compiled = fixture.debugElement.nativeElement; 30 | expect(compiled.querySelector('h1').textContent).toContain('app works!'); 31 | })); 32 | }); 33 | -------------------------------------------------------------------------------- /src/app/adsense.component.ts: -------------------------------------------------------------------------------- 1 | import {Component,OnInit,AfterViewInit, Input} from '@angular/core' 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'google-adsense', 6 | template: `
7 | 11 |
12 |
13 | `, 14 | 15 | }) 16 | 17 | export class AdsenseComponent implements OnInit, AfterViewInit { 18 | 19 | adconfig:any = {}; 20 | @Input() 21 | settings: any; 22 | 23 | constructor() { 24 | } 25 | ngOnInit(){ 26 | this.adconfig = Object.assign(this.adconfig, this.settings); 27 | } 28 | ngAfterViewInit() { 29 | setTimeout(()=>{ 30 | try{ 31 | (window['adsbygoogle'] = window['adsbygoogle'] || []).push({}); 32 | }catch(e){ 33 | console.error("error"); 34 | } 35 | },2000); 36 | } 37 | } -------------------------------------------------------------------------------- /src/app/app.router.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule, Routes } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { DatePickerExample } from './examples/datepicker'; 6 | import { DateTimePickerExample } from './examples/datetimepicker'; 7 | import { SimpleDatePickerExample } from './examples/simpledatepicker'; 8 | import { UsingWithFormExample } from './examples/usingWithForms'; 9 | import { DateRangePickerExample } from './examples/rangepicker'; 10 | 11 | const appRoutes: Routes = [ 12 | { path: '', redirectTo: '/datepicker',pathMatch: 'full'}, 13 | { path: 'datepicker', component: DatePickerExample}, 14 | { path: 'datetimepicker', component: DateTimePickerExample}, 15 | { path: 'simpledatepicker', component: SimpleDatePickerExample}, 16 | { path: 'usinginform', component: UsingWithFormExample}, 17 | { path: 'rangepicker', component: DateRangePickerExample} 18 | 19 | ]; 20 | 21 | 22 | @NgModule({ 23 | imports: [ 24 | RouterModule.forRoot(appRoutes, { useHash: true }) 25 | ], 26 | exports: [ 27 | RouterModule 28 | ] 29 | 30 | }) 31 | export class AppRouterModule { } -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare var __karma__: any; 17 | declare var require: any; 18 | 19 | // Prevent Karma from running prematurely. 20 | __karma__.loaded = function () {}; 21 | 22 | // First, initialize the Angular testing environment. 23 | getTestBed().initTestEnvironment( 24 | BrowserDynamicTestingModule, 25 | platformBrowserDynamicTesting() 26 | ); 27 | // Then we find all the tests. 28 | const context = require.context('./', true, /\.spec\.ts$/); 29 | // And load the modules. 30 | context.keys().map(context); 31 | // Finally, start Karma to run the tests. 32 | __karma__.start(); 33 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { AppComponent } from './app.component'; 6 | import { AngularDateTimePickerModule } from './angular2-datetimepicker/datepicker.module'; 7 | import { AdsenseComponent } from './adsense.component'; 8 | import { DatePickerExample } from './examples/datepicker'; 9 | import { DateTimePickerExample } from './examples/datetimepicker'; 10 | import { SimpleDatePickerExample } from './examples/simpledatepicker'; 11 | import { UsingWithFormExample } from './examples/usingWithForms'; 12 | import { DateRangePickerExample } from './examples/rangepicker'; 13 | import { AppRouterModule } from './app.router'; 14 | 15 | 16 | @NgModule({ 17 | declarations: [ 18 | AppComponent, 19 | AdsenseComponent, 20 | DatePickerExample, 21 | DateTimePickerExample, 22 | SimpleDatePickerExample, 23 | UsingWithFormExample, 24 | DateRangePickerExample 25 | ], 26 | imports: [ 27 | AngularDateTimePickerModule, 28 | BrowserModule, 29 | FormsModule, 30 | AppRouterModule], 31 | providers: [], 32 | bootstrap: [AppComponent] 33 | }) 34 | export class AppModule { } -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular/cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular/cli/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | files: [ 19 | { pattern: './src/test.ts', watched: false } 20 | ], 21 | preprocessors: { 22 | './src/test.ts': ['@angular/cli'] 23 | }, 24 | mime: { 25 | 'text/x-typescript': ['ts','tsx'] 26 | }, 27 | coverageIstanbulReporter: { 28 | reports: [ 'html', 'lcovonly' ], 29 | fixWebpackSourcePaths: true 30 | }, 31 | angularCli: { 32 | environment: 'dev' 33 | }, 34 | reporters: config.angularCli && config.angularCli.codeCoverage 35 | ? ['progress', 'coverage-istanbul'] 36 | : ['progress', 'kjhtml'], 37 | port: 9876, 38 | colors: true, 39 | logLevel: config.LOG_INFO, 40 | autoWatch: true, 41 | browsers: ['Chrome'], 42 | singleRun: false 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "angular2-datetimepicker" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "docs", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "test": "test.ts", 18 | "tsconfig": "tsconfig.app.json", 19 | "testTsconfig": "tsconfig.spec.json", 20 | "prefix": "app", 21 | "styles": [ 22 | "styles.css","main.css","../node_modules/font-awesome/css/font-awesome.min.css" 23 | ], 24 | "scripts": [], 25 | "environmentSource": "environments/environment.ts", 26 | "environments": { 27 | "dev": "environments/environment.ts", 28 | "prod": "environments/environment.prod.ts" 29 | } 30 | } 31 | ], 32 | "e2e": { 33 | "protractor": { 34 | "config": "./protractor.conf.js" 35 | } 36 | }, 37 | "lint": [ 38 | { 39 | "project": "src/tsconfig.app.json" 40 | }, 41 | { 42 | "project": "src/tsconfig.spec.json" 43 | }, 44 | { 45 | "project": "e2e/tsconfig.e2e.json" 46 | } 47 | ], 48 | "test": { 49 | "karma": { 50 | "config": "./karma.conf.js" 51 | } 52 | }, 53 | "defaults": { 54 | "styleExt": "css", 55 | "component": {} 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /webpack-test.config.ts: -------------------------------------------------------------------------------- 1 | import * as webpack from 'webpack'; 2 | import * as path from 'path'; 3 | 4 | export default { 5 | resolve: { 6 | extensions: [ '.ts', '.js', '.json' ] 7 | }, 8 | module: { 9 | rules: [ 10 | { 11 | test: /\.ts$/, 12 | use: [ 13 | { 14 | loader: 'awesome-typescript-loader', 15 | options: { 16 | configFileName: 'tsconfig.json' 17 | } 18 | }, 19 | { 20 | loader: 'angular2-template-loader' 21 | } 22 | ], 23 | exclude: [ 24 | /\.e2e\.ts$/, 25 | /node_modules/ 26 | ] 27 | }, 28 | 29 | { 30 | test: /.ts$/, 31 | exclude: /(node_modules|\.spec\.ts|\.e2e\.ts$)/, 32 | loader: 'istanbul-instrumenter-loader', 33 | enforce: 'post' 34 | }, 35 | 36 | { 37 | test: /\.json$/, 38 | use: 'json-loader' 39 | }, 40 | 41 | { 42 | test: /\.css$/, 43 | use: ['to-string-loader', 'css-loader'] 44 | }, 45 | 46 | { 47 | test: /\.scss$/, 48 | use: ['to-string-loader', 'css-loader', 'sass-loader'] 49 | }, 50 | 51 | { 52 | test: /\.html$/, 53 | use: 'raw-loader' 54 | } 55 | ] 56 | }, 57 | plugins: [ 58 | new webpack.SourceMapDevToolPlugin({ 59 | filename: null, 60 | test: /\.(ts|js)($|\?)/i 61 | }), 62 | 63 | new webpack.ContextReplacementPlugin( 64 | /angular(\\|\/)core(\\|\/)@angular/, 65 | path.join(__dirname, 'src') 66 | ), 67 | 68 | new webpack.NoEmitOnErrorsPlugin() 69 | ] 70 | } as webpack.Configuration; 71 | -------------------------------------------------------------------------------- /src/app/examples/views/usingwithforms.html: -------------------------------------------------------------------------------- 1 |

{{title}}

2 |
3 |
4 |
5 |
6 | 7 | 9 |
10 |
Name is required
11 |
Only alphabetsallowed
12 | 13 |
14 |
15 |
16 | 17 | * required 18 | 21 | 22 | 26 |
27 | 28 |
29 |
30 |
31 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const sass = require('node-sass'); 3 | const inlineTemplates = require('gulp-inline-ng2-template'); 4 | const exec = require('child_process').exec; 5 | 6 | /** 7 | * Inline templates configuration. 8 | * @see https://github.com/ludohenin/gulp-inline-ng2-template 9 | */ 10 | const INLINE_TEMPLATES = { 11 | SRC: './src/app/angular2-datetimepicker/*.ts', 12 | DIST: './tmp/src-inlined', 13 | CONFIG: { 14 | base: '/src/app/angular2-datetimepicker', 15 | target: 'es6', 16 | useRelativePaths: true, 17 | styleProcessor: compileSass 18 | } 19 | }; 20 | 21 | /** 22 | * Inline external HTML and SCSS templates into Angular component files. 23 | * @see: https://github.com/ludohenin/gulp-inline-ng2-template 24 | */ 25 | gulp.task('inline-templates', () => { 26 | return gulp.src(INLINE_TEMPLATES.SRC) 27 | .pipe(inlineTemplates(INLINE_TEMPLATES.CONFIG)) 28 | .pipe(gulp.dest(INLINE_TEMPLATES.DIST)); 29 | }); 30 | 31 | /** 32 | * Build ESM by running npm task. 33 | * This is a temporary solution until ngc is supported --watch mode. 34 | * @see: https://github.com/angular/angular/issues/12867 35 | */ 36 | gulp.task('build:esm', ['inline-templates'], (callback) => { 37 | exec('npm run ngcompile', function (error, stdout, stderr) { 38 | console.log(stdout, stderr); 39 | callback(error) 40 | }); 41 | }); 42 | 43 | /** 44 | * Implements ESM build watch mode. 45 | * This is a temporary solution until ngc is supported --watch mode. 46 | * @see: https://github.com/angular/angular/issues/12867 47 | */ 48 | gulp.task('build:esm:watch', ['build:esm'], () => { 49 | gulp.watch('src/**/*', ['build:esm']); 50 | }); 51 | 52 | gulp.task('copy', () => { 53 | return gulp.src(['package.json','LICENSE','README.md']) 54 | .pipe(gulp.dest('dist/')); 55 | }); 56 | 57 | /** 58 | * Compile SASS to CSS. 59 | * @see https://github.com/ludohenin/gulp-inline-ng2-template 60 | * @see https://github.com/sass/node-sass 61 | */ 62 | function compileSass(path, ext, file, callback) { 63 | let compiledCss = sass.renderSync({ 64 | data: file, 65 | outputStyle: 'compressed', 66 | }); 67 | callback(null, compiledCss.css); 68 | } 69 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | body{ 3 | background-color: rgb(246, 246, 246) !important; 4 | } 5 | .navbar-default{ 6 | border-radius: 0px !important; 7 | background-color: #fff !important; 8 | margin: 0px !important; 9 | } 10 | .example-title{ 11 | border-bottom: 2px solid #ccc; 12 | margin-bottom: 75px; 13 | } 14 | .row{ 15 | margin: 0px !important; 16 | margin-bottom: 20px !important; 17 | } 18 | .navbar-brand>img { 19 | height: 32px; 20 | margin-top: -6px; 21 | } 22 | .component-title{ 23 | font-size: 18px; 24 | color: #333 !important; 25 | } 26 | .jumbotron{ 27 | text-align: center; 28 | color: #fff !important; 29 | } 30 | .jumbotron h1{ 31 | text-shadow: 1px 1px 0px #7d7d7d; 32 | } 33 | h4{ 34 | color: #686868; 35 | } 36 | @media screen and (min-width: 768px){ 37 | .jumbotron{ 38 | padding-top: 15px !important; 39 | padding-bottom: 15px !important; 40 | margin: 0px; 41 | background: none !important; 42 | } 43 | .jumbotron .h1, .jumbotron h1{ 44 | font-size: 42px !important; 45 | color: #fff !important; 46 | } 47 | } 48 | .code-section { 49 | margin-top: 100px; 50 | margin-bottom: 10px; 51 | } 52 | .ui-tabview-nav { 53 | background: #007bff !important; 54 | } 55 | .ui-tabview .ui-tabview-nav > li.ui-state-default { 56 | background: #007bff !important; 57 | } 58 | .ui-state-default a { 59 | color: #fff !important; 60 | } 61 | .ui-tabview .ui-tabview-nav > li.ui-state-active { 62 | background: #fff !important; 63 | } 64 | .ui-tabview .ui-tabview-nav > li.ui-state-active > a{ 65 | color: #333 !important; 66 | } 67 | .ui-tabview-panel { 68 | padding: 0px !important; 69 | margin: 0px -7px; 70 | } 71 | .custom-class-example { 72 | color: #ccc; 73 | } 74 | .custom-class-example .c-token{ 75 | background: #38d574 !important; 76 | } 77 | .custom-class-example .pure-checkbox label::before { 78 | border-color: #38d574 !important; 79 | } 80 | .custom-class-example .pure-checkbox input[type="checkbox"]:checked + label[_ngcontent-c1]:before { 81 | background: #38d574 !important; 82 | } 83 | .outer-wrapper { 84 | margin-top: 15px; 85 | } 86 | .dropdown-container { 87 | height: 170px; 88 | } -------------------------------------------------------------------------------- /webpack-umd.config.ts: -------------------------------------------------------------------------------- 1 | import * as webpack from 'webpack'; 2 | import * as path from 'path'; 3 | import * as fs from 'fs'; 4 | import * as angularExternals from 'webpack-angular-externals'; 5 | import * as rxjsExternals from 'webpack-rxjs-externals'; 6 | 7 | const pkg = JSON.parse(fs.readFileSync('./package.json').toString()); 8 | 9 | export default { 10 | entry: { 11 | 'index.umd': './src/app/angular2-datetimepicker/index.ts', 12 | 'index.umd.min': './src/app/angular2-datetimepicker/index.ts' 13 | }, 14 | output: { 15 | path: path.join(__dirname, 'dist'), 16 | filename: '[name].js', 17 | libraryTarget: 'umd', 18 | library: 'ticktock' 19 | }, 20 | resolve: { 21 | extensions: [ '.ts', '.js', '.json' ] 22 | }, 23 | externals: [ 24 | angularExternals(), 25 | rxjsExternals() 26 | ], 27 | devtool: 'source-map', 28 | module: { 29 | rules: [ 30 | { 31 | test: /\.ts$/, 32 | use: [ 33 | { 34 | loader: 'awesome-typescript-loader', 35 | options: { 36 | configFileName: 'tsconfig.json' 37 | } 38 | }, 39 | { 40 | loader: 'angular2-template-loader' 41 | } 42 | ], 43 | exclude: [ 44 | /node_modules/, 45 | /\.(spec|e2e)\.ts$/ 46 | ] 47 | }, 48 | 49 | { 50 | test: /\.json$/, 51 | use: 'json-loader' 52 | }, 53 | 54 | { 55 | test: /\.css$/, 56 | use: ['to-string-loader', 'css-loader'] 57 | }, 58 | 59 | { 60 | test: /\.scss$/, 61 | use: ['to-string-loader', 'css-loader', 'sass-loader'] 62 | }, 63 | 64 | { 65 | test: /\.html$/, 66 | use: 'raw-loader' 67 | } 68 | ] 69 | }, 70 | plugins: [ 71 | new webpack.ContextReplacementPlugin( 72 | /angular(\\|\/)core(\\|\/)@angular/, 73 | path.join(__dirname, 'src') 74 | ), 75 | 76 | new webpack.optimize.UglifyJsPlugin({ 77 | include: /\.min\.js$/, 78 | sourceMap: true 79 | }), 80 | 81 | new webpack.BannerPlugin({ 82 | banner: ` 83 | /** 84 | * ${pkg.name} - ${pkg.description} 85 | * @version v${pkg.version} 86 | * @author ${pkg.author.name} 87 | * @link ${pkg.homepage} 88 | * @license ${pkg.license} 89 | */ 90 | `.trim(), 91 | raw: true, 92 | entryOnly: true 93 | }) 94 | 95 | ] 96 | } as webpack.Configuration; 97 | -------------------------------------------------------------------------------- /src/app/angular2-datetimepicker/rangepicker.scss: -------------------------------------------------------------------------------- 1 | .range-banner{ 2 | background: #ffffff; 3 | width: 100%; 4 | float: left; 5 | display: flex; 6 | flex-direction: row; 7 | flex-wrap: nowrap; 8 | padding: 25px 15px 10px 15px; 9 | } 10 | .range-input { 11 | display: flex; 12 | flex-direction: row; 13 | min-width: 275px; 14 | } 15 | .wc-date-container { 16 | position: relative; 17 | } 18 | .range-direc { 19 | position: absolute; 20 | right: -8px; 21 | background: #fff; 22 | z-index: 1; 23 | color: #ccc !important; 24 | font-size: 16px !important; 25 | top: 6px; 26 | } 27 | .to-input { 28 | padding-left: 15px; 29 | } 30 | .arrow-right { 31 | padding: 0px 20px; 32 | } 33 | .arrow-right .fa { 34 | font-size: 2em; 35 | color: #1565c0; 36 | } 37 | .wc-banner-col { 38 | /*flex-grow: 1;*/ 39 | display: flex; 40 | color: #1565c0; 41 | flex-direction: row; 42 | align-items: center; 43 | flex-wrap: wrap; 44 | position: relative; 45 | } 46 | .wc-banner-col label{ 47 | width: 100%; 48 | text-align: left; 49 | margin: 0px; 50 | position: absolute; 51 | top: -10px; 52 | color: #888888; 53 | } 54 | .wc-day { 55 | font-size: 3em; 56 | font-weight: 300; 57 | padding-right: 5px; 58 | } 59 | .wc-my { 60 | display: flex; 61 | align-items: baseline; 62 | flex-direction: column; 63 | } 64 | .wc-month { 65 | font-size: 1.2em; 66 | margin-top: -5px; 67 | color: #888888; 68 | } 69 | .wc-year { 70 | font-size: 0.9em; 71 | font-weight: 300; 72 | margin-top: -1px; 73 | color: #6e6e6e; 74 | } 75 | .dp-left-section, .dp-right-section{ 76 | border-top: 1px solid #fff; 77 | } 78 | .dp-left-section { 79 | border-right: 1px solid #ccc; 80 | } 81 | .range-date-popover { 82 | border: 1px solid #1565c0; 83 | background: #fff; 84 | } 85 | @media (min-width: 768px){ 86 | .range-banner .wc-banner { 87 | width: 30%; 88 | } 89 | .range-date-popover { 90 | width: 500px; 91 | position: absolute; 92 | top: 31px; 93 | height: auto; 94 | left: 0; 95 | -webkit-transform: translateX(0); 96 | transform: translateX(0); 97 | } 98 | .dp-left-section, .dp-right-section{ 99 | float: left; 100 | width: 50%; 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/set'; 35 | 36 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 37 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 38 | 39 | /** IE10 and IE11 requires the following to support `@angular/animation`. */ 40 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 41 | 42 | 43 | /** Evergreen browsers require these. **/ 44 | import 'core-js/es6/reflect'; 45 | import 'core-js/es7/reflect'; 46 | 47 | 48 | /** ALL Firefox browsers require the following to support `@angular/animation`. **/ 49 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 50 | 51 | 52 | 53 | /*************************************************************************************************** 54 | * Zone JS is required by Angular itself. 55 | */ 56 | import 'zone.js/dist/zone'; // Included with Angular CLI. 57 | 58 | 59 | 60 | /*************************************************************************************************** 61 | * APPLICATION IMPORTS 62 | */ 63 | 64 | /** 65 | * Date, currency, decimal and percent pipes. 66 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 67 | */ 68 | // import 'intl'; // Run `npm install --save intl`. 69 | /** 70 | * Need to import at least one locale-data with intl. 71 | */ 72 | // import 'intl/locale-data/jsonp/en'; 73 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "callable-types": true, 7 | "class-name": true, 8 | "comment-format": [ 9 | true, 10 | "check-space" 11 | ], 12 | "curly": true, 13 | "eofline": true, 14 | "forin": true, 15 | "import-blacklist": [ 16 | true, 17 | "rxjs" 18 | ], 19 | "import-spacing": true, 20 | "indent": [ 21 | true, 22 | "spaces" 23 | ], 24 | "interface-over-type-literal": true, 25 | "label-position": true, 26 | "max-line-length": [ 27 | true, 28 | 140 29 | ], 30 | "member-access": false, 31 | "member-ordering": [ 32 | true, 33 | "static-before-instance", 34 | "variables-before-functions" 35 | ], 36 | "no-arg": true, 37 | "no-bitwise": true, 38 | "no-console": [ 39 | true, 40 | "debug", 41 | "info", 42 | "time", 43 | "timeEnd", 44 | "trace" 45 | ], 46 | "no-construct": true, 47 | "no-debugger": true, 48 | "no-empty": false, 49 | "no-empty-interface": true, 50 | "no-eval": true, 51 | "no-inferrable-types": [ 52 | true, 53 | "ignore-params" 54 | ], 55 | "no-shadowed-variable": true, 56 | "no-string-literal": false, 57 | "no-string-throw": true, 58 | "no-switch-case-fall-through": true, 59 | "no-trailing-whitespace": true, 60 | "no-unused-expression": true, 61 | "no-use-before-declare": true, 62 | "no-var-keyword": true, 63 | "object-literal-sort-keys": false, 64 | "one-line": [ 65 | true, 66 | "check-open-brace", 67 | "check-catch", 68 | "check-else", 69 | "check-whitespace" 70 | ], 71 | "prefer-const": true, 72 | "quotemark": [ 73 | true, 74 | "single" 75 | ], 76 | "radix": true, 77 | "semicolon": [ 78 | "always" 79 | ], 80 | "triple-equals": [ 81 | true, 82 | "allow-null-check" 83 | ], 84 | "typedef-whitespace": [ 85 | true, 86 | { 87 | "call-signature": "nospace", 88 | "index-signature": "nospace", 89 | "parameter": "nospace", 90 | "property-declaration": "nospace", 91 | "variable-declaration": "nospace" 92 | } 93 | ], 94 | "typeof-compare": true, 95 | "unified-signatures": true, 96 | "variable-name": false, 97 | "whitespace": [ 98 | true, 99 | "check-branch", 100 | "check-decl", 101 | "check-operator", 102 | "check-separator", 103 | "check-type" 104 | ], 105 | "directive-selector": [ 106 | true, 107 | "attribute", 108 | "app", 109 | "camelCase" 110 | ], 111 | "component-selector": [ 112 | true, 113 | "element", 114 | "app", 115 | "kebab-case" 116 | ], 117 | "use-input-property-decorator": true, 118 | "use-output-property-decorator": true, 119 | "use-host-property-decorator": true, 120 | "no-input-rename": true, 121 | "no-output-rename": true, 122 | "use-life-cycle-interface": true, 123 | "use-pipe-transform-interface": true, 124 | "component-class-suffix": true, 125 | "directive-class-suffix": true, 126 | "no-access-missing-member": true, 127 | "templates-use-public": true, 128 | "invoke-injectable": true 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-datetimepicker", 3 | "version": "1.1.1", 4 | "description": "Angular 2 or 4 datetime picker component", 5 | "keywords": [ 6 | "angular2 datepicker", 7 | "angular2 datetimepicker", 8 | "angular4 datepicker", 9 | "angular4 datetimepicker" 10 | ], 11 | "license": "MIT", 12 | "angular-cli": {}, 13 | "author":"Pradeep Terli", 14 | "scripts": { 15 | "ng": "ng", 16 | "start": "ng serve", 17 | "e2e": "ng e2e", 18 | "build": "npm run build:esm && npm run build:umd && gulp copy", 19 | "build:esm": "gulp inline-templates && npm run ngcompile", 20 | "build:esm:watch": "gulp build:esm:watch", 21 | "build:umd": "webpack --config webpack-umd.config.ts", 22 | "build:umd:watch": "npm run build:umd -- --watch", 23 | "build:watch": "concurrently --raw \"npm run build:umd:watch\" \"npm run build:esm:watch\"", 24 | "ci": "npm run lint && npm run test && npm run build && npm run docs", 25 | "clean:all": "npm run clean:tmp && rimraf node_modules", 26 | "clean:tmp": "rimraf coverage dist tmp docs", 27 | "codecov": "cat coverage/lcov.info | codecov", 28 | "docs": "compodoc -p tsconfig.json -d docs --disableCoverage --disablePrivateOrInternalSupport", 29 | "explorer": "source-map-explorer ./dist/index.umd.js", 30 | "gh-pages": "rimraf docs && npm run docs && gh-pages -d docs", 31 | "lint": "npm run tslint 'src/**/*.ts'", 32 | "ngcompile": "node_modules/.bin/ngc -p tsconfig-aot.json", 33 | "postversion": "git push && git push --tags", 34 | "prebuild": "rimraf dist tmp", 35 | "prebuild:watch": "rimraf dist tmp", 36 | "prepublishOnly": "npm run ci", 37 | "preversion": "npm run ci", 38 | "test": "karma start", 39 | "test:watch": "karma start --auto-watch --no-single-run", 40 | "tslint": "tslint", 41 | "github-pages":"ng build --base-href /angular2-datetimepicker/" 42 | }, 43 | "private": false, 44 | "dependencies": { 45 | "font-awesome":"*" 46 | }, 47 | "devDependencies": { 48 | "@angular/common": "^4.0.0", 49 | "@angular/compiler": "^4.0.0", 50 | "@angular/compiler-cli": "^4.0.0", 51 | "@angular/cli": "^1.3.2", 52 | "@angular/core": "^4.0.0", 53 | "@angular/forms": "^4.0.0", 54 | "@angular/platform-browser": "^4.0.0", 55 | "@angular/platform-browser-dynamic": "^4.0.0", 56 | "@angular/router": "^4.0.0", 57 | "@compodoc/compodoc": "^1.0.0-beta.9", 58 | "@types/jasmine": "^2.5.47", 59 | "@types/karma": "^0.13.35", 60 | "@types/node": "^7.0.18", 61 | "@types/webpack": "^2.2.15", 62 | "@types/webpack-env": "^1.13.0", 63 | "angular2-template-loader": "^0.6.2", 64 | "awesome-typescript-loader": "^3.1.3", 65 | "codecov": "^2.2.0", 66 | "codelyzer": "^3.0.1", 67 | "concurrently": "^3.4.0", 68 | "css-loader": "^0.28.1", 69 | "gh-pages": "^1.0.0", 70 | "gulp": "^3.9.1", 71 | "gulp-copy":"^1.0.1", 72 | "gulp-inline-ng2-template": "^4.0.0", 73 | "istanbul-instrumenter-loader": "^2.0.0", 74 | "jasmine-core": "^2.6.1", 75 | "json-loader": "^0.5.4", 76 | "karma": "^1.7.0", 77 | "karma-chrome-launcher": "^2.1.1", 78 | "karma-coverage-istanbul-reporter": "^1.2.1", 79 | "karma-jasmine": "^1.1.0", 80 | "karma-mocha-reporter": "^2.2.3", 81 | "karma-sourcemap-loader": "^0.3.7", 82 | "karma-webpack": "^2.0.3", 83 | "ng2-adsense":"*", 84 | "node-sass": "^4.5.2", 85 | "raw-loader": "^0.5.1", 86 | "rimraf": "2.6.1", 87 | "rxjs": "^5.3.1", 88 | "protractor":"*", 89 | "sass-loader": "^6.0.5", 90 | "source-map-explorer": "^1.3.3", 91 | "to-string-loader": "^1.1.5", 92 | "ts-node": "^3.0.4", 93 | "tslint": "^5.2.0", 94 | "typescript": "^2.3.2", 95 | "webpack": "^2.5.1", 96 | "webpack-angular-externals": "^1.0.2", 97 | "webpack-rxjs-externals": "^1.0.0", 98 | "zone.js": "^0.8.10" 99 | }, 100 | "repository": { 101 | "type": "git", 102 | "url": "https://github.com/CuppaLabs/angular2-datetimepicker" 103 | }, 104 | "bugs": { 105 | "url": "https://github.com/CuppaLabs/angular2-datetimepicker/issues" 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /inline-resources.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | const glob = require('glob'); 6 | 7 | 8 | /** 9 | * Simple Promiseify function that takes a Node API and return a version that supports promises. 10 | * We use promises instead of synchronized functions to make the process less I/O bound and 11 | * faster. It also simplifies the code. 12 | */ 13 | function promiseify(fn) { 14 | return function () { 15 | const args = [].slice.call(arguments, 0); 16 | return new Promise((resolve, reject) => { 17 | fn.apply(this, args.concat([function (err, value) { 18 | if (err) { 19 | reject(err); 20 | } else { 21 | resolve(value); 22 | } 23 | }])); 24 | }); 25 | }; 26 | } 27 | 28 | const readFile = promiseify(fs.readFile); 29 | const writeFile = promiseify(fs.writeFile); 30 | 31 | /** 32 | * Inline resources in a tsc/ngc compilation. 33 | * @param projectPath {string} Path to the project. 34 | */ 35 | function inlineResources(projectPath) { 36 | 37 | // Match only TypeScript files in projectPath. 38 | const files = glob.sync('**/*.ts', {cwd: projectPath}); 39 | 40 | // For each file, inline the templates and styles under it and write the new file. 41 | return Promise.all(files.map(filePath => { 42 | const fullFilePath = path.join(projectPath, filePath); 43 | return readFile(fullFilePath, 'utf-8') 44 | .then(content => inlineResourcesFromString(content, url => { 45 | // Resolve the template url. 46 | return path.join(path.dirname(fullFilePath), url); 47 | })) 48 | .then(content => writeFile(fullFilePath, content)) 49 | .catch(err => { 50 | console.error('An error occured: ', err); 51 | }); 52 | })); 53 | } 54 | 55 | /** 56 | * Inline resources from a string content. 57 | * @param content {string} The source file's content. 58 | * @param urlResolver {Function} A resolver that takes a URL and return a path. 59 | * @returns {string} The content with resources inlined. 60 | */ 61 | function inlineResourcesFromString(content, urlResolver) { 62 | // Curry through the inlining functions. 63 | return [ 64 | inlineTemplate, 65 | inlineStyle 66 | ].reduce((content, fn) => fn(content, urlResolver), content); 67 | } 68 | 69 | /** 70 | * Inline the templates for a source file. Simply search for instances of `templateUrl: ...` and 71 | * replace with `template: ...` (with the content of the file included). 72 | * @param content {string} The source file's content. 73 | * @param urlResolver {Function} A resolver that takes a URL and return a path. 74 | * @return {string} The content with all templates inlined. 75 | */ 76 | function inlineTemplate(content, urlResolver) { 77 | return content.replace(/templateUrl:\s*'([^']+?\.html)'/g, function (m, templateUrl) { 78 | const templateFile = urlResolver(templateUrl); 79 | const templateContent = fs.readFileSync(templateFile, 'utf-8'); 80 | const shortenedTemplate = templateContent 81 | .replace(/([\n\r]\s*)+/gm, ' ') 82 | .replace(/"/g, '\\"'); 83 | return `template: "${shortenedTemplate}"`; 84 | }); 85 | } 86 | 87 | 88 | /** 89 | * Inline the styles for a source file. Simply search for instances of `styleUrls: [...]` and 90 | * replace with `styles: [...]` (with the content of the file included). 91 | * @param urlResolver {Function} A resolver that takes a URL and return a path. 92 | * @param content {string} The source file's content. 93 | * @return {string} The content with all styles inlined. 94 | */ 95 | function inlineStyle(content, urlResolver) { 96 | return content.replace(/styleUrls:\s*(\[[\s\S]*?\])/gm, function (m, styleUrls) { 97 | const urls = eval(styleUrls); 98 | return 'styles: [' 99 | + urls.map(styleUrl => { 100 | const styleFile = urlResolver(styleUrl); 101 | const styleContent = fs.readFileSync(styleFile, 'utf-8'); 102 | const shortenedStyle = styleContent 103 | .replace(/([\n\r]\s*)+/gm, ' ') 104 | .replace(/"/g, '\\"'); 105 | return `"${shortenedStyle}"`; 106 | }) 107 | .join(',\n') 108 | + ']'; 109 | }); 110 | } 111 | 112 | module.exports = inlineResources; 113 | module.exports.inlineResourcesFromString = inlineResourcesFromString; 114 | 115 | // Run inlineResources if module is being called directly from the CLI with arguments. 116 | if (require.main === module && process.argv.length > 2) { 117 | console.log('Inlining resources from project:', process.argv[2]); 118 | return inlineResources(process.argv[2]); 119 | } 120 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular 2 DateTime picker | Cuppa Labs 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 27 | 28 | 29 | 64 |
65 |
66 | Loading... 67 |
68 |
69 | 70 | 71 | 75 |
76 |
77 | 78 | 79 | 83 |
84 |
85 |
86 |
87 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular 2 DateTime picker | Cuppa Labs 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 27 | 28 | 29 | 64 |
65 |
66 | Loading... 67 |
68 |
69 | 70 | 71 | 75 |
76 |
77 | 78 | 79 | 83 |
84 |
85 |
86 |
87 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Angular 2 / 4 DateTime Picker 3 | 4 | # [Documentation](http://cuppalabs.github.io/components/datepicker) | [Demos / Examples](https://cuppalabs.github.io/angular2-datetimepicker). 5 | 6 | ### Overview 7 | 8 | Angular 2 DateTimepicker is a cool responsive DateTimepicker component for Web and Mobile. It is Mobile friendly and light weight. Developed by [Cuppa Labs](http://www.cuppalabs.com). 9 | 10 | ### Getting Started 11 | To get started with using the multiselect dropdown component, follow the below steps. It’s easy to integrate and just a matter of minutes. 12 | 13 | ### Installation 14 | - The datetimepicker package is published on the [npm](https://www.npmjs.com/package/angular2-datetimepicker) Registry. 15 | - Install the package with [npm](https://www.npmjs.com): 16 | 17 | ```js 18 | npm install angular2-datetimepicker 19 | ``` 20 | 21 | ### Usage 22 | 23 | Import `AngularDateTimePickerModule` into your `AppModule` 24 | 25 | ```js 26 | import { AngularDateTimePickerModule } from 'angular2-datetimepicker'; 27 | 28 | @NgModule({ 29 | // ... 30 | imports: [ 31 | AngularDateTimePickerModule, 32 | ] 33 | // ... 34 | }) 35 | 36 | ``` 37 | Declare the component data variables and options in your component where you want to consume the dropdown component. 38 | 39 | ```js 40 | import { Component, OnInit } from '@angular/core'; 41 | 42 | export class AppComponent implements OnInit { 43 | 44 | date: Date = new Date(); 45 | settings = { 46 | bigBanner: true, 47 | timePicker: false, 48 | format: 'dd-MM-yyyy', 49 | defaultOpen: true 50 | } 51 | constructor(){} 52 | ngOnInit(){ 53 | 54 | } 55 | } 56 | 57 | ``` 58 | 59 | Add the following component tag in the template where your want to place the datepicker 60 | 61 | ```html 62 | 63 | 64 | 65 | ``` 66 | 67 | 68 | ### Settings 69 | 70 | Following `settings` object properties can be used to configure the component. 71 | 72 | |Property |Type |Default |Description | 73 | |:--- |:--- |:--- |:--- | 74 | |format|String|dd-MMM-yyyy hh:mm a|Date format of the selected date.| 75 | |bigBanner|Boolean|true| The banner section to show the date details. | 76 | |defaultOpen|Boolean|false|To open the datepicker popover on load. Default is set to false.| 77 | |timePicker|Boolean|false|Enable time picker feature.| 78 | |closeOnSelect|Boolean|true|to close the popover on date select or on click of done button.| 79 | 80 | 81 | ## Callback Methods 82 | 83 | - `onDateSelect` 84 | 85 | Define a callback method to be called on select of the date. 86 | 87 | ```html 88 | 89 | 92 | 93 | 94 | ``` 95 | ## Date Formats Support 96 | 97 | format string can be composed of the following elements: 98 | 99 | - 'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010) 100 | - 'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10) 101 | - 'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199) 102 | - 'MMMM': Month in year (January-December) 103 | - 'MMM': Month in year (Jan-Dec) 104 | - 'MM': Month in year, padded (01-12) 105 | - 'M': Month in year (1-12) 106 | - 'LLLL': Stand-alone month in year (January-December) 107 | - 'dd': Day in month, padded (01-31) 108 | - 'd': Day in month (1-31) 109 | - 'EEEE': Day in Week,(Sunday-Saturday) 110 | - 'EEE': Day in Week, (Sun-Sat) 111 | - 'HH': Hour in day, padded (00-23) 112 | - 'H': Hour in day (0-23) 113 | - 'hh': Hour in AM/PM, padded (01-12) 114 | - 'h': Hour in AM/PM, (1-12) 115 | - 'mm': Minute in hour, padded (00-59) 116 | - 'm': Minute in hour (0-59) 117 | - 'ss': Second in minute, padded (00-59) 118 | - 's': Second in minute (0-59) 119 | - 'sss': Millisecond in second, padded (000-999) 120 | - 'a': AM/PM marker 121 | - 'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200) 122 | - 'ww': Week of year, padded (00-53). Week 01 is the week with the first Thursday of the year 123 | - 'w': Week of year (0-53). Week 1 is the week with the first Thursday of the year 124 | - 'G', 'GG', 'GGG': The abbreviated form of the era string (e.g. 'AD') 125 | - 'GGGG': The long form of the era string (e.g. 'Anno Domini') 126 | 127 | format string can also be one of the following predefined localizable formats: 128 | 129 | - 'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 PM) 130 | 131 | - 'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 PM) 132 | - 'fullDate': equivalent to 'EEEE, MMMM d, y' for en_US locale (e.g. Friday, September 3, 2010) 133 | - 'longDate': equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010) 134 | - 'mediumDate': equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010) 135 | - 'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10) 136 | - 'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 PM) 137 | - 'shortTime': equivalent to 'h:mm a' for en_US locale (e.g. 12:05 PM) 138 | 139 | ## Run locally 140 | - Clone the repository or downlod the .zip,.tar files. 141 | - Run `npm install` 142 | - Run `ng serve` for a dev server 143 | - Navigate to `http://localhost:4200/` 144 | 145 | ## License 146 | MIT License. 147 | 148 | ## Credits 149 | Thanks to Font Awesome and Moment.js for the libraries. 150 | 151 | ## Author 152 | Pradeep Kumar Terli -------------------------------------------------------------------------------- /docs/inline.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack/bootstrap e8f74232b27f5a9dd6be"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAQ,oBAAoB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAY,2BAA2B;AACvC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,kDAA0C,WAAW,EAAE;AACvD;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAI;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA,kDAA0C,oBAAoB,WAAW","file":"inline.bundle.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t\"inline\": 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId) {\n \t\tvar installedChunkData = installedChunks[chunkId];\n \t\tif(installedChunkData === 0) {\n \t\t\treturn new Promise(function(resolve) { resolve(); });\n \t\t}\n\n \t\t// a Promise means \"currently loading\".\n \t\tif(installedChunkData) {\n \t\t\treturn installedChunkData[2];\n \t\t}\n\n \t\t// setup Promise in chunk cache\n \t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\tinstalledChunkData = installedChunks[chunkId] = [resolve, reject];\n \t\t});\n \t\tinstalledChunkData[2] = promise;\n\n \t\t// start chunk loading\n \t\tvar head = document.getElementsByTagName('head')[0];\n \t\tvar script = document.createElement('script');\n \t\tscript.type = 'text/javascript';\n \t\tscript.charset = 'utf-8';\n \t\tscript.async = true;\n \t\tscript.timeout = 120000;\n\n \t\tif (__webpack_require__.nc) {\n \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n \t\t}\n \t\tscript.src = __webpack_require__.p + \"\" + chunkId + \".chunk.js\";\n \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n \t\tscript.onerror = script.onload = onScriptComplete;\n \t\tfunction onScriptComplete() {\n \t\t\t// avoid mem leaks in IE.\n \t\t\tscript.onerror = script.onload = null;\n \t\t\tclearTimeout(timeout);\n \t\t\tvar chunk = installedChunks[chunkId];\n \t\t\tif(chunk !== 0) {\n \t\t\t\tif(chunk) {\n \t\t\t\t\tchunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n \t\t\t\t}\n \t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t}\n \t\t};\n \t\thead.appendChild(script);\n\n \t\treturn promise;\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap e8f74232b27f5a9dd6be"],"sourceRoot":"webpack:///"} -------------------------------------------------------------------------------- /docs/inline.bundle.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // install a JSONP callback for chunk loading 3 | /******/ var parentJsonpFunction = window["webpackJsonp"]; 4 | /******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) { 5 | /******/ // add "moreModules" to the modules object, 6 | /******/ // then flag all "chunkIds" as loaded and fire callback 7 | /******/ var moduleId, chunkId, i = 0, resolves = [], result; 8 | /******/ for(;i < chunkIds.length; i++) { 9 | /******/ chunkId = chunkIds[i]; 10 | /******/ if(installedChunks[chunkId]) { 11 | /******/ resolves.push(installedChunks[chunkId][0]); 12 | /******/ } 13 | /******/ installedChunks[chunkId] = 0; 14 | /******/ } 15 | /******/ for(moduleId in moreModules) { 16 | /******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { 17 | /******/ modules[moduleId] = moreModules[moduleId]; 18 | /******/ } 19 | /******/ } 20 | /******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules); 21 | /******/ while(resolves.length) { 22 | /******/ resolves.shift()(); 23 | /******/ } 24 | /******/ if(executeModules) { 25 | /******/ for(i=0; i < executeModules.length; i++) { 26 | /******/ result = __webpack_require__(__webpack_require__.s = executeModules[i]); 27 | /******/ } 28 | /******/ } 29 | /******/ return result; 30 | /******/ }; 31 | /******/ 32 | /******/ // The module cache 33 | /******/ var installedModules = {}; 34 | /******/ 35 | /******/ // objects to store loaded and loading chunks 36 | /******/ var installedChunks = { 37 | /******/ "inline": 0 38 | /******/ }; 39 | /******/ 40 | /******/ // The require function 41 | /******/ function __webpack_require__(moduleId) { 42 | /******/ 43 | /******/ // Check if module is in cache 44 | /******/ if(installedModules[moduleId]) { 45 | /******/ return installedModules[moduleId].exports; 46 | /******/ } 47 | /******/ // Create a new module (and put it into the cache) 48 | /******/ var module = installedModules[moduleId] = { 49 | /******/ i: moduleId, 50 | /******/ l: false, 51 | /******/ exports: {} 52 | /******/ }; 53 | /******/ 54 | /******/ // Execute the module function 55 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 56 | /******/ 57 | /******/ // Flag the module as loaded 58 | /******/ module.l = true; 59 | /******/ 60 | /******/ // Return the exports of the module 61 | /******/ return module.exports; 62 | /******/ } 63 | /******/ 64 | /******/ // This file contains only the entry chunk. 65 | /******/ // The chunk loading function for additional chunks 66 | /******/ __webpack_require__.e = function requireEnsure(chunkId) { 67 | /******/ var installedChunkData = installedChunks[chunkId]; 68 | /******/ if(installedChunkData === 0) { 69 | /******/ return new Promise(function(resolve) { resolve(); }); 70 | /******/ } 71 | /******/ 72 | /******/ // a Promise means "currently loading". 73 | /******/ if(installedChunkData) { 74 | /******/ return installedChunkData[2]; 75 | /******/ } 76 | /******/ 77 | /******/ // setup Promise in chunk cache 78 | /******/ var promise = new Promise(function(resolve, reject) { 79 | /******/ installedChunkData = installedChunks[chunkId] = [resolve, reject]; 80 | /******/ }); 81 | /******/ installedChunkData[2] = promise; 82 | /******/ 83 | /******/ // start chunk loading 84 | /******/ var head = document.getElementsByTagName('head')[0]; 85 | /******/ var script = document.createElement('script'); 86 | /******/ script.type = 'text/javascript'; 87 | /******/ script.charset = 'utf-8'; 88 | /******/ script.async = true; 89 | /******/ script.timeout = 120000; 90 | /******/ 91 | /******/ if (__webpack_require__.nc) { 92 | /******/ script.setAttribute("nonce", __webpack_require__.nc); 93 | /******/ } 94 | /******/ script.src = __webpack_require__.p + "" + chunkId + ".chunk.js"; 95 | /******/ var timeout = setTimeout(onScriptComplete, 120000); 96 | /******/ script.onerror = script.onload = onScriptComplete; 97 | /******/ function onScriptComplete() { 98 | /******/ // avoid mem leaks in IE. 99 | /******/ script.onerror = script.onload = null; 100 | /******/ clearTimeout(timeout); 101 | /******/ var chunk = installedChunks[chunkId]; 102 | /******/ if(chunk !== 0) { 103 | /******/ if(chunk) { 104 | /******/ chunk[1](new Error('Loading chunk ' + chunkId + ' failed.')); 105 | /******/ } 106 | /******/ installedChunks[chunkId] = undefined; 107 | /******/ } 108 | /******/ }; 109 | /******/ head.appendChild(script); 110 | /******/ 111 | /******/ return promise; 112 | /******/ }; 113 | /******/ 114 | /******/ // expose the modules object (__webpack_modules__) 115 | /******/ __webpack_require__.m = modules; 116 | /******/ 117 | /******/ // expose the module cache 118 | /******/ __webpack_require__.c = installedModules; 119 | /******/ 120 | /******/ // define getter function for harmony exports 121 | /******/ __webpack_require__.d = function(exports, name, getter) { 122 | /******/ if(!__webpack_require__.o(exports, name)) { 123 | /******/ Object.defineProperty(exports, name, { 124 | /******/ configurable: false, 125 | /******/ enumerable: true, 126 | /******/ get: getter 127 | /******/ }); 128 | /******/ } 129 | /******/ }; 130 | /******/ 131 | /******/ // getDefaultExport function for compatibility with non-harmony modules 132 | /******/ __webpack_require__.n = function(module) { 133 | /******/ var getter = module && module.__esModule ? 134 | /******/ function getDefault() { return module['default']; } : 135 | /******/ function getModuleExports() { return module; }; 136 | /******/ __webpack_require__.d(getter, 'a', getter); 137 | /******/ return getter; 138 | /******/ }; 139 | /******/ 140 | /******/ // Object.prototype.hasOwnProperty.call 141 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 142 | /******/ 143 | /******/ // __webpack_public_path__ 144 | /******/ __webpack_require__.p = ""; 145 | /******/ 146 | /******/ // on error function for async loading 147 | /******/ __webpack_require__.oe = function(err) { console.error(err); throw err; }; 148 | /******/ }) 149 | /************************************************************************/ 150 | /******/ ([]); 151 | //# sourceMappingURL=inline.bundle.js.map -------------------------------------------------------------------------------- /src/app/angular2-datetimepicker/datepicker.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, forwardRef, EventEmitter, Input, Output } from '@angular/core'; 2 | import { DatePipe } from '@angular/common'; 3 | import { DateRange } from './model'; 4 | import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; 5 | import { Settings } from './interface'; 6 | 7 | export const DATEPICKER_CONTROL_VALUE_ACCESSOR: any = { 8 | provide: NG_VALUE_ACCESSOR, 9 | useExisting: forwardRef(() => DatePicker), 10 | multi: true 11 | }; 12 | 13 | @Component({ 14 | selector: 'angular2-date-picker', 15 | templateUrl: './datepicker.component.html', 16 | styleUrls: ['./datepicker.component.scss', './rangepicker.scss'], 17 | providers: [DATEPICKER_CONTROL_VALUE_ACCESSOR] 18 | }) 19 | 20 | export class DatePicker implements OnInit, ControlValueAccessor { 21 | 22 | @Input() 23 | settings: Settings; 24 | 25 | @Output() 26 | onDateSelect: EventEmitter = new EventEmitter(); 27 | 28 | selectedDate: String; 29 | date: Date; 30 | dateRange: DateRange = new DateRange(); 31 | popover: Boolean = false; 32 | 33 | cal_days_in_month: Array = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 34 | timeViewDate: Date = new Date(this.date); 35 | hourValue: number = 0; 36 | toHourValue: number = 0; 37 | minValue: number = 0; 38 | toMinValue: number = 0; 39 | timeViewMeridian: string = ""; 40 | toTimeViewMeridian: string = ""; 41 | timeView: boolean = false; 42 | yearView: Boolean = false; 43 | yearsList: Array = []; 44 | monthDays: Array = []; 45 | toMonthDays: Array = []; 46 | monthsView: boolean = false; 47 | today: Date = new Date(); 48 | leftDate: Date = new Date(); 49 | rightDate: Date = new Date(); 50 | 51 | defaultSettings: Settings = { 52 | defaultOpen: false, 53 | bigBanner: true, 54 | timePicker: false, 55 | format: 'dd-MMM-yyyy hh:mm a', 56 | cal_days_labels: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], 57 | cal_full_days_lables: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], 58 | cal_months_labels: ['January', 'February', 'March', 'April', 59 | 'May', 'June', 'July', 'August', 'September', 60 | 'October', 'November', 'December'], 61 | cal_months_labels_short: ['JAN', 'FEB', 'MAR', 'APR', 62 | 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 63 | 'OCT', 'NOV', 'DEC'], 64 | closeOnSelect: true, 65 | rangepicker: false 66 | } 67 | constructor() { 68 | 69 | } 70 | ngOnInit() { 71 | this.settings = Object.assign(this.defaultSettings, this.settings); 72 | if (this.settings.defaultOpen) { 73 | this.popover = true; 74 | } 75 | } 76 | private onTouchedCallback: () => {}; 77 | private onChangeCallback: (_: any) => {}; 78 | writeValue(value: any) { 79 | if (value !== undefined && value !== null) { 80 | if (!this.settings.rangepicker) { 81 | this.initDate(value); 82 | this.monthDays = this.generateDays(this.date); 83 | } 84 | else { 85 | this.initDateRange(value); 86 | if (this.dateRange.startDate.getMonth() === this.dateRange.endDate.getMonth() && this.dateRange.startDate.getFullYear() === this.dateRange.endDate.getFullYear()) { 87 | this.leftDate = new Date(this.dateRange.startDate); 88 | var tempDate = new Date(this.dateRange.startDate); 89 | tempDate.setMonth(tempDate.getMonth() + 1); 90 | tempDate.setDate(1); 91 | this.rightDate = new Date(tempDate); 92 | this.monthDays = this.generateDays(this.leftDate); 93 | this.toMonthDays = this.generateDays(this.rightDate); 94 | } 95 | else { 96 | this.leftDate = new Date(this.dateRange.startDate); 97 | this.rightDate = new Date(this.dateRange.endDate); 98 | this.monthDays = this.generateDays(this.leftDate); 99 | this.toMonthDays = this.generateDays(this.rightDate); 100 | } 101 | 102 | console.log(this.monthDays); 103 | } 104 | 105 | } 106 | else { 107 | this.date = new Date(); 108 | } 109 | } 110 | registerOnChange(fn: any) { 111 | this.onChangeCallback = fn; 112 | } 113 | registerOnTouched(fn: any) { 114 | this.onTouchedCallback = fn; 115 | } 116 | initDate(val: string) { 117 | this.date = new Date(val); 118 | if (this.date.getHours() <= 11) { 119 | this.hourValue = this.date.getHours(); 120 | this.timeViewMeridian = "AM"; 121 | } 122 | else { 123 | this.hourValue = this.date.getHours() - 12; 124 | this.timeViewMeridian = "PM"; 125 | } 126 | if (this.date.getHours() == 0 || this.date.getHours() == 12) { 127 | this.hourValue = 12; 128 | } 129 | this.minValue = this.date.getMinutes(); 130 | } 131 | initDateRange(val: DateRange) { 132 | this.dateRange.startDate = new Date(val.startDate); 133 | this.dateRange.endDate = new Date(val.endDate); 134 | if (this.dateRange.startDate.getHours() <= 11) { 135 | this.hourValue = this.dateRange.startDate.getHours(); 136 | this.timeViewMeridian = "AM"; 137 | } 138 | else { 139 | this.hourValue = this.dateRange.startDate.getHours() - 12; 140 | this.timeViewMeridian = "PM"; 141 | } 142 | if (this.dateRange.startDate.getHours() == 0 || this.dateRange.startDate.getHours() == 12) { 143 | this.hourValue = 12; 144 | } 145 | this.minValue = this.dateRange.startDate.getMinutes(); 146 | 147 | if (this.dateRange.endDate.getHours() <= 11) { 148 | this.toHourValue = this.dateRange.endDate.getHours(); 149 | this.toTimeViewMeridian = "AM"; 150 | } 151 | else { 152 | this.toHourValue = this.dateRange.endDate.getHours() - 12; 153 | this.toTimeViewMeridian = "PM"; 154 | } 155 | if (this.dateRange.endDate.getHours() == 0 || this.dateRange.endDate.getHours() == 12) { 156 | this.toHourValue = 12; 157 | } 158 | this.toMinValue = this.dateRange.endDate.getMinutes(); 159 | 160 | } 161 | generateDays(date: Date) { 162 | var year = date.getFullYear(), 163 | month = date.getMonth(), 164 | current_day = date.getDate(), 165 | today = new Date(); 166 | var firstDay = new Date(year, month, 1); 167 | var startingDay = firstDay.getDay(); 168 | var monthLength = this.getMonthLength(month, year); 169 | var day = 1; 170 | var dateArr = []; 171 | var dateRow = []; 172 | // this loop is for is weeks (rows) 173 | for (var i = 0; i < 9; i++) { 174 | // this loop is for weekdays (cells) 175 | dateRow = []; 176 | for (var j = 0; j <= 6; j++) { 177 | var dateCell = null; 178 | if (day <= monthLength && (i > 0 || j >= startingDay)) { 179 | dateCell = day; 180 | if (day == current_day) { 181 | // dateCell.classList.add('selected-day'); 182 | } 183 | if (day == today.getDate() && date.getMonth() == today.getMonth() && date.getFullYear() == today.getFullYear()) { 184 | // dateCell.classList.add('today'); 185 | } 186 | day++; 187 | } 188 | dateRow.push({ day: dateCell, date: new Date((month + 1) + '-' + dateCell + '-' + date.getFullYear()) }); 189 | } 190 | // stop making rows if we've run out of days 191 | if (day > monthLength) { 192 | dateArr.push(dateRow); 193 | break; 194 | } else { 195 | dateArr.push(dateRow); 196 | } 197 | } 198 | return dateArr; 199 | } 200 | generateYearList(param: string) { 201 | var startYear = null; 202 | var currentYear = null; 203 | if (param == "next") { 204 | startYear = this.yearsList[8] + 1; 205 | currentYear = this.date.getFullYear(); 206 | } 207 | else if (param == "prev") { 208 | startYear = this.yearsList[0] - 9; 209 | currentYear = this.date.getFullYear(); 210 | } 211 | else { 212 | currentYear = this.date.getFullYear(); 213 | startYear = currentYear - 4; 214 | this.yearView = !this.yearView; 215 | this.monthsView = false; 216 | } 217 | for (var k = 0; k < 9; k++) { 218 | this.yearsList[k] = startYear + k; 219 | } 220 | } 221 | getMonthLength(month: number, year: number) { 222 | var monthLength = this.cal_days_in_month[month]; 223 | 224 | // compensate for leap year 225 | if (month == 1) { // February only! 226 | if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) { 227 | monthLength = 29; 228 | } 229 | } 230 | return monthLength; 231 | } 232 | toggleMonthView() { 233 | this.yearView = false; 234 | this.monthsView = !this.monthsView; 235 | } 236 | toggleMeridian(val: string) { 237 | this.timeViewMeridian = val; 238 | } 239 | setTimeView() { 240 | if (this.timeViewMeridian == "AM") { 241 | if (this.hourValue == 12) { 242 | this.date.setHours(0); 243 | } 244 | else { 245 | this.date.setHours(this.hourValue); 246 | } 247 | this.date.setMinutes(this.minValue); 248 | } 249 | else { 250 | if (this.hourValue == 12) { 251 | this.date.setHours(this.hourValue); 252 | } 253 | else { 254 | this.date.setHours(this.hourValue + 12); 255 | } 256 | this.date.setMinutes(this.minValue); 257 | } 258 | this.date = new Date(this.date); 259 | this.timeView = !this.timeView; 260 | } 261 | 262 | /*** 263 | * (ssd > endDay -> startDay = endDay -> step = 1 ) && (sed > startDay -> 2) 264 | * (ssd < endDay -> startDay = ssd - step =1) && (sed < startDay -> 2 ) 265 | * 266 | */ 267 | 268 | rangeSelected: number = 0; 269 | setDay(evt: any, type: string) { 270 | if (evt.target.innerHTML) { 271 | var selectedDay = new Date(evt.target.getAttribute('data-label')); 272 | if (type == 'range') { 273 | if (this.rangeSelected == 0) { 274 | this.setStartDate(selectedDay); 275 | } 276 | else if (this.rangeSelected == 1) { 277 | this.setEndDate(selectedDay); 278 | } 279 | } 280 | else { 281 | this.date = new Date(selectedDay); 282 | this.onChangeCallback(this.date.toString()); 283 | 284 | } 285 | if (this.settings.closeOnSelect) { 286 | this.popover = false; 287 | this.onDateSelect.emit(this.date); 288 | } 289 | } 290 | } 291 | setStartDate(selectedDate: Date) { 292 | if (selectedDate < this.dateRange.endDate) { 293 | this.dateRange.startDate = new Date(selectedDate); 294 | } 295 | else if (selectedDate > this.dateRange.endDate) { 296 | this.dateRange.startDate = new Date(selectedDate); 297 | this.dateRange.endDate = new Date(selectedDate); 298 | } 299 | this.rangeSelected = 1; 300 | } 301 | setEndDate(selectedDate: Date) { 302 | if (selectedDate > this.dateRange.startDate && (this.dateRange.startDate != this.dateRange.endDate)) { 303 | this.dateRange.endDate = new Date(selectedDate); 304 | } 305 | else if (selectedDate > this.dateRange.startDate && (this.dateRange.startDate == this.dateRange.endDate)) { 306 | this.dateRange.endDate = new Date(selectedDate); 307 | } 308 | else if (selectedDate < this.dateRange.startDate && (this.dateRange.startDate != this.dateRange.endDate)) { 309 | this.dateRange.startDate = new Date(selectedDate); 310 | this.dateRange.endDate = new Date(selectedDate); 311 | } 312 | else if (selectedDate < this.dateRange.startDate && (this.dateRange.startDate == this.dateRange.endDate)) { 313 | this.dateRange.startDate = new Date(selectedDate); 314 | this.dateRange.endDate = new Date(selectedDate); 315 | } 316 | else if (selectedDate.getTime() == this.dateRange.startDate.getTime()) { 317 | this.dateRange.startDate = new Date(selectedDate); 318 | this.dateRange.endDate = new Date(selectedDate); 319 | } 320 | this.rangeSelected = 0; 321 | } 322 | highlightRange(date: Date) { 323 | return (date > this.dateRange.startDate && date < this.dateRange.endDate); 324 | } 325 | setYear(evt: any) { 326 | console.log(evt.target); 327 | var selectedYear = parseInt(evt.target.getAttribute('id')); 328 | this.date = new Date(this.date.setFullYear(selectedYear)); 329 | this.yearView = !this.yearView; 330 | this.monthDays = this.generateDays(this.date); 331 | } 332 | setMonth(evt: any) { 333 | if (evt.target.getAttribute('id')) { 334 | var selectedMonth = this.settings.cal_months_labels_short.indexOf(evt.target.getAttribute('id')); 335 | this.date = new Date(this.date.setMonth(selectedMonth)); 336 | this.monthsView = !this.monthsView; 337 | this.monthDays = this.generateDays(this.date); 338 | } 339 | } 340 | prevMonth(e: any) { 341 | e.stopPropagation(); 342 | var self = this; 343 | if (this.date.getMonth() == 0) { 344 | this.date.setMonth(11); 345 | this.date.setFullYear(this.date.getFullYear() - 1); 346 | } else { 347 | var prevmonthLength = this.getMonthLength(this.date.getMonth() - 1, this.date.getFullYear()); 348 | var currentDate = this.date.getDate(); 349 | if (currentDate > prevmonthLength) { 350 | this.date.setDate(prevmonthLength); 351 | } 352 | this.date.setMonth(this.date.getMonth() - 1); 353 | } 354 | this.date = new Date(this.date); 355 | this.monthDays = this.generateDays(this.date); 356 | } 357 | nextMonth(e: any) { 358 | e.stopPropagation(); 359 | var self = this; 360 | if (this.date.getMonth() == 11) { 361 | this.date.setMonth(0); 362 | this.date.setFullYear(this.date.getFullYear() + 1); 363 | } else { 364 | var nextmonthLength = this.getMonthLength(this.date.getMonth() + 1, this.date.getFullYear()); 365 | var currentDate = this.date.getDate(); 366 | if (currentDate > nextmonthLength) { 367 | this.date.setDate(nextmonthLength); 368 | } 369 | this.date.setMonth(this.date.getMonth() + 1); 370 | 371 | } 372 | this.date = new Date(this.date); 373 | this.monthDays = this.generateDays(this.date); 374 | } 375 | onChange(evt: any) { 376 | console.log(evt); 377 | } 378 | incHour() { 379 | if (this.hourValue < 12) { 380 | this.hourValue += 1; 381 | console.log(this.hourValue); 382 | } 383 | } 384 | decHour() { 385 | if (this.hourValue > 1) { 386 | this.hourValue -= 1; 387 | console.log(this.hourValue); 388 | } 389 | } 390 | incMinutes() { 391 | if (this.minValue < 59) { 392 | this.minValue += 1; 393 | console.log(this.minValue); 394 | } 395 | } 396 | decMinutes() { 397 | if (this.minValue > 0) { 398 | this.minValue -= 1; 399 | console.log(this.minValue); 400 | } 401 | } 402 | done() { 403 | this.onChangeCallback(this.date.toString()); 404 | this.popover = false; 405 | this.onDateSelect.emit(this.date); 406 | } 407 | togglePopover() { 408 | if (this.popover) { 409 | this.closepopover(); 410 | } 411 | else { 412 | this.popover = true; 413 | } 414 | } 415 | closepopover() { 416 | this.rangeSelected = 0; 417 | this.popover = false; 418 | } 419 | composeDate(date: Date) { 420 | return (date.getMonth() + 1) + '-' + date.getDate() + '-' + date.getFullYear(); 421 | } 422 | getCurrentWeek() { 423 | var curr_date = new Date(); 424 | 425 | var day = curr_date.getDay(); 426 | 427 | var diff = curr_date.getDate() - day + (day == 0 ? -6 : 1); // 0 for sunday 428 | 429 | var week_start_tstmp = curr_date.setDate(diff); 430 | 431 | var week_start = new Date(week_start_tstmp); 432 | 433 | 434 | var week_end = new Date(week_start_tstmp); // first day of week 435 | 436 | week_end = new Date(week_end.setDate(week_end.getDate() + 6)); 437 | 438 | 439 | var date = week_start + ' to ' + week_end; // date range for current week 440 | console.log(date); 441 | if (week_start.getMonth() === week_end.getMonth()) { 442 | this.monthDays = this.generateDays(week_start); 443 | var tempDate = new Date(week_end); 444 | tempDate.setMonth(tempDate.getMonth() + 1); 445 | tempDate.setDate(1); 446 | this.toMonthDays = this.generateDays(tempDate); 447 | } 448 | else { 449 | this.monthDays = this.generateDays(week_start); 450 | this.toMonthDays = this.generateDays(week_end); 451 | } 452 | 453 | this.setStartDate(week_start); 454 | this.setEndDate(week_end); 455 | } 456 | } -------------------------------------------------------------------------------- /src/app/angular2-datetimepicker/datepicker.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | {{date | date: settings.format}} 6 | 7 |
8 | 9 |
10 |
11 |
{{date | date: 'EEEE'}}
12 |
{{date | date: 'dd'}}
13 |
14 |
15 |
{{date | date: 'MMMM'}}
16 |
17 |
18 |
{{date | date: 'yyyy'}}
19 |
20 |
21 |
22 |
23 | {{date | date: 'hh'}} : {{date | date: 'mm'}} {{date | date: 'a'}} 24 |
25 |
26 | 27 |
28 |
29 | 30 |
{{date | date: 'MMMM'}} 31 | 33 |
34 |
35 | {{date | date: 'MMMM'}} 36 | 38 | 39 |
40 | 41 |
42 |
43 |
44 | {{date | date: 'yyyy'}} 45 | 46 | 47 |
48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
SuMoTuWeThFrSa
60 |
61 | {{month}} 63 |
64 |
65 | 66 | 67 |
68 | {{year}} 69 |
70 |
71 |
72 | 73 |
74 |
75 | 76 | 77 | 78 |
79 |
:
80 |
81 | 82 | 83 | 84 |
85 |
86 |
87 |
88 | 89 | 90 |
91 |
92 |
93 | 94 |
95 |
96 | 97 | 98 | 102 | 103 | 104 |
100 | {{day.day}} 101 |
105 |
106 |
107 | 108 |
109 |
Done 110 |
111 |
112 |
113 | 114 | 115 |
116 |
117 | {{dateRange?.startDate | date: settings.format}} 118 | 119 |
120 |
121 | {{dateRange?.endDate | date: settings.format}} 122 | 123 |
124 |
125 | 126 |
127 |
128 |
129 | 130 |
131 | {{dateRange.startDate | date: 'dd'}} 132 |
133 |
134 |
135 |
136 | {{dateRange.startDate | date: 'MMMM'}} {{dateRange.startDate | date: 'yyyy'}} 137 |
138 |
139 |
140 | {{dateRange.startDate | date: 'EEEE'}} 141 |
142 |
143 |
144 |
145 | 146 |
147 |
148 | 149 |
{{dateRange.endDate | date: 'dd'}}
150 |
151 |
152 |
153 | {{dateRange.endDate | date: 'MMMM'}} {{dateRange.endDate | date: 'yyyy'}} 154 |
155 |
156 |
157 | {{dateRange.endDate | date: 'EEEE'}} 158 |
159 |
160 |
161 |
162 |
163 |
164 | 165 |
{{leftDate | date: 'MMMM'}} 166 | 168 |
169 |
170 | {{leftDate | date: 'MMMM'}} 171 | 173 | 174 |
175 | 176 |
177 |
178 |
179 | {{leftDate | date: 'yyyy'}} 180 | 181 | 182 |
183 |
184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 |
SuMoTuWeThFrSa
195 |
196 | {{month}} 198 |
199 |
200 | 201 | 202 |
203 | {{year}} 204 |
205 |
206 |
207 |
208 |
209 | 210 | 211 | 212 |
213 |
:
214 |
215 | 216 | 217 | 218 |
219 |
220 |
221 |
222 | 223 | 224 |
225 |
226 |
227 | 228 |
229 |
230 | 231 | 232 | 236 | 237 | 238 |
234 | {{day.day}} 235 |
239 |
240 | 241 |
242 |
243 | 244 |
{{rightDate | date: 'MMMM'}} 245 | 247 |
248 |
249 | {{rightDate | date: 'MMMM'}} 250 | 252 | 253 |
254 | 255 |
256 |
257 |
258 | {{rightDate | date: 'yyyy'}} 259 | 260 | 261 |
262 |
263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 |
SuMoTuWeThFrSa
274 |
275 | {{month}} 277 |
278 |
279 | 280 | 281 |
282 | {{year}} 283 |
284 |
285 |
286 |
287 |
288 | 289 | 290 | 291 |
292 |
:
293 |
294 | 295 | 296 | 297 |
298 |
299 |
300 |
301 | 302 | 303 |
304 |
305 |
306 | 307 |
308 |
309 | 310 | 311 | 315 | 316 | 317 |
313 | {{day.day}} 314 |
318 |
319 |
320 | 325 | 326 |
327 |
328 | -------------------------------------------------------------------------------- /src/app/angular2-datetimepicker/datepicker.component.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700'); 2 | 3 | $base-color: #1565c0; 4 | $secondary-color: #ffffff; 5 | 6 | body{ 7 | font-family: 'Roboto',sans-serif; 8 | } 9 | *{ 10 | box-sizing: border-box; 11 | } 12 | #cuppaDatePickerContainer, #cuppaDatePicker{ 13 | width: 250px; 14 | text-align: center; 15 | margin: 0px auto; 16 | font-family: 'Roboto','Arial',sans-serif; 17 | } 18 | .year-dropdown{ 19 | text-align: center; 20 | } 21 | .calendar-header{ 22 | color: #333; 23 | background: #fff; 24 | } 25 | .wc-date-container{ 26 | float: left; 27 | width: 100%; 28 | height: 30px; 29 | border: 1px solid $base-color; 30 | margin-bottom: 1px; 31 | font-size: 16px; 32 | padding: 5px; 33 | text-align: left; 34 | cursor: pointer; 35 | background: #fff; 36 | line-height: 20px; 37 | } 38 | .wc-date-container > span{ 39 | color: $base-color; 40 | } 41 | .wc-date-container > i{ 42 | float: right; 43 | font-size: 20px; 44 | color: $base-color; 45 | } 46 | .winkel-calendar{ 47 | position: relative; 48 | font-family: 'Roboto','Arial',sans-serif; 49 | } 50 | .wc-date-popover{ 51 | font-size: 14px; 52 | box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4); margin: 0px auto; 53 | perspective: 1000px; 54 | float: left; 55 | background: #fff; 56 | background: $secondary-color; 57 | position: fixed; 58 | width: 90%; 59 | top: 5%; 60 | left: 50%; 61 | z-index: 9999999; 62 | overflow: hidden; 63 | height: 90%; 64 | max-width: 320px; 65 | transition: all .5s linear; 66 | transform: translateX(-50%); 67 | } 68 | .wc-banner{ 69 | /* background: #3ce5ed; */ 70 | float: left; 71 | width: 100%; 72 | font-size: 54px; 73 | background: $base-color; 74 | } 75 | .wc-day-row{ 76 | padding: 5px 0px; 77 | /*background: rgba(0, 0, 0, 0.09);*/ 78 | color: $secondary-color; 79 | width: 100%; 80 | float: left; 81 | font-size: 3vh; 82 | text-align: center; 83 | } 84 | .wc-date-row{ 85 | display: inline-block; 86 | font-size: 25vw; 87 | color: $secondary-color; 88 | padding: 5px; 89 | width: 50%; 90 | float: left; 91 | text-align: right; 92 | font-weight: 200; 93 | } 94 | .wc-month-row{ 95 | padding: 25px 0px 0px 0px; 96 | font-size: 8vw; 97 | color: $secondary-color; 98 | width: 100%; 99 | float: left; 100 | } 101 | .wc-month-row > div, .wc-year-row > div{ 102 | 103 | } 104 | .wc-month-row > i, .wc-year-row > i{ 105 | float: right; 106 | font-size: 12px; 107 | padding: 10px 6px; 108 | cursor: pointer; 109 | } 110 | .wc-month-row > i:hover, .wc-year-row > i:hover{ 111 | color: rgba(255, 255, 255, 0.63); 112 | } 113 | .wc-year-row{ 114 | text-align: left; 115 | color: $secondary-color; 116 | font-size: 7vw; 117 | float: left; 118 | width: 100%; 119 | padding: 2px 0px 0px 0px; 120 | } 121 | .timepicker-true .wc-year-row{ 122 | font-size: 20px; 123 | padding: 5px 0px 0px 12px; 124 | } 125 | .timestate > .active{ 126 | color: #fff; 127 | } 128 | .timestate span{ 129 | cursor:pointer; 130 | } 131 | .wc-my-sec{ 132 | display: inline-block; 133 | padding: 5px 10px; 134 | float: left; 135 | width: 50%; 136 | font-weight: 300; 137 | } 138 | .timepicker-true .wc-my-sec{ 139 | width: 20%; 140 | } 141 | .time i{ 142 | font-size: 21px; 143 | display: block; 144 | text-align: center; 145 | cursor: pointer; 146 | } 147 | .time i:hover{ 148 | color: rgba(255, 255, 255, 0.65); 149 | } 150 | .time > .hour, .time > .minutes{ 151 | float: left; 152 | width: 48%; 153 | text-align: center; 154 | } 155 | .wc-month-row > div:nth-child(1), .wc-year-row > div:nth-child(1){ 156 | float: left; 157 | text-align: left; 158 | } 159 | .wc-time-sec{ 160 | color: $secondary-color; 161 | text-align: center; 162 | padding: 0px 10px 10px; 163 | float: left; 164 | width: 100%; 165 | } 166 | .wc-time-sec > .time{ 167 | font-size: 38px; 168 | font-weight: 300; 169 | width: 100%; 170 | text-align: center; 171 | float: left; 172 | } 173 | .time-divider{ 174 | width: 4%; 175 | float: left; 176 | text-align: center; 177 | padding: 0px 10px; 178 | } 179 | .time-view{ 180 | position: absolute; 181 | background: #fff; 182 | width: 100%; 183 | z-index: 1; 184 | top: 40px; 185 | padding: 35px; 186 | border-top: 1px solid $base-color; 187 | } 188 | .time-view-btn { 189 | text-align: center; 190 | } 191 | .meridian{ 192 | text-align: center; 193 | padding: 15px 0px; 194 | } 195 | .button{ 196 | width: 100%; 197 | padding: 10px; 198 | background: $base-color; 199 | color: #fff; 200 | margin: 0px auto; 201 | border: 1px solid $base-color; 202 | border-radius: 3px; 203 | cursor: pointer; 204 | } 205 | .button-sm{ 206 | width: 50%; 207 | } 208 | .time-view .time{ 209 | font-size: 36px; 210 | width: 100%; 211 | margin: 0px auto; 212 | display: inline-block; 213 | padding: 5px 0px 0px 0px; 214 | color: $base-color; 215 | font-weight: 300; 216 | } 217 | .time-view .time-divider{ 218 | padding: 16px 0; 219 | } 220 | .wc-time-sec .time input, .time-view .time input { 221 | display: inline-block; 222 | width: 100%; 223 | background: none; 224 | border: none; 225 | text-align: center; 226 | cursor: pointer; 227 | font-family: inherit; 228 | font-size: 32px; 229 | font-weight: 300; 230 | padding: 0px 10px; 231 | text-align: center; 232 | color: $base-color; 233 | } 234 | .inc-btn, .dec-btn { 235 | font-size: 14px; 236 | display: block; 237 | color: #8e8e8e; 238 | } 239 | .wc-time-sec > .time > .timestate{ 240 | float: left; 241 | padding: 0px 10px; 242 | } 243 | .show-time-picker .wc-date-row{ 244 | width: 33% !important; 245 | } 246 | .show-time-picker .wc-my-sec{ 247 | width: 22% !important; 248 | } 249 | 250 | .wc-month-controls > .fa:hover, .wc-year-controls > .fa:hover{ 251 | color: #fff; 252 | } 253 | .wc-details > .fa:hover{ 254 | color: #ccc; 255 | } 256 | .wc-month-controls{ 257 | padding: 5px; 258 | font-size: 16px; 259 | color: rgba(255, 255, 255, 0.71); 260 | float: right; 261 | } 262 | .wc-year-controls{ 263 | padding: 2px 5px 0px 5px; 264 | font-size: 16px; 265 | color: rgba(255, 255, 255, 0.71); 266 | float: right; 267 | } 268 | .wc-year-controls > .fa , .wc-month-controls > .fa{ 269 | cursor: pointer; 270 | padding: 0px 4px; 271 | } 272 | 273 | .wc-details{ 274 | float: left; 275 | width: 65%; 276 | padding: 10px 0px 10px; 277 | color: $secondary-color; 278 | background: $base-color; 279 | } 280 | .banner-true > .wc-details{ 281 | padding: 10px 0px 10px; 282 | } 283 | .wc-prev{ 284 | float: left; 285 | width:25%; 286 | text-align: left; 287 | padding: 0px 15px; 288 | cursor: pointer; 289 | font-size: 35px; 290 | } 291 | .month-year{ 292 | float: left; 293 | width:50%; 294 | font-size: 18px; 295 | line-height: 35px; 296 | text-align: center; 297 | } 298 | .wc-next{ 299 | float: right; 300 | width:25%; 301 | text-align: right; 302 | padding: 0px 15px; 303 | cursor: pointer; 304 | font-size: 35px; 305 | } 306 | .calendar-days{ 307 | color: #07c; 308 | background: #fff; 309 | } 310 | .cal-util{ 311 | width: 100%; 312 | float: left; 313 | position: absolute; 314 | bottom: 0; 315 | background: #fff; 316 | border-top: 1px solid #f2f2f2; 317 | } 318 | .cal-util > .ok{ 319 | width: 100%; 320 | padding: 5px; 321 | float: left; 322 | color: $base-color; 323 | font-size: 18px; 324 | border-top: 1px solid #d1d1d1; 325 | text-align: center; 326 | cursor: pointer; 327 | } 328 | .ok > i{ 329 | margin-right: 5px; 330 | } 331 | .cal-util > .cancel{ 332 | width: 50%; 333 | float: left; 334 | padding: 10px; 335 | color: $base-color; 336 | font-size: 20px; 337 | } 338 | .cal-util > .ok:hover, .cal-util > .cancel:hover{ 339 | box-shadow: inset 0px 0px 20px #ccc; 340 | } 341 | .range-date-popover .cal-util{ 342 | padding: 10px; 343 | } 344 | .range-date-popover .cal-util .btn-xs{ 345 | float: right; 346 | } 347 | .btn-xs { 348 | padding: 5px 10px; 349 | width: auto; 350 | } 351 | .today > span{ 352 | border: 1px solid $base-color; 353 | background: none; 354 | } 355 | .selected-day > span{ 356 | /*background: #3ce5ed;*/ 357 | background: $base-color; 358 | color: #fff; 359 | } 360 | .calendar-header{ 361 | 362 | } 363 | 364 | .calendar-days td{ 365 | cursor: pointer; 366 | } 367 | .calendar-day:hover > span{ 368 | background: $base-color; 369 | color: #fff; 370 | } 371 | .winkel-calendar table{ 372 | width: 100%; 373 | text-align: center; 374 | font-size: 18px; 375 | border-collapse: collapse; 376 | } 377 | .winkel-calendar table td{ 378 | padding: 0px 0px; 379 | width: calc((100%)/7); 380 | text-align: center; 381 | transition: all .1s linear; 382 | } 383 | .winkel-calendar table td span{ 384 | display: block; 385 | padding: 7px; 386 | margin: 0px; 387 | line-height: 32px; 388 | } 389 | .calendar-header td{ 390 | padding: 5px 0px !important; 391 | } 392 | .months-view, .years-view{ 393 | background: #fff; 394 | width: 100%; 395 | top: 210px; 396 | width: 100%; 397 | height: calc(100% - 210px); 398 | bottom: 0; 399 | text-align: center; 400 | 401 | } 402 | .years-list-view{ 403 | float: left; 404 | width: calc(100% - 60px); 405 | height: 100%; 406 | } 407 | .months-view > span, .years-list-view > span{ 408 | display: inline-block; 409 | width: 25%; 410 | padding: 25px 0px; 411 | cursor: pointer; 412 | font-size: 16px; 413 | } 414 | .years-list-view > span{ 415 | width: 33.3333% 416 | } 417 | .years-view > .prev, .years-view > .next{ 418 | float: left; 419 | width: 30px; 420 | padding: 85px 0px; 421 | cursor: pointer; 422 | font-size: 52px; 423 | } 424 | .years-view > .prev:hover, .years-view > .next:hover{ 425 | color: #ccc; 426 | } 427 | .years-view > .next{ 428 | float: right; 429 | } 430 | .current-month, .current-year{ 431 | color: $base-color; 432 | } 433 | .years-view > span{ 434 | width: 33.3333%; 435 | } 436 | .months-view > span:hover, .years-list-view > span:hover{ 437 | color: $base-color; 438 | } 439 | .banner-true{ 440 | padding-top: 0px !important; 441 | } 442 | .banner-true > .wc-banner{ 443 | margin-bottom : 0px !important; 444 | } 445 | .banner-true > .time-view{ 446 | height: calc(100% - 124px); 447 | top: 142px; 448 | } 449 | .methods{ 450 | clear: left; 451 | padding: 50px 0px; 452 | text-align: center; 453 | } 454 | .month-year i{ 455 | cursor:pointer; 456 | font-size: 10px; 457 | } 458 | 459 | .timepicker-true .wc-month-row{ 460 | font-size: 28px; 461 | padding: 5px 0px 5px 15px; 462 | } 463 | .timepicker-true .wc-month-row > div:nth-child(1), .wc-year-row > div:nth-child(1){ 464 | } 465 | .timepicker-true .wc-month-row > i, .wc-year-row > i{ 466 | padding: 8px 6px; 467 | } 468 | .timepicker-true .wc-my-sec{ 469 | padding: 16px 2px; 470 | } 471 | .timepicker-true .wc-time-sec{ 472 | width: 48%; 473 | padding: 25px 0px; 474 | margin: 0px; 475 | cursor: pointer; 476 | } 477 | .timepicker-true .wc-time-sec:hover{ 478 | color: rgba(255, 255, 255, 0.65); 479 | } 480 | .timepicker-true .wc-time-sec > .time{ 481 | width: 75%; 482 | cursor: pointer; 483 | } 484 | .timepicker-true .time i{ 485 | display: none; 486 | } 487 | .timepicker-true .time-divider{ 488 | padding: 0px; 489 | } 490 | .timepicker-true .timestate{ 491 | padding: 0px; 492 | width: auto; 493 | padding-top: 7px; 494 | font-size: 20px; 495 | font-weight: 300; 496 | } 497 | .year-title{ 498 | width: 35%; 499 | float: left; 500 | line-height: 55px; 501 | font-size: 18px; 502 | color: $secondary-color; 503 | background: $base-color; 504 | } 505 | .year-title i{ 506 | float: right; 507 | padding: 13px 10px 7px 0px; 508 | font-size: 28px; 509 | } 510 | 511 | @media (min-width: 365px) and (max-width: 767px){ 512 | .wc-date-row{ 513 | } 514 | .timepicker-true .wc-date-row { 515 | width: 54%; 516 | padding: 20px 5px 10px; 517 | } 518 | .timepicker-true .wc-my-sec { 519 | padding: 33px 2px 10px; 520 | width: 46%; 521 | } 522 | .timepicker-true .wc-time-sec { 523 | width: 100%; 524 | padding: 0px 0px 15px 0px; 525 | } 526 | .timepicker-true .wc-time-sec > .time { 527 | width: 35%; 528 | float: none; 529 | margin: 0px auto; 530 | font-size: 42px; 531 | } 532 | .timepicker-true .wc-month-row { 533 | font-size: 42px; 534 | padding: 5px 0px 5px 5px; 535 | } 536 | .timepicker-true .wc-year-row { 537 | font-size: 24px; 538 | padding: 15px 0px 0px 5px; 539 | } 540 | .timepicker-true .timestate{ 541 | font-size: 22px; 542 | font-weight: 100; 543 | } 544 | .months-view, .years-view{ 545 | top: 297px; 546 | } 547 | .banner-true > .time-view{ 548 | top: 240px; 549 | } 550 | .time-view .time{ 551 | font-size: 62px; 552 | } 553 | .cuppa-btn-group{ 554 | font-size: 22px; 555 | font-weight: 300; 556 | } 557 | .angular-range-slider{ 558 | height: 5px; 559 | margin: 20px auto 25px auto; 560 | } 561 | .angular-range-slider div.handle{ 562 | width: 45px; 563 | height: 45px; 564 | top: -20px; 565 | font-size: 26px; 566 | } 567 | .time-view-btn{ 568 | padding: 25px 0px; 569 | } 570 | .button-sm { 571 | width: 80%; 572 | padding: 10px; 573 | font-size: 16px; 574 | } 575 | .cuppa-btn-group > .button{ 576 | padding: 5px 15px !important; 577 | } 578 | 579 | } 580 | @media (min-width: 768px) { 581 | .wc-date-popover{ 582 | width: 250px; 583 | position: absolute; 584 | top: 31px; 585 | height: auto; 586 | left: 0; 587 | transform: translateX(0); 588 | } 589 | .wc-day-row{ 590 | padding: 5px 0px; 591 | font-size: 0.25em; 592 | } 593 | .wc-date-row{ 594 | font-size: 1em; 595 | padding: 5px; 596 | } 597 | .wc-my-sec{ 598 | padding: 5px 0px; 599 | } 600 | .timepicker-true .wc-my-sec{ 601 | padding: 15px 3px; 602 | } 603 | .wc-month-row{ 604 | padding: 10px 0px 0px 0px; 605 | font-size: 0.4em; 606 | } 607 | .wc-year-row{ 608 | font-size: 0.3em; 609 | padding: 0px; 610 | } 611 | .month-year{ 612 | font-size: 14px; 613 | line-height: 20px; 614 | cursor: pointer; 615 | } 616 | .wc-month-row > div:nth-child(1), .wc-year-row > div:nth-child(1){ 617 | } 618 | .wc-prev, .wc-next{ 619 | font-size: 18px; 620 | } 621 | .wc-details{ 622 | padding: 10px 0px 10px; 623 | } 624 | .year-title{ 625 | line-height: 40px; 626 | font-size: 16px; 627 | } 628 | .year-title i{ 629 | padding: 11px 10px 10px 0px; 630 | font-size: 18px; 631 | } 632 | .calendar-header td{ 633 | padding: 5px 0px !important; 634 | } 635 | .winkel-calendar table{ 636 | font-size: 14px; 637 | } 638 | .winkel-calendar table td span{ 639 | line-height: 24px; 640 | width: 35px; 641 | height: 35px; 642 | } 643 | .months-view, .years-view{ 644 | top: 40px; 645 | width: 100%; 646 | height: calc(100%); 647 | } 648 | .banner-true .months-view, .banner-true .years-view{ 649 | top: 165px; 650 | height: calc(100% - 128px); 651 | } 652 | .winkel-calendar table td span{ 653 | padding: 6px; 654 | } 655 | .cal-util > .ok{ 656 | font-size: 14px; 657 | padding: 10px; 658 | } 659 | .wc-time-sec > .time{ 660 | font-size: 0.35em; 661 | cursor: pointer; 662 | } 663 | .time i{ 664 | font-size: 10px; 665 | } 666 | .wc-time-sec > .timestate{ 667 | font-size: 16px; 668 | } 669 | .wc-month-row > div:nth-child(1), .wc-year-row > div:nth-child(1){ 670 | min-width: 35px; 671 | } 672 | .wc-month-row > i, .wc-year-row > i{ 673 | font-size: 8px; 674 | } 675 | .cal-util{ 676 | position: relative; 677 | } 678 | .banner-true > .time-view { 679 | top: 159px; 680 | } 681 | .timepicker-true .wc-month-row { 682 | padding: 6px 0px 0px 0px; 683 | font-size: 18px; 684 | } 685 | .timepicker-true .wc-year-row { 686 | padding: 0px 0px 0px 0px; 687 | font-size: 16px; 688 | } 689 | } 690 | .time-view h5{ 691 | text-align: left; 692 | width: 80%; 693 | margin: 0px auto; 694 | padding: 5px 0px; 695 | font-weight: 400; 696 | } 697 | 698 | .cuppa-btn-group{ 699 | display: inline-flex; 700 | } 701 | .cuppa-btn-group > .active{ 702 | background: $base-color !important; 703 | color: #fff !important; 704 | } 705 | .cuppa-btn-group > .button{ 706 | border: 1px solid $base-color; 707 | background: #fff; 708 | border-radius: 3px; 709 | float: left; 710 | margin: 0px; 711 | align-items: initial; 712 | color: $base-color; 713 | width: auto; 714 | padding: 5px 10px; 715 | } 716 | .cuppa-btn-group > .button:first-child{ 717 | border-top-right-radius: 0px; 718 | border-bottom-right-radius: 0px; 719 | border-right: 0px; 720 | } 721 | .cuppa-btn-group > .button:last-child{ 722 | border-top-left-radius: 0px; 723 | border-bottom-left-radius: 0px; 724 | } 725 | 726 | /* Slider CSS*/ 727 | 728 | .slider{ 729 | width: 200px; 730 | height: 5px; 731 | background: #ccc; 732 | border-radius: 5px; 733 | margin: 12px auto; 734 | position: relative; 735 | } 736 | .slider > .circle{ 737 | width: 20px; 738 | height: 20px; 739 | background: #fff; 740 | position: absolute; 741 | top: -8px; 742 | border-radius: 20px; 743 | left: 60px; 744 | box-shadow: 0px 0px 5px #ccc; 745 | cursor: pointer; 746 | } 747 | input[type='number'] { 748 | -moz-appearance:textfield; 749 | } 750 | /* Webkit browsers like Safari and Chrome */ 751 | input[type=number]::-webkit-inner-spin-button, 752 | input[type=number]::-webkit-outer-spin-button { 753 | -webkit-appearance: none; 754 | margin: 0; 755 | } 756 | .range-highlight { 757 | background: #f2f2f2; 758 | } 759 | .clock-icon { 760 | text-align: center; 761 | color: $base-color; 762 | } 763 | .time-close{ 764 | position: absolute; 765 | right: 15px; 766 | top: 15px; 767 | cursor: pointer; 768 | } 769 | .util-list { 770 | list-style: none; 771 | float: left; 772 | padding: 0px; 773 | margin: 0px; 774 | } 775 | .util-list li { 776 | float: left; 777 | padding: 5px; 778 | } 779 | .util-list li a{ 780 | color: #007bff; 781 | cursor: pointer; 782 | } 783 | .util-list li a:hover{ 784 | color: #14569d; 785 | text-decoration: underline; 786 | } 787 | --------------------------------------------------------------------------------