├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.e2e.json ├── package.json ├── projects └── mds-angular-persian-date-time-picker │ ├── README.md │ ├── ng-package.json │ ├── ng-package.prod.json │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── lib │ │ ├── classes │ │ │ ├── enums.ts │ │ │ ├── interfaces.ts │ │ │ └── mds-datetime-picker.utility.ts │ │ ├── core │ │ │ ├── mds-angular-persian-date-time-picker-core.component.css │ │ │ ├── mds-angular-persian-date-time-picker-core.component.html │ │ │ └── mds-angular-persian-date-time-picker-core.component.ts │ │ ├── mds-angular-persian-date-time-picker.component.css │ │ ├── mds-angular-persian-date-time-picker.component.html │ │ ├── mds-angular-persian-date-time-picker.component.ts │ │ ├── mds-angular-persian-date-time-picker.module.ts │ │ ├── pipes │ │ │ ├── persian-number.pipe.ts │ │ │ └── safe-html.pipe.ts │ │ └── service │ │ │ └── mds-datetime-picker-resources.service.ts │ └── public_api.ts │ ├── tsconfig.lib.json │ ├── tsconfig.spec.json │ └── tslint.json ├── src ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.ts │ └── app.module.ts ├── assets │ └── .gitkeep ├── browserslist ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── karma.conf.js ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── tslint.json ├── tsconfig.json └── tslint.json /.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 | -------------------------------------------------------------------------------- /.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 | /package-lock.json 8 | 9 | # dependencies 10 | /node_modules 11 | /projects/mds-angular-persian-date-time-picker/node_modules 12 | 13 | # IDEs and editors 14 | /.idea 15 | .project 16 | .classpath 17 | .c9/ 18 | *.launch 19 | .settings/ 20 | *.sublime-workspace 21 | 22 | # IDE - VSCode 23 | .vscode/* 24 | !.vscode/settings.json 25 | !.vscode/tasks.json 26 | !.vscode/launch.json 27 | !.vscode/extensions.json 28 | 29 | # misc 30 | /.sass-cache 31 | /connect.lock 32 | /coverage 33 | /libpeerconnection.log 34 | npm-debug.log 35 | yarn-error.log 36 | testem.log 37 | /typings 38 | 39 | # System Files 40 | .DS_Store 41 | Thumbs.db 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mds Angular 6+, Bootstrap 4+ Persian and Gregorian DateTimePicker 2 | Persian and gregorian DateTimePicker with `Angular 6+` and `AngularMaterials 6+` and `Bootstrap 4+` 3 | 4 | Installing package via npm: 5 | ``` 6 | npm install mds.angular.datetimepicker@latest 7 | ``` 8 | 9 | [Demo](https://mds92.github.io/MdsDateTimePickerSample/sample/) 10 | 11 | ------------------------------------------ 12 | 13 | ![Mds Angular Persian and Gregorian DateTimePicker](https://raw.githubusercontent.com/Mds92/Mds92.github.io/master/MdsDateTimePickerSample/images/Angular-Persian-Date-Time-Picker-1.jpg) 14 | ![Mds Angular Persian and Gregorian DateTimePicker](https://raw.githubusercontent.com/Mds92/Mds92.github.io/master/MdsDateTimePickerSample/images/Angular-Persian-Date-Time-Picker-2.jpg) 15 | 16 | ------------------------------------------ 17 | ## How To Use: 18 | 1. First add `import` to your module, 19 | ```javascript 20 | import { MdsAngularPersianDateTimePickerModule } from 'mds.angular.datetimepicker'; 21 | 22 | @NgModule({ 23 | declarations: [AppComponent], 24 | imports: [BrowserModule, MdsAngularPersianDateTimePickerModule], 25 | providers: [], 26 | bootstrap: [AppComponent] 27 | }) 28 | export class AppModule { } 29 | ``` 30 | 2. Install Requirements: 31 | You can install these packages as follows: 32 | ``` 33 | npm install mds.persian.datetime 34 | npm install @angular/material @angular/cdk 35 | npm install @angular/animations 36 | npm install jquery 37 | npm install popper.js 38 | npm install bootstrap 39 | ``` 40 | **Guidance:** 41 | You can add bootstrap and jquery to your angular 6+ project as follows: 42 | Open `angular.json` 43 | add these lines 44 | ```json 45 | "styles": [ 46 | "node_modules/@angular/material/prebuilt-themes/indigo-pink.css", 47 | "node_modules/bootstrap/dist/css/bootstrap.min.css", 48 | "src/styles.css" 49 | ], 50 | "scripts": [ 51 | "node_modules/jquery/dist/jquery.min.js", 52 | "node_modules/popper.js/dist/umd/popper.min.js", 53 | "node_modules/bootstrap/dist/js/bootstrap.min.js" 54 | ] 55 | ``` 56 | 57 | 3. Add to view: 58 | ```html 59 | 61 | 62 | ``` 63 | 64 | ------------------------------------------ 65 | 66 | ## Options 67 | 68 | | Name | Type | Values | Description | 69 | --------------|----------------|-------------------|--------------| 70 | **isPersian** | boolean | true, [false] | Is date time picker persian or gregorian 71 | **timePicker** | boolean | true, [false] | Is time picker enable 72 | **templateType** | Enumeration | 1, [2] | You can choose how your date time picker generate
In materials you have animations
1 = bootstrap
2 = material 73 | **inLine** | boolean | false, [true] | Show date time picker as in line in page 74 | **textBoxType** | Enumeration | 1, [2] | If you choose `[inLine]="false"` it shows a textbox as picker
You can choose how should it shows
1 = withButton
2 = withoutButton 75 | **placeHolder** | string | | Place holder of text box 76 | **buttonIcon** | string | | Icon of datepicker button
Sample:
``
Default is 📅
77 | **rangeSelector** | boolean | false, [true] | Is date picker range selector 78 | **format** | string | format string | Format of showing date time
فرمت پیش فرض 1393/09/14 13:49:40
**yyyy**: سال چهار رقمی
**yy**: سال دو رقمی
**MMMM**: نام ماه
**MM**: عدد دو رقمی ماه
**dddd**: نام روز هفته
**dd**: عدد دو رقمی روز ماه
**HH**: ساعت دو رقمی با فرمت 00 تا 24
**hh**: ساعت دو رقمی با فرمت 00 تا 12
**mm**: عدد دو رقمی دقیقه
**ss**: ثانیه دو رقمی
**fff**: میلی ثانیه 3 رقمی
**ff**: میلی ثانیه 2 رقمی
**tt**: ب.ظ یا ق.ظ
79 | 80 | ------------------------------------------ 81 | 82 | ## Events 83 | 84 | | Name | Description | 85 | --------------|--------------| 86 | **dateChanged(date: IMdsAngularDateTimePickerDate)** | Occurs whenever selected date change 87 | **rangeDateChanged(rangeDate: IMdsAngularDateTimePickerRangeDate)** | Occurs whenever selected range date change 88 | **keyDown(event: IEventModel)** | Occurs whenever keydown event fires on datepicker text box 89 | **blur(event: IEventModel)** | Occurs whenever blur event fires on datepicker text box 90 | **focus(event: IEventModel)** | Occurs whenever focus event fires on datepicker text box 91 | 92 | #### Sample 93 | 94 | ```html 95 | 96 | 97 | ``` 98 | 99 | https://github.com/Mds92/Mds92.github.io/tree/master/MdsDateTimePickerSample 100 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "MdsAngularPersianDateTimePickerSample": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "app", 11 | "schematics": {}, 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/MdsAngularPersianDateTimePickerSample", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "src/tsconfig.app.json", 21 | "assets": [ 22 | "src/favicon.ico", 23 | "src/assets" 24 | ], 25 | "styles": [ 26 | "node_modules/@angular/material/prebuilt-themes/indigo-pink.css", 27 | "node_modules/bootstrap/dist/css/bootstrap.min.css", 28 | "src/styles.css" 29 | ], 30 | "scripts": [ 31 | "node_modules/jquery/dist/jquery.min.js", 32 | "node_modules/popper.js/dist/umd/popper.min.js", 33 | "node_modules/bootstrap/dist/js/bootstrap.min.js" 34 | ] 35 | }, 36 | "configurations": { 37 | "production": { 38 | "fileReplacements": [ 39 | { 40 | "replace": "src/environments/environment.ts", 41 | "with": "src/environments/environment.prod.ts" 42 | } 43 | ], 44 | "optimization": true, 45 | "outputHashing": "all", 46 | "sourceMap": false, 47 | "extractCss": true, 48 | "namedChunks": false, 49 | "aot": true, 50 | "extractLicenses": true, 51 | "vendorChunk": false, 52 | "buildOptimizer": true 53 | } 54 | } 55 | }, 56 | "serve": { 57 | "builder": "@angular-devkit/build-angular:dev-server", 58 | "options": { 59 | "browserTarget": "MdsAngularPersianDateTimePickerSample:build" 60 | }, 61 | "configurations": { 62 | "production": { 63 | "browserTarget": "MdsAngularPersianDateTimePickerSample:build:production" 64 | } 65 | } 66 | }, 67 | "extract-i18n": { 68 | "builder": "@angular-devkit/build-angular:extract-i18n", 69 | "options": { 70 | "browserTarget": "MdsAngularPersianDateTimePickerSample:build" 71 | } 72 | }, 73 | "test": { 74 | "builder": "@angular-devkit/build-angular:karma", 75 | "options": { 76 | "main": "src/test.ts", 77 | "polyfills": "src/polyfills.ts", 78 | "tsConfig": "src/tsconfig.spec.json", 79 | "karmaConfig": "src/karma.conf.js", 80 | "styles": [ 81 | "src/styles.css" 82 | ], 83 | "scripts": [], 84 | "assets": [ 85 | "src/favicon.ico", 86 | "src/assets" 87 | ] 88 | } 89 | }, 90 | "lint": { 91 | "builder": "@angular-devkit/build-angular:tslint", 92 | "options": { 93 | "tsConfig": [ 94 | "src/tsconfig.app.json", 95 | "src/tsconfig.spec.json" 96 | ], 97 | "exclude": [ 98 | "**/node_modules/**" 99 | ] 100 | } 101 | } 102 | } 103 | }, 104 | "MdsAngularPersianDateTimePickerSample-e2e": { 105 | "root": "e2e/", 106 | "projectType": "application", 107 | "architect": { 108 | "e2e": { 109 | "builder": "@angular-devkit/build-angular:protractor", 110 | "options": { 111 | "protractorConfig": "e2e/protractor.conf.js", 112 | "devServerTarget": "MdsAngularPersianDateTimePickerSample:serve" 113 | }, 114 | "configurations": { 115 | "production": { 116 | "devServerTarget": "MdsAngularPersianDateTimePickerSample:serve:production" 117 | } 118 | } 119 | }, 120 | "lint": { 121 | "builder": "@angular-devkit/build-angular:tslint", 122 | "options": { 123 | "tsConfig": "e2e/tsconfig.e2e.json", 124 | "exclude": [ 125 | "**/node_modules/**" 126 | ] 127 | } 128 | } 129 | } 130 | }, 131 | "MdsAngularPersianDateTimePicker": { 132 | "root": "projects/mds-angular-persian-date-time-picker", 133 | "sourceRoot": "projects/mds-angular-persian-date-time-picker/src", 134 | "projectType": "library", 135 | "prefix": "lib", 136 | "architect": { 137 | "build": { 138 | "builder": "@angular-devkit/build-ng-packagr:build", 139 | "options": { 140 | "tsConfig": "projects/mds-angular-persian-date-time-picker/tsconfig.lib.json", 141 | "project": "projects/mds-angular-persian-date-time-picker/ng-package.json" 142 | }, 143 | "configurations": { 144 | "production": { 145 | "project": "projects/mds-angular-persian-date-time-picker/ng-package.prod.json" 146 | } 147 | } 148 | }, 149 | "test": { 150 | "builder": "@angular-devkit/build-angular:karma", 151 | "options": { 152 | "main": "projects/mds-angular-persian-date-time-picker/src/test.ts", 153 | "tsConfig": "projects/mds-angular-persian-date-time-picker/tsconfig.spec.json", 154 | "karmaConfig": "projects/mds-angular-persian-date-time-picker/karma.conf.js" 155 | } 156 | }, 157 | "lint": { 158 | "builder": "@angular-devkit/build-angular:tslint", 159 | "options": { 160 | "tsConfig": [ 161 | "projects/mds-angular-persian-date-time-picker/tsconfig.lib.json", 162 | "projects/mds-angular-persian-date-time-picker/tsconfig.spec.json" 163 | ], 164 | "exclude": [ 165 | "**/node_modules/**" 166 | ] 167 | } 168 | } 169 | } 170 | } 171 | }, 172 | "defaultProject": "MdsAngularPersianDateTimePickerSample" 173 | } -------------------------------------------------------------------------------- /e2e/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 | './src/**/*.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 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to MdsAngularPersianDateTimePicker!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mds-angular-persian-date-time-picker-sample", 3 | "version": "0.0.1", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve --port 5300 --open", 7 | "build": "ng build", 8 | "build-lib": "ng build --prod MdsAngularPersianDateTimePicker", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/animations": "^7.2.4", 16 | "@angular/cdk": "^7.3.1", 17 | "@angular/common": "^7.2.4", 18 | "@angular/compiler": "^7.2.4", 19 | "@angular/core": "^7.2.4", 20 | "@angular/forms": "^7.2.4", 21 | "@angular/http": "^7.2.4", 22 | "@angular/material": "^7.3.1", 23 | "@angular/platform-browser": "^7.2.4", 24 | "@angular/platform-browser-dynamic": "^7.2.4", 25 | "@angular/router": "^7.2.4", 26 | "bootstrap": "^4.2.1", 27 | "core-js": "^2.6.4", 28 | "hammerjs": "^2.0.8", 29 | "jquery": "^3.3.1", 30 | "mds.persian.datetime": "^0.9.21", 31 | "popper.js": "^1.14.7", 32 | "rxjs": "^6.4.0", 33 | "zone.js": "^0.8.29" 34 | }, 35 | "devDependencies": { 36 | "@angular-devkit/build-angular": "^0.13.1", 37 | "@angular-devkit/build-ng-packagr": "^0.13.1", 38 | "@angular/cli": "^7.3.1", 39 | "@angular/compiler-cli": "^7.2.4", 40 | "@angular/language-service": "^7.2.4", 41 | "@types/jasmine": "^3.3.8", 42 | "@types/jasminewd2": "^2.0.6", 43 | "@types/node": "^10.12.23", 44 | "codelyzer": "^4.5.0", 45 | "jasmine-core": "^3.3.0", 46 | "jasmine-spec-reporter": "^4.2.1", 47 | "karma": "^4.0.0", 48 | "karma-chrome-launcher": "^2.2.0", 49 | "karma-coverage-istanbul-reporter": "^2.0.4", 50 | "karma-jasmine": "^2.0.1", 51 | "karma-jasmine-html-reporter": "^1.4.0", 52 | "ng-packagr": "^4.7.0", 53 | "protractor": "^5.4.2", 54 | "ts-node": "^8.0.2", 55 | "tsickle": "^0.34.3", 56 | "tslib": "^1.9.3", 57 | "tslint": "^5.12.1", 58 | "typescript": "~3.1.1" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/README.md: -------------------------------------------------------------------------------- 1 | # Mds Angular Persian and Gregorian DateTimePicker 2 | Persian and gregorian DateTimePicker with angular 4 and angular materials 3 | 4 | Installing package via npm: 5 | ``` 6 | npm install mds.angular.datetimepicker@latest 7 | ``` 8 | Also, you need to install `mds.persian.datetime` via npm: 9 | ``` 10 | npm install mds.persian.datetime@latest 11 | ``` 12 | 13 | [Demo](https://mds92.github.io/MdsDateTimePickerSample/sample/) 14 | 15 | ------------------------------------------ 16 | 17 | ![Mds Angular Persian and Gregorian DateTimePicker](https://raw.githubusercontent.com/Mds92/Mds92.github.io/master/MdsDateTimePickerSample/images/Angular-Persian-Date-Time-Picker-1.jpg) 18 | ![Mds Angular Persian and Gregorian DateTimePicker](https://raw.githubusercontent.com/Mds92/Mds92.github.io/master/MdsDateTimePickerSample/images/Angular-Persian-Date-Time-Picker-2.jpg) 19 | 20 | ------------------------------------------ 21 | ## How To Use: 22 | 1. First add `import` to your module, 23 | ```javascript 24 | import { MdsAngularPersianDateTimePickerModule } from 'mds.angular.datetimepicker'; 25 | 26 | @NgModule({ 27 | declarations: [AppComponent], 28 | imports: [BrowserModule, MdsAngularPersianDateTimePickerModule], 29 | providers: [], 30 | bootstrap: [AppComponent] 31 | }) 32 | export class AppModule { } 33 | ``` 34 | 2. Install Requirements: 35 | You can install these packages as follows: 36 | ``` 37 | npm install mds.persian.datetime 38 | npm install --save @angular/material @angular/cdk 39 | npm install --save @angular/animations 40 | npm install jquery 41 | npm install popper.js 42 | npm install bootstrap 43 | ``` 44 | **Guidance** 45 | You can add bootstrap and jquery to your angular 6 project as follows: 46 | Open `angular.json` 47 | add these lines 48 | ```json 49 | "styles": [ 50 | "node_modules/@angular/material/prebuilt-themes/indigo-pink.css", 51 | "node_modules/bootstrap/dist/css/bootstrap.min.css", 52 | "src/styles.css" 53 | ], 54 | "scripts": [ 55 | "node_modules/jquery/dist/jquery.min.js", 56 | "node_modules/popper.js/dist/umd/popper.min.js", 57 | "node_modules/bootstrap/dist/js/bootstrap.min.js" 58 | ] 59 | ``` 60 | 61 | 3. Add to view: 62 | ```html 63 | 65 | 66 | ``` 67 | 68 | ------------------------------------------ 69 | 70 | ## Options 71 | 72 | | Name | Type | Values | Description | 73 | --------------|----------------|-------------------|--------------| 74 | **initialValue** | string | | Initial value of datetime Picker
You can initial date time picker with it.
Example:
`1396/06/06` or `1396/05/06 10:20:00` for persian
`2017/06/06` or `2017-06-06 10:20` for gregorian 75 | **isPersian** | boolean | true, [false] | Is date time picker persian or gregorian 76 | **timePicker** | boolean | true, [false] | Is time picker enable 77 | **templateType** | Enumeration | 1, [2] | You can choose how your date time picker generate
In materials you have animations
1 = bootstrap
2 = material 78 | **inLine** | boolean | false, [true] | Show date time picker as in line in page 79 | **textBoxType** | Enumeration | 1, [2] | If you choose `[inLine]="false"` it shows a textbox as picker
You can choose how should it shows
1 = withButton
2 = withoutButton 80 | **placeHolder** | string | | Place holder of text box 81 | **buttonIcon** | string | | Icon of datepicker button
Sample:
``
Default is 📅
82 | **rangeSelector** | boolean | false, [true] | Is date picker range selector 83 | **format** | string | format string | Format of showing date time
فرمت پیش فرض 1393/09/14 13:49:40
**yyyy**: سال چهار رقمی
**yy**: سال دو رقمی
**MMMM**: نام فارسی ماه
**MM**: عدد دو رقمی ماه
**M**: عدد یک رقمی ماه
**dddd**: نام فارسی روز هفته
**dd**: عدد دو رقمی روز ماه
**d**: عدد یک رقمی روز ماه
**HH**: ساعت دو رقمی با فرمت 00 تا 24
**H**: ساعت یک رقمی با فرمت 0 تا 24
**hh**: ساعت دو رقمی با فرمت 00 تا 12
**h**: ساعت یک رقمی با فرمت 0 تا 12
**mm**: عدد دو رقمی دقیقه
**m**: عدد یک رقمی دقیقه
**ss**: ثانیه دو رقمی
**s**: ثانیه یک رقمی
**fff**: میلی ثانیه 3 رقمی
**ff**: میلی ثانیه 2 رقمی
**f**: میلی ثانیه یک رقمی
**tt**: ب.ظ یا ق.ظ
**t**: حرف اول از ب.ظ یا ق.ظ
84 | 85 | ------------------------------------------ 86 | 87 | ## Events 88 | 89 | | Name | Description | 90 | --------------|--------------| 91 | **dateChanged(date: IMdsAngularDateTimePickerDate)** | Occurs whenever selected date change 92 | **rangeDateChanged(rangeDate: IMdsAngularDateTimePickerRangeDate)** | Occurs whenever selected range date change 93 | **keyDown(event: IEventModel)** | Occurs whenever keydown event fires on datepicker text box 94 | **blur(event: IEventModel)** | Occurs whenever blur event fires on datepicker text box 95 | **focus(event: IEventModel)** | Occurs whenever focus event fires on datepicker text box 96 | 97 | #### Sample 98 | 99 | ```html 100 | 101 | 102 | ``` 103 | 104 | https://github.com/Mds92/Mds92.github.io/tree/master/MdsDateTimePickerSample 105 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/mds-angular-persian-date-time-picker", 4 | "deleteDestPath": false, 5 | "lib": { 6 | "entryFile": "src/public_api.ts" 7 | } 8 | } -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/ng-package.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/mds-angular-persian-date-time-picker", 4 | "lib": { 5 | "entryFile": "src/public_api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mds.angular.datetimepicker", 3 | "version": "3.2.0", 4 | "lockfileVersion": 1 5 | } 6 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mds.angular.datetimepicker", 3 | "version": "3.2.0", 4 | "description": "Persian and gregorian DateTimePicker with angular and materials", 5 | "license": "MIT", 6 | "moduleResolution": "node", 7 | "author": { 8 | "email": "mds_soft@yahoo.com", 9 | "name": "Mohammad Dayyan", 10 | "phone": "+98-903-333-99-23", 11 | "url": "https://github.com/Mds92/mds-angular-datetime-picker-package" 12 | }, 13 | "repository": { 14 | "type": "public", 15 | "url": "https://github.com/Mds92/mds-angular-datetime-picker-package" 16 | }, 17 | "homepage": "https://github.com/Mds92/mds-angular-datetime-picker-package", 18 | "peerDependencies": { 19 | "@angular/common": "^6.0.0-rc.0 || ^6.0.0", 20 | "@angular/core": "^6.0.0-rc.0 || ^6.0.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/src/lib/classes/enums.ts: -------------------------------------------------------------------------------- 1 | export enum TemplateTypeEnum { 2 | bootstrap = 1, 3 | material = 2 4 | } 5 | 6 | export enum TextBoxTypeEnum { 7 | withButton = 1, 8 | withoutButton = 2 9 | } 10 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/src/lib/classes/interfaces.ts: -------------------------------------------------------------------------------- 1 | export interface IMdsAngularDateTimePickerDay { 2 | year: number; 3 | month: number; 4 | day: number; 5 | dayString: string; 6 | disable: boolean; 7 | holiDay: boolean; // تعطیل 8 | today: boolean; // آیا تاریخ برابر با امروز است 9 | isWithinRange: boolean; // آیا در محدوده رنج انتخاب شده می باشد 10 | isStartOrEndOfRange: boolean; // آیا برابر با تاریخ شروع یا پایان می باشد 11 | } 12 | 13 | export interface IMdsAngularDateTimePickerDate { 14 | year: number; 15 | month: number; 16 | day: number; 17 | hour: number; 18 | minute: number; 19 | second: number; 20 | millisecond: number; 21 | formatString: string; 22 | utcDateTime: Date; 23 | } 24 | 25 | export interface IMdsAngularDateTimePickerRangeDate { 26 | startDate: IMdsAngularDateTimePickerDate; 27 | endDate: IMdsAngularDateTimePickerDate; 28 | } 29 | 30 | export interface IMdsAngularDateTimePickerEventModel { 31 | eventArgs: any; 32 | selectedDate: IMdsAngularDateTimePickerDate; 33 | selectedRangeDates: IMdsAngularDateTimePickerRangeDate; 34 | } 35 | 36 | export interface IMdsAngularDateTimePickerDateModel { 37 | selectedDate: IMdsAngularDateTimePickerDate; 38 | selectedRangeDates: IMdsAngularDateTimePickerRangeDate; 39 | } 40 | 41 | export interface IMdsAngularDateTimePickerDataModel { 42 | selectedDate: Date; 43 | selectedRangeDates: Date[]; 44 | } 45 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/src/lib/classes/mds-datetime-picker.utility.ts: -------------------------------------------------------------------------------- 1 | import { Mds } from 'mds.persian.datetime'; 2 | import PersianDateTime = Mds.PersianDateTime; 3 | 4 | export class MdsDatetimePickerUtility { 5 | static toPersianNumber(input: string): string { 6 | if (input == '' || input == null) { return ''; } 7 | input = input.replace(/ي/img, 'ی').replace(/ك/img, 'ک'); 8 | // ۰ ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ 9 | return input.replace(/0/img, '۰') 10 | .replace(/1/img, '۱') 11 | .replace(/2/img, '۲') 12 | .replace(/3/img, '۳') 13 | .replace(/4/img, '۴') 14 | .replace(/5/img, '۵') 15 | .replace(/6/img, '۶') 16 | .replace(/7/img, '۷') 17 | .replace(/8/img, '۸') 18 | .replace(/9/img, '۹'); 19 | } 20 | static toEnglishNumber(input: string): number { 21 | if (input == '' || input == null) { return 0; } 22 | input = input.replace(/ي/img, 'ی').replace(/ك/img, 'ک'); 23 | // ۰ ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ 24 | input = input.replace(/,/img, '') 25 | .replace(/۰/img, '0') 26 | .replace(/۱/img, '1') 27 | .replace(/۲/img, '2') 28 | .replace(/۳/img, '3') 29 | .replace(/۴/img, '4') 30 | .replace(/۵/img, '5') 31 | .replace(/۶/img, '6') 32 | .replace(/۷/img, '7') 33 | .replace(/۸/img, '8') 34 | .replace(/۹/img, '9'); 35 | return Number(input); 36 | } 37 | static toEnglishString(input: string): string { 38 | if (input == '' || input == null) { return ''; } 39 | input = input.replace(/ي/img, 'ی').replace(/ك/img, 'ک'); 40 | // ۰ ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ 41 | input = input.replace(/,/img, '') 42 | .replace(/۰/img, '0') 43 | .replace(/۱/img, '1') 44 | .replace(/۲/img, '2') 45 | .replace(/۳/img, '3') 46 | .replace(/۴/img, '4') 47 | .replace(/۵/img, '5') 48 | .replace(/۶/img, '6') 49 | .replace(/۷/img, '7') 50 | .replace(/۸/img, '8') 51 | .replace(/۹/img, '9'); 52 | return input; 53 | } 54 | static dateTimeToString(date: Date, format: string = ''): string { 55 | if (format == '' || format == null) { 56 | return `${this.zeroPad(date.getFullYear(), '0000')}/${this.zeroPad(date.getMonth() + 1, '00')}/${this.zeroPad(date.getDate(), '00')} ${this.zeroPad(date.getHours(), '00')}:${this.zeroPad(date.getMinutes(), '00')}:${this.zeroPad(date.getSeconds(), '00')}`; 57 | } 58 | let dateTimeString = format; 59 | dateTimeString = dateTimeString.replace(/yyyy/g, this.zeroPad(date.getFullYear(), '0000')); 60 | dateTimeString = dateTimeString.replace(/yy/g, this.zeroPad(date.getFullYear(), '00')); 61 | dateTimeString = dateTimeString.replace(/dddd/g, this.getGregorianWeekDayName(date.getDay())); 62 | dateTimeString = dateTimeString.replace(/dd/g, this.zeroPad(date.getDate(), '00')); 63 | dateTimeString = dateTimeString.replace(/hh/g, this.zeroPad(date.getHours(), '00')); 64 | dateTimeString = dateTimeString.replace(/mm/g, this.zeroPad(date.getMinutes(), '00')); 65 | dateTimeString = dateTimeString.replace(/ss/g, this.zeroPad(date.getSeconds(), '00')); 66 | dateTimeString = dateTimeString.replace(/fff/g, this.zeroPad(date.getMilliseconds(), '000')); 67 | dateTimeString = dateTimeString.replace(/ff/g, this.zeroPad(date.getMilliseconds() / 10, '00')); 68 | dateTimeString = dateTimeString.replace(/MMMM/g, this.getGregorianMonthName(date.getMonth())); 69 | dateTimeString = dateTimeString.replace(/MM/g, this.zeroPad(date.getMonth() + 1, '00')); 70 | dateTimeString = dateTimeString.replace(/M(?!a)/g, (date.getMonth() + 1).toString()); 71 | // dateTimeString = dateTimeString.replace(/s/g, date.getSeconds().toString()); 72 | // dateTimeString = dateTimeString.replace(/f/g, (date.getMilliseconds() / 10).toString()); 73 | // dateTimeString = dateTimeString.replace(/h/g, date.getHours().toString()); 74 | // dateTimeString = dateTimeString.replace(/m/g, date.getMinutes().toString()); 75 | // dateTimeString = dateTimeString.replace(/d/g, date.getDate().toString()); 76 | return dateTimeString; 77 | } 78 | static zeroPad(nr: any, base: string): string { 79 | if (nr == undefined || nr == '') { return base; } 80 | const len = (String(base).length - String(nr).length) + 1; 81 | return len > 0 ? new Array(len).join('0') + nr : nr; 82 | } 83 | static getGregorianMonthName(monthIndex: number): string { 84 | return [ 85 | 'January', 'February', 'March', 'April', 'May', 'June', 86 | 'July', 'August', 'September', 'October', 'November', 'December' 87 | ][monthIndex]; 88 | } 89 | static getGregorianWeekDayName(weekDayIndex: number): string { 90 | return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'FrIMdsAngularDateTimePickerDay', 'Saturday'][weekDayIndex]; 91 | } 92 | static getPersianDateRanges(dateRangeString: string): PersianDateTime[] { 93 | const startEndDateArrayResult = new Array(); 94 | try { 95 | const startEndDateArray = dateRangeString.split(' - '); 96 | const startMdsPersianDateTime = PersianDateTime.parse(startEndDateArray[0]); 97 | const endMdsPersianDateTime = PersianDateTime.parse(startEndDateArray[1]); 98 | if (endMdsPersianDateTime.toDate() < startMdsPersianDateTime.toDate()) { 99 | throw new Error('Range date is not valid. End date must be bigger than start date'); 100 | } 101 | startEndDateArrayResult.push(startMdsPersianDateTime); 102 | startEndDateArrayResult.push(endMdsPersianDateTime); 103 | } catch (e) { 104 | throw new Error('Range date is not valid. You must enter range date string like "1396/03/06 - 1396/03/21"'); 105 | } 106 | return startEndDateArrayResult; 107 | } 108 | static getDateRanges(dateRangeString: string): Date[] { 109 | const startEndDateArrayResult = new Array(); 110 | try { 111 | const startEndDateArray = dateRangeString.split(' - '); 112 | const startDateTime = new Date(Date.parse(startEndDateArray[0])); 113 | const endDateTime = new Date(Date.parse(startEndDateArray[1])); 114 | if (endDateTime < startDateTime) { 115 | throw new Error('Range date is not valid. End date must be bigger than start date'); 116 | } 117 | startEndDateArrayResult.push(startDateTime); 118 | startEndDateArrayResult.push(endDateTime); 119 | } catch (e) { 120 | throw new Error('Range date is not valid. You must enter range date string like "2017/02/06 - 2017/02/18"'); 121 | } 122 | return startEndDateArrayResult; 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/src/lib/core/mds-angular-persian-date-time-picker-core.component.css: -------------------------------------------------------------------------------- 1 | .mds-datetime-picker { 2 | direction: ltr; 3 | } 4 | 5 | .mds-datepicker-years-months { 6 | width: 100%; 7 | height: 100%; 8 | position: absolute; 9 | left: 0; 10 | top: 0; 11 | background-color: #fff; 12 | overflow: hidden; 13 | overflow-y: auto; 14 | z-index: 999; 15 | direction: ltr; 16 | } 17 | 18 | .width100 { 19 | width: 100%; 20 | } 21 | 22 | .minWidth30px { 23 | min-width: 30px; 24 | } 25 | 26 | .text-center { 27 | text-align: center; 28 | } 29 | 30 | .selected-day { 31 | display: block; 32 | margin: 0 auto; 33 | background: #c9e1ff; 34 | } 35 | 36 | .text-muted { 37 | opacity: 0.4; 38 | } 39 | 40 | .warning1 { 41 | background-color: #ffe66d; 42 | } 43 | 44 | .gray1 { 45 | background-color: #e8e8e8; 46 | } 47 | 48 | .gray2 { 49 | background-color: #f8f8f8; 50 | } 51 | 52 | .selected-range { 53 | background-color: #D9F2E6; 54 | } 55 | 56 | .today { 57 | background-color: #b4e5fb; 58 | } 59 | 60 | .text-danger { 61 | color: red; 62 | } 63 | 64 | .disable { 65 | opacity: 0.5; 66 | } 67 | 68 | hr { 69 | margin: 1px 0 1px 0; 70 | } 71 | 72 | button { 73 | width: 100%; 74 | } 75 | 76 | .font18 { 77 | font-size: 18px; 78 | } 79 | 80 | .cursor-pointer { 81 | cursor: pointer; 82 | } 83 | 84 | .table { 85 | margin-bottom: 0; 86 | } 87 | 88 | .table td { 89 | vertical-align: middle; 90 | } 91 | 92 | td.cursor-pointer:hover { 93 | background-color: #e0e0e0; 94 | } 95 | 96 | .table-condensed>tbody>tr>td, 97 | .table-condensed>tbody>tr>th, 98 | .table-condensed>tfoot>tr>td, 99 | .table-condensed>tfoot>tr>th, 100 | .table-condensed>thead>tr>td, 101 | .table-condensed>thead>tr>th { 102 | padding: 2px; 103 | } 104 | 105 | .rotate90 { 106 | transform: rotate(90deg); 107 | } 108 | 109 | .rotate-90 { 110 | transform: rotate(-90deg); 111 | } 112 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/src/lib/core/mds-angular-persian-date-time-picker-core.component.html: -------------------------------------------------------------------------------- 1 |  2 |
3 | 4 | 5 | 6 | 9 | 10 | 11 |
7 |
{{monthNames[(row - 1) * 3 + col - 1]}}
8 |
12 |
13 |
14 | 15 | 16 | 17 | 18 | 22 | 23 | 24 | 25 |
20 | {{year}} 21 |
26 |
27 |
28 | 29 | 30 | 31 | 43 | 44 | 45 | 58 | 59 | 60 | 61 | 63 | 64 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
<<<{{yearString}}{{monthName}}>>>
42 |
46 | 47 | 48 | 49 | 51 | 52 | 53 | 54 | 55 | 56 |
<<<{{monthName}}{{yearString}}>>>
57 |
×✓
{{dayName}}
81 | {{dayObject.dayString}} 82 |
▲▲▲
{{hourString}}{{minuteString}}{{secondString}}
▼▼▼
{{resources.Today}}
113 |
114 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/src/lib/core/mds-angular-persian-date-time-picker-core.component.ts: -------------------------------------------------------------------------------- 1 | import { animate, state, style, transition, trigger } from '@angular/animations'; 2 | import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; 3 | import { Mds } from 'mds.persian.datetime'; 4 | import { TemplateTypeEnum } from '../classes/enums'; 5 | import { IMdsAngularDateTimePickerDate, IMdsAngularDateTimePickerDay, IMdsAngularDateTimePickerRangeDate } from '../classes/interfaces'; 6 | import { MdsDatetimePickerUtility } from '../classes/mds-datetime-picker.utility'; 7 | import { MdsDatetimePickerResourcesService } from '../service/mds-datetime-picker-resources.service'; 8 | import PersianDateTime = Mds.PersianDateTime; 9 | import PersianDayOfWeek = Mds.PersianDayOfWeek; 10 | import GregorianDayOfWeek = Mds.GregorianDayOfWeek; 11 | 12 | @Component({ 13 | selector: 'lib-mds-datetime-picker-core', 14 | templateUrl: './mds-angular-persian-date-time-picker-core.component.html', 15 | styleUrls: ['./mds-angular-persian-date-time-picker-core.component.css'], 16 | animations: [ 17 | trigger('daysStateName', 18 | [ 19 | transition('void => *', [ 20 | style({ transform: 'rotateY(90deg)' }), 21 | animate('200ms ease-in') 22 | ]) 23 | ]), 24 | trigger('monthAndYearSelectorVisibility', 25 | [ 26 | state('visible', style({ opacity: 1, transform: 'rotateY(0deg)' })), 27 | state('hidden', style({ opacity: 0, transform: 'rotateY(90deg)' })), 28 | transition('hidden => visible', [animate('0.2s ease-in')]), 29 | transition('visible => hidden', [animate('0.2s ease-out')]) 30 | ]) 31 | ] 32 | }) 33 | export class MdsAngularPersianDateTimePickerCoreComponent implements OnInit { 34 | 35 | constructor(private resourcesService: MdsDatetimePickerResourcesService) { } 36 | 37 | private initialized = false; 38 | private _persianChar = true; 39 | private _isPersian = true; 40 | private _rangeSelector = true; 41 | private _timePicker = true; 42 | 43 | // @Input() initialValue = ''; 44 | @Input() templateType: TemplateTypeEnum = TemplateTypeEnum.bootstrap; 45 | 46 | @Input() 47 | get rangeSelector(): boolean { 48 | return this._rangeSelector; 49 | } 50 | set rangeSelector(value: boolean) { 51 | if (this._rangeSelector == value) { return; } 52 | this._rangeSelector = value; 53 | this.selectedDateTime = null; 54 | this.selectedStartDateTime = null; 55 | this.selectedEndDateTime = null; 56 | this.timePicker = !value; 57 | if (!this.initialized) { return; } 58 | this.updateMonthDays(); 59 | } 60 | 61 | @Input() 62 | get timePicker(): boolean { 63 | return this._timePicker; 64 | } 65 | set timePicker(value: boolean) { 66 | if (this._timePicker == value) { return; } 67 | this._timePicker = value; 68 | if (!this.initialized) { return; } 69 | this.updateMonthDays(); 70 | } 71 | 72 | /** 73 | * فرمت پیش فرض 1393/09/14 13:49:40 74 | * yyyy: سال چهار رقمی 75 | * yy: سال دو رقمی 76 | * MMMM: نام فارسی ماه 77 | * MM: عدد دو رقمی ماه 78 | * M: عدد یک رقمی ماه 79 | * dddd: نام فارسی روز هفته 80 | * dd: عدد دو رقمی روز ماه 81 | * d: عدد یک رقمی روز ماه 82 | * HH: ساعت دو رقمی با فرمت 00 تا 24 83 | * H: ساعت یک رقمی با فرمت 0 تا 24 84 | * hh: ساعت دو رقمی با فرمت 00 تا 12 85 | * h: ساعت یک رقمی با فرمت 0 تا 12 86 | * mm: عدد دو رقمی دقیقه 87 | * m: عدد یک رقمی دقیقه 88 | * ss: ثانیه دو رقمی 89 | * s: ثانیه یک رقمی 90 | * fff: میلی ثانیه 3 رقمی 91 | * ff: میلی ثانیه 2 رقمی 92 | * f: میلی ثانیه یک رقمی 93 | * tt: ب.ظ یا ق.ظ 94 | * t: حرف اول از ب.ظ یا ق.ظ 95 | **/ 96 | @Input() format = ''; 97 | 98 | @Output() dateChanged = new EventEmitter(); 99 | @Output() rangeDateChanged = new EventEmitter(); 100 | 101 | @Input() 102 | get persianChar(): boolean { 103 | return this._persianChar; 104 | } 105 | set persianChar(value: boolean) { 106 | if (this._persianChar == value) { return; } 107 | this._persianChar = value; 108 | this._yearString = ''; 109 | this.resetMonthDaysWithContent(); 110 | } 111 | 112 | @Input() 113 | get isPersian(): boolean { 114 | return this._isPersian; 115 | } 116 | set isPersian(value: boolean) { 117 | if (this._isPersian == value) { return; } 118 | this._isPersian = value; 119 | this._monthName = ''; 120 | this._monthNames = []; 121 | this._weekdayNames = []; 122 | this._resources = null; 123 | this._year = this._month = 0; 124 | this._yearString = this._monthName = ''; 125 | if (this.dateTime != null) { 126 | this.updateYearsList(); 127 | this.updateMonthDays(); 128 | } 129 | } 130 | private get persianStartDayOfMonth(): PersianDayOfWeek { 131 | return this.persianDateTime.startDayOfMonthDayOfWeek; 132 | } 133 | private get gregorianStartDayOfMonth(): GregorianDayOfWeek { 134 | return new Date(this.dateTime.getFullYear(), this.dateTime.getMonth(), 1).getDay() as GregorianDayOfWeek; 135 | } 136 | 137 | get getSelectedDate(): IMdsAngularDateTimePickerDate { 138 | return this.getSelectedDateObject; 139 | } 140 | get getSelectedRangeDates(): IMdsAngularDateTimePickerRangeDate { 141 | return this.getSelectedRangeDatesObject; 142 | } 143 | private get dateTime(): Date { 144 | return this._dateTime; 145 | } 146 | private set dateTime(dateTime: Date) { 147 | this._dateTime = dateTime == null ? new Date() : new Date(dateTime); 148 | this._persianDateTime = null; 149 | this._year = this._month = 0; 150 | this._hour = this._minute = this._second = 0; 151 | this._hourString = this._minuteString = this._secondString = ''; 152 | this._yearString = this._monthName = ''; 153 | } 154 | private get persianDateTime(): PersianDateTime { 155 | if (this.dateTime == null) { return null; } 156 | if (this._persianDateTime != null) { return this._persianDateTime; } 157 | this._persianDateTime = new PersianDateTime(this.dateTime); 158 | return this._persianDateTime; 159 | } 160 | private get selectedDateTime(): Date { 161 | return this._selectedDateTime; 162 | } 163 | private set selectedDateTime(dateTime: Date) { 164 | this._selectedDateTime = dateTime == null ? null : new Date(dateTime); 165 | this._IMdsAngularDateTimePickerDate = null; 166 | this._selectedPersianDateTime = null; 167 | if (this.rangeSelector || !this.timePicker) { 168 | this.clearTime(dateTime); 169 | } 170 | } 171 | private get selectedPersianDateTime(): PersianDateTime { 172 | if (this._selectedPersianDateTime != null) { return this._selectedPersianDateTime; } 173 | this._selectedPersianDateTime = new PersianDateTime(this.selectedDateTime); 174 | return this._selectedPersianDateTime; 175 | } 176 | private get selectedStartDateTime(): Date { 177 | return this._selectedStartDateTime; 178 | } 179 | private set selectedStartDateTime(dateTime: Date) { 180 | this._selectedStartDateTime = dateTime == null ? null : new Date(dateTime); 181 | this._selectedRangeDatesObject = null; 182 | this._selectedPersianStartDateTime = null; 183 | this.clearTime(dateTime); 184 | } 185 | private get selectedPersianStartDateTime(): PersianDateTime { 186 | if (this._selectedPersianStartDateTime != null) { return this._selectedPersianStartDateTime; } 187 | this._selectedPersianStartDateTime = new PersianDateTime(this.selectedStartDateTime); 188 | return this._selectedPersianStartDateTime; 189 | } 190 | private get selectedEndDateTime(): Date { 191 | return this._selectedEndDateTime; 192 | } 193 | private set selectedEndDateTime(dateTime: Date) { 194 | this._selectedEndDateTime = dateTime == null ? null : new Date(dateTime); 195 | this._selectedRangeDatesObject = null; 196 | this._selectedPersianEndDateTime = null; 197 | this.clearTime(dateTime); 198 | } 199 | private get selectedPersianEndDateTime(): PersianDateTime { 200 | if (this._selectedPersianEndDateTime != null) { return this._selectedPersianEndDateTime; } 201 | this._selectedPersianEndDateTime = new PersianDateTime(this.selectedEndDateTime); 202 | return this._selectedPersianEndDateTime; 203 | } 204 | get resources(): any { 205 | if (this._resources != null) { return this._resources; } 206 | if (this.isPersian) { 207 | this._resources = this.resourcesService.persianResources; 208 | } else { 209 | this._resources = this.resourcesService.englishResources; 210 | } 211 | return this._resources; 212 | } 213 | get year(): number { 214 | if (this._year > 0) { return this._year; } 215 | this._year = this.isPersian 216 | ? this.persianDateTime.year 217 | : this.dateTime.getFullYear(); 218 | return this._year; 219 | } 220 | get yearString(): string { 221 | if (this._yearString != '') { return this._yearString; } 222 | this._yearString = this.persianChar 223 | ? MdsDatetimePickerUtility.toPersianNumber(this.year.toString()) 224 | : this.year.toString(); 225 | return this._yearString; 226 | } 227 | get month(): number { 228 | if (this._month > 0) { return this._month; } 229 | this._month = this.isPersian 230 | ? PersianDateTime.getPersianMonthIndex(this.persianDateTime.monthName) 231 | : this.dateTime.getMonth(); 232 | return this._month; 233 | } 234 | get monthName(): string { 235 | if (this._monthName != '') { return this._monthName; } 236 | this._monthName = this.isPersian 237 | ? this.persianDateTime.monthName 238 | : PersianDateTime.getGregorianMonthNames[this.month]; 239 | return this._monthName; 240 | } 241 | get monthNames(): string[] { 242 | if (this._monthNames != null && this._monthNames.length > 0) { return this._monthNames; } 243 | if (this.isPersian) { 244 | const allPersianMonths = PersianDateTime.getPersianMonthNames; 245 | this._monthNames = [ 246 | allPersianMonths[2], allPersianMonths[1], allPersianMonths[0], 247 | allPersianMonths[5], allPersianMonths[4], allPersianMonths[3], 248 | allPersianMonths[8], allPersianMonths[7], allPersianMonths[6], 249 | allPersianMonths[11], allPersianMonths[10], allPersianMonths[9] 250 | ]; 251 | } else { 252 | this._monthNames = PersianDateTime.getGregorianMonthNames; 253 | } 254 | return this._monthNames; 255 | } 256 | get hour(): number { 257 | if (this._hour > 0) { return this._hour; } 258 | this._hour = this.dateTime.getHours(); 259 | return this._hour; 260 | } 261 | get hourString(): string { 262 | if (this._hourString != '') { return this._hourString; } 263 | this._hourString = this.hour.toString(); 264 | if (this.persianChar) { this._hourString = MdsDatetimePickerUtility.toPersianNumber(this._hourString); } 265 | return this._hourString; 266 | } 267 | get minute(): number { 268 | if (this._minute > 0) { return this._minute; } 269 | this._minute = this.dateTime.getMinutes(); 270 | return this._minute; 271 | } 272 | get minuteString(): string { 273 | if (this._minuteString != '') { return this._minuteString; } 274 | this._minuteString = this.minute.toString(); 275 | if (this.persianChar) { this._minuteString = MdsDatetimePickerUtility.toPersianNumber(this._minuteString); } 276 | return this._minuteString; 277 | } 278 | get second(): number { 279 | if (this._second > 0) { return this._second; } 280 | this._second = this.dateTime.getSeconds(); 281 | return this._second; 282 | } 283 | get secondString(): string { 284 | if (this._secondString != '') { return this._secondString; } 285 | this._secondString = this.second.toString(); 286 | if (this.persianChar) { this._secondString = MdsDatetimePickerUtility.toPersianNumber(this._secondString); } 287 | return this._secondString; 288 | } 289 | get weekdayNames(): string[] { 290 | if (this._weekdayNames != null && this._weekdayNames.length > 0) { return this._weekdayNames; } 291 | if (this.isPersian) { 292 | // حروف اول نام های روز هفته شمسی 293 | const persianWeekDayNames = PersianDateTime.getPersianWeekdayNames; 294 | this._weekdayNames = [ 295 | persianWeekDayNames[6][0], persianWeekDayNames[5][0], persianWeekDayNames[4][0], 296 | persianWeekDayNames[3][0], persianWeekDayNames[2][0], persianWeekDayNames[1][0], 297 | persianWeekDayNames[0][0] 298 | ]; 299 | } else { 300 | const gregorianWeekDayNames = PersianDateTime.getGregorianWeekdayNames; 301 | this._weekdayNames = [ 302 | gregorianWeekDayNames[1][0] + gregorianWeekDayNames[1][1], 303 | gregorianWeekDayNames[2][0] + gregorianWeekDayNames[2][1], 304 | gregorianWeekDayNames[3][0] + gregorianWeekDayNames[3][1], 305 | gregorianWeekDayNames[4][0] + gregorianWeekDayNames[4][1], 306 | gregorianWeekDayNames[5][0] + gregorianWeekDayNames[5][1], 307 | gregorianWeekDayNames[6][0] + gregorianWeekDayNames[6][1], 308 | gregorianWeekDayNames[0][0] + gregorianWeekDayNames[0][1] 309 | ]; 310 | } 311 | return this._weekdayNames; 312 | } 313 | private get getSelectedDateObject(): IMdsAngularDateTimePickerDate { 314 | if (this.selectedDateTime == null) { return null; } 315 | if (this._IMdsAngularDateTimePickerDate != null) { return this._IMdsAngularDateTimePickerDate; } 316 | const format = this.getDateTimeFormat(); 317 | if (this.isPersian) { 318 | this._IMdsAngularDateTimePickerDate = { 319 | year: this.selectedPersianDateTime.year, 320 | month: this.selectedPersianDateTime.month, 321 | day: this.selectedPersianDateTime.day, 322 | hour: this.selectedPersianDateTime.hour, 323 | minute: this.selectedPersianDateTime.minute, 324 | second: this.selectedPersianDateTime.second, 325 | millisecond: this.selectedPersianDateTime.millisecond, 326 | formatString: this.selectedPersianDateTime.toString(format), 327 | utcDateTime: this.selectedDateTime 328 | }; 329 | } else { 330 | this._IMdsAngularDateTimePickerDate = { 331 | year: this.selectedDateTime.getFullYear(), 332 | month: this.selectedDateTime.getMonth(), 333 | day: this.selectedDateTime.getDate(), 334 | hour: this.selectedDateTime.getHours(), 335 | minute: this.selectedDateTime.getMinutes(), 336 | second: this.selectedDateTime.getSeconds(), 337 | millisecond: this.selectedDateTime.getMilliseconds(), 338 | formatString: MdsDatetimePickerUtility.dateTimeToString(this.selectedDateTime, format), 339 | utcDateTime: this.selectedDateTime 340 | }; 341 | } 342 | if (this.persianChar) { 343 | this._IMdsAngularDateTimePickerDate.formatString = MdsDatetimePickerUtility.toPersianNumber(this._IMdsAngularDateTimePickerDate.formatString); 344 | } else { 345 | this._IMdsAngularDateTimePickerDate.formatString = MdsDatetimePickerUtility.toEnglishString(this._IMdsAngularDateTimePickerDate.formatString); 346 | } 347 | return this._IMdsAngularDateTimePickerDate; 348 | } 349 | get getSelectedDay(): number { 350 | if (this.getSelectedDateObject == null || this.rangeSelector) { return 0; } 351 | return this.getSelectedDateObject.day; 352 | } 353 | private get getSelectedRangeDatesObject(): IMdsAngularDateTimePickerRangeDate { 354 | if (!this.rangeSelector || this.selectedStartDateTime == null && this.selectedEndDateTime == null) { return null; } 355 | if (this._selectedRangeDatesObject != null) { return this._selectedRangeDatesObject; } 356 | const format = this.getDateTimeFormat(); 357 | let startDate: IMdsAngularDateTimePickerDate; 358 | let endDate: IMdsAngularDateTimePickerDate; 359 | if (this.isPersian) { 360 | startDate = { 361 | year: this.selectedStartDateTime == null ? 0 : this.selectedPersianStartDateTime.year, 362 | month: this.selectedStartDateTime == null ? 0 : this.selectedPersianStartDateTime.month, 363 | day: this.selectedStartDateTime == null ? 0 : this.selectedPersianStartDateTime.day, 364 | hour: 0, 365 | minute: 0, 366 | second: 0, 367 | millisecond: 0, 368 | formatString: this.selectedStartDateTime == null ? '' : this.selectedPersianStartDateTime.toString(format), 369 | utcDateTime: this.selectedStartDateTime 370 | }; 371 | endDate = { 372 | year: this.selectedPersianEndDateTime == null ? 0 : this.selectedPersianEndDateTime.year, 373 | month: this.selectedPersianEndDateTime == null ? 0 : this.selectedPersianEndDateTime.month, 374 | day: this.selectedPersianEndDateTime == null ? 0 : this.selectedPersianEndDateTime.day, 375 | hour: 0, 376 | minute: 0, 377 | second: 0, 378 | millisecond: 0, 379 | formatString: this.selectedPersianEndDateTime == null ? '' : this.selectedPersianEndDateTime.toString(format), 380 | utcDateTime: this.selectedEndDateTime 381 | }; 382 | } else { 383 | startDate = { 384 | year: this.selectedStartDateTime == null ? 0 : this.selectedStartDateTime.getFullYear(), 385 | month: this.selectedStartDateTime == null ? 0 : this.selectedStartDateTime.getMonth(), 386 | day: this.selectedStartDateTime == null ? 0 : this.selectedStartDateTime.getDate(), 387 | hour: 0, 388 | minute: 0, 389 | second: 0, 390 | millisecond: 0, 391 | formatString: this.selectedStartDateTime == null ? '' : MdsDatetimePickerUtility.dateTimeToString(this.selectedStartDateTime, format), 392 | utcDateTime: this.selectedStartDateTime == null ? null : this.selectedStartDateTime 393 | }; 394 | endDate = { 395 | year: this.selectedEndDateTime == null ? 0 : this.selectedEndDateTime.getFullYear(), 396 | month: this.selectedEndDateTime == null ? 0 : this.selectedEndDateTime.getMonth(), 397 | day: this.selectedEndDateTime == null ? 0 : this.selectedEndDateTime.getDate(), 398 | hour: 0, 399 | minute: 0, 400 | second: 0, 401 | millisecond: 0, 402 | formatString: this.selectedEndDateTime == null ? '' : MdsDatetimePickerUtility.dateTimeToString(this.selectedEndDateTime, format), 403 | utcDateTime: this.selectedEndDateTime == null ? null : this.selectedEndDateTime 404 | }; 405 | } 406 | this._selectedRangeDatesObject = { 407 | startDate: startDate, 408 | endDate: endDate 409 | }; 410 | return this._selectedRangeDatesObject; 411 | } 412 | 413 | get isRejectButtonDisable(): boolean { 414 | return this.selectedStartDateTime == null && this.selectedEndDateTime == null; 415 | } 416 | get isConfirmButtonDisable(): boolean { 417 | return this.selectedStartDateTime == null || this.selectedEndDateTime == null; 418 | } 419 | private get isRangeSelectorReady(): boolean { 420 | if (!this.rangeSelector) { return false; } 421 | if (this.selectedStartDateTime == null) { return false; } // هنوز روز شروع انتخاب نشده است 422 | if (this.selectedStartDateTime != null && this.selectedEndDateTime != null) { return false; } // رنج تاریخ انتخاب شده بود 423 | return true; 424 | } 425 | 426 | daysAnimationStateName = 'visible'; 427 | monthOrYearSelectorVisibilityStateName = 'hidden'; 428 | monthSelectorVisibilityStateName = 'hidden'; 429 | yearSelectorVisibilityStateName = 'hidden'; 430 | 431 | showMonthSelectorBlock: boolean; 432 | showYearsSelectorBlock: boolean; 433 | 434 | // تاریخی که برای نمایش تقویم استفاده می شود 435 | private _dateTime: Date = null; 436 | 437 | private _persianDateTime: PersianDateTime = null; 438 | 439 | // روز انتخاب شده 440 | private _selectedDateTime: Date = null; 441 | 442 | private _selectedPersianDateTime: PersianDateTime = null; 443 | 444 | // روز شروع انتخاب شده در رنج سلکتور 445 | private _selectedStartDateTime: Date = null; 446 | 447 | private _selectedPersianStartDateTime: PersianDateTime = null; 448 | 449 | // روز پایانی انتخاب شده در رنج سلکتور 450 | private _selectedEndDateTime: Date = null; 451 | 452 | private _selectedPersianEndDateTime: PersianDateTime = null; 453 | 454 | yearsToSelect: string[]; 455 | daysInMonth: IMdsAngularDateTimePickerDay[]; 456 | 457 | private _resources: any = null; 458 | private _year = 0; 459 | private _yearString = ''; 460 | private _month = 0; 461 | private _monthName = ''; 462 | private _monthNames: string[] = []; 463 | private _hour = 0; 464 | private _hourString = ''; 465 | private _minute = 0; 466 | private _minuteString = ''; 467 | private _second = 0; 468 | private _secondString = ''; 469 | private _weekdayNames: string[] = []; 470 | private _IMdsAngularDateTimePickerDate: IMdsAngularDateTimePickerDate = null; 471 | 472 | private _selectedRangeDatesObject: IMdsAngularDateTimePickerRangeDate = null; 473 | ngOnInit() { 474 | if (this.rangeSelector) { this.timePicker = false; } 475 | if (!this.isPersian) { this.persianChar = false; } 476 | // if (this.initialValue != '') { 477 | // if (this.rangeSelector) { 478 | // try { 479 | // if (this.isPersian) { 480 | // const ranges = MdsDatetimePickerUtility.getPersianDateRanges(this.initialValue); 481 | // this.setSelectedRangePersianDateTimes(ranges); 482 | // } else { 483 | // const ranges = MdsDatetimePickerUtility.getDateRanges(this.initialValue); 484 | // this.setSelectedRangeDateTimes(ranges); 485 | // } 486 | // this.dateTime = this.selectedStartDateTime; 487 | // } catch (e) { 488 | // console.error('value is in wrong format, when rangeSelector is true you should write value like "1396/03/01 - 1396/03/15" or "2017/3/9 - 2017/3/10"', e); 489 | // this.setSelectedRangeDateTimes(null); 490 | // this.dateTime = null; 491 | // } 492 | // } else { 493 | // try { 494 | // if (this.isPersian) { 495 | // this.dateTime = PersianDateTime.parse(this.initialValue).toDate(); 496 | // } else { 497 | // this.dateTime = new Date(Date.parse(this.initialValue)); 498 | // } 499 | // } catch (e) { 500 | // console.error('value is in wrong format, you should write value like "1396/03/01 11:30:27" or "2017/09/03 11:30:00", you can remove time', e); 501 | // this.dateTime = null; 502 | // } 503 | // } 504 | // } else { 505 | // this.dateTime = null; 506 | // } 507 | // this.updateYearsList(); 508 | // this.updateMonthDays(); 509 | 510 | // if (this.initialValue != '') { 511 | // if (this.rangeSelector) { 512 | // this.fireRangeChangeEvent(); 513 | // } else { 514 | // this.fireChangeEvent(); 515 | // } 516 | // } 517 | this.dateTime = null; 518 | this.updateYearsList(); 519 | this.updateMonthDays(); 520 | this.initialized = true; 521 | } 522 | 523 | private splitStartEndDateString(dateString: string): string[] { 524 | return dateString.split(' - '); 525 | } 526 | private setSelectedRangeDateTimes(dateTimes: Date[]): void { 527 | dateTimes = dateTimes == null || dateTimes.length < 2 ? [null, null] : dateTimes; 528 | this.selectedStartDateTime = dateTimes[0]; 529 | this.selectedEndDateTime = dateTimes[1]; 530 | } 531 | private setSelectedRangePersianDateTimes(persianDateTimes: PersianDateTime[]): void { 532 | const ranges = [ 533 | persianDateTimes[0] == null ? null : persianDateTimes[0].toDate(), 534 | persianDateTimes[1] == null ? null : persianDateTimes[1].toDate() 535 | ]; 536 | this.setSelectedRangeDateTimes(ranges); 537 | } 538 | private clearTime(dateTime: Date): void { 539 | if (dateTime == null) { return; } 540 | dateTime.setHours(0, 0, 0, 0); 541 | } 542 | private getDateTimeFormat(): string { 543 | let format = this.format; 544 | if (format.trim() == '') { 545 | format = 'yyyy/MM/dd'; 546 | if (this.timePicker && !this.rangeSelector) { 547 | format += ' hh:mm:ss'; 548 | } 549 | } else if (this.rangeSelector || !this.timePicker) { 550 | format = format.replace(/t*|f*|s*|m*|h*|H*/, ''); 551 | } 552 | return format; 553 | } 554 | 555 | setDateTimeByDate(dateTime: Date): void { 556 | this.dateTime = this.selectedDateTime = dateTime; 557 | this.selectedStartDateTime = !dateTime ? null : new Date(dateTime); 558 | } 559 | setDateTimeRangesByDate(startDateTime: Date, endDateTime: Date): void { 560 | this.dateTime = this.selectedDateTime = startDateTime; 561 | this.selectedStartDateTime = startDateTime == null ? null : new Date(startDateTime); 562 | this.selectedEndDateTime = endDateTime == null ? null : new Date(endDateTime); 563 | } 564 | setDateTimeByString(dateTimeString: string) { 565 | try { 566 | if (dateTimeString == '') { 567 | this.clearDateTimePicker(); 568 | return; 569 | } 570 | if (this.isPersian) { 571 | if (this.rangeSelector) { 572 | const startAndEndDateArray = this.splitStartEndDateString(dateTimeString); 573 | this.dateTime = this.selectedStartDateTime = PersianDateTime.parse(startAndEndDateArray[0]).toDate(); 574 | this.selectedEndDateTime = PersianDateTime.parse(startAndEndDateArray[1]).toDate(); 575 | if (this.selectedStartDateTime > this.selectedEndDateTime) { 576 | throw new Error('Start date must be less than end date'); 577 | } 578 | } else { 579 | this.dateTime = this.selectedDateTime = PersianDateTime.parse(dateTimeString).toDate(); 580 | } 581 | } else { 582 | if (this.rangeSelector) { 583 | const startAndEndDateArray = this.splitStartEndDateString(dateTimeString); 584 | this.dateTime = this.selectedStartDateTime = new Date(Date.parse(startAndEndDateArray[0])); 585 | this.selectedEndDateTime = new Date(Date.parse(startAndEndDateArray[1])); 586 | if (this.selectedStartDateTime > this.selectedEndDateTime) { 587 | throw new Error('Start date must be less than end date'); 588 | } 589 | } else { 590 | this.dateTime = this.selectedDateTime = new Date(Date.parse(dateTimeString)); 591 | } 592 | } 593 | if (this.rangeSelector) { 594 | this.fireRangeChangeEvent(); 595 | } else { 596 | this.fireChangeEvent(); 597 | } 598 | this.updateMonthDays(); 599 | } catch (e) { 600 | this.clearDateTimePicker(); 601 | throw new Error(e); 602 | } 603 | } 604 | clearDateTimePicker() { 605 | this.dateTime = null; 606 | this.selectedDateTime = this.selectedStartDateTime = this.selectedEndDateTime = null; 607 | this.resetToFalseRangeParametersInMonthDays(); 608 | if (this.rangeSelector) { 609 | this.fireRangeChangeEvent(); 610 | } else { 611 | this.fireChangeEvent(); 612 | } 613 | this.updateMonthDays(); 614 | } 615 | 616 | private updateYearsList(): void { 617 | this.yearsToSelect = []; 618 | const selectedYear = this.year; 619 | for (let i = selectedYear - 37; i <= selectedYear + 37; i++) { 620 | if (this.persianChar) { 621 | this.yearsToSelect.push(MdsDatetimePickerUtility.toPersianNumber(i.toString())); 622 | } else { 623 | this.yearsToSelect.push(i.toString()); 624 | } 625 | } 626 | } 627 | private getDayObject(year: number, month: number, day: number, disabled: boolean, holiDay: boolean, isToday: boolean): IMdsAngularDateTimePickerDay { 628 | let isWithinDateRange = false; 629 | let isStartOrEndOfRange = false; 630 | if (this.rangeSelector && this.selectedStartDateTime != null) { 631 | const dateTime = this.isPersian 632 | ? PersianDateTime.fromPersianDate(year, month, day).toDate() 633 | : new Date(year, month, day); 634 | isWithinDateRange = dateTime >= this.selectedStartDateTime; 635 | if (this.selectedEndDateTime != null) { 636 | isWithinDateRange = isWithinDateRange && dateTime <= this.selectedEndDateTime; 637 | } 638 | isStartOrEndOfRange = 639 | (this.selectedStartDateTime != null && dateTime.getTime() == this.selectedStartDateTime.getTime()) || 640 | (this.selectedEndDateTime != null && dateTime.getTime() == this.selectedEndDateTime.getTime()); 641 | } 642 | return { 643 | year: year, 644 | month: month, 645 | day: day, 646 | dayString: this.persianChar ? MdsDatetimePickerUtility.toPersianNumber(day.toString()) : day.toString(), 647 | disable: disabled, 648 | holiDay: holiDay, 649 | today: isToday, 650 | isWithinRange: isWithinDateRange, 651 | isStartOrEndOfRange: isStartOrEndOfRange 652 | }; 653 | } 654 | 655 | private updateMonthDays(): void { 656 | const days: IMdsAngularDateTimePickerDay[] = []; 657 | let counter = 0, 658 | year = 0, 659 | month = 0; 660 | if (this.isPersian) { 661 | const persianDateTimeNow = PersianDateTime.now; 662 | const today = persianDateTimeNow.day; 663 | const isYearAndMonthInCurrentMonth = persianDateTimeNow.year == this.persianDateTime.year && persianDateTimeNow.month == this.persianDateTime.month; 664 | // روزهای ماه قبل 665 | if (this.persianStartDayOfMonth != PersianDayOfWeek.Saturday) { 666 | const previousPersianMonth = this.persianDateTime.addMonths(-1); 667 | year = previousPersianMonth.year; 668 | month = previousPersianMonth.month; 669 | for (let i = previousPersianMonth.getMonthDays - this.persianStartDayOfMonth + 1; i <= previousPersianMonth.getMonthDays; i++) { 670 | counter++; 671 | days.push(this.getDayObject(year, month, i, true, false, false)); 672 | } 673 | } 674 | // روزهای ماه جاری 675 | year = this.persianDateTime.year; 676 | month = this.persianDateTime.month; 677 | for (let i = 1; i <= this.persianDateTime.getMonthDays; i++) { 678 | counter++; 679 | days.push(this.getDayObject(year, month, i, false, false, isYearAndMonthInCurrentMonth && i == today)); 680 | } 681 | // روزهای ماه بعد 682 | const nextMonthPersianDateTime = this.persianDateTime.addMonths(1); 683 | year = nextMonthPersianDateTime.year; 684 | month = nextMonthPersianDateTime.month; 685 | for (let i = 1; counter <= (6 * 7) - 1; i++) { 686 | counter++; 687 | days.push(this.getDayObject(year, month, i, true, false, false)); 688 | } 689 | // درست کردن راست به چپ بودن تقویم 690 | const temp = days.slice(0); 691 | for (let row = 0; row < 6; row++) { 692 | for (let column = 0; column < 7; column++) { 693 | const index1 = row * 7 + column; 694 | const index2 = Math.abs((row + 1) * 7 - (column + 1)); 695 | days[index1] = temp[index2]; 696 | if (column == 0) { 697 | days[index1].holiDay = true; 698 | } 699 | } 700 | } 701 | } else { 702 | const dateTimeNow = new Date(); 703 | const today = dateTimeNow.getDate(); 704 | const isYearAndMonthInCurrentMonth = dateTimeNow.getMonth() == this.dateTime.getMonth() && dateTimeNow.getFullYear() == this.dateTime.getFullYear(); 705 | // روزهای ماه قبل 706 | if (this.gregorianStartDayOfMonth != GregorianDayOfWeek.Saturday) { 707 | const dateTimeClone = new Date(this.dateTime); 708 | dateTimeClone.setMonth(this.dateTime.getMonth()); 709 | year = dateTimeClone.getFullYear(); 710 | month = dateTimeClone.getMonth(); 711 | const previousMonthDays = new Date(dateTimeClone.getFullYear(), dateTimeClone.getMonth(), 0).getDate(); 712 | for (let i = previousMonthDays - this.gregorianStartDayOfMonth + 1; i <= previousMonthDays; i++) { 713 | counter++; 714 | days.push(this.getDayObject(year, month - 1, i, true, false, false)); 715 | } 716 | } 717 | // روزهای ماه جاری 718 | year = this.dateTime.getFullYear(); 719 | month = this.dateTime.getMonth(); 720 | const currentMonthDays = new Date(year, month, 0).getDate(); 721 | for (let i = 1; i <= currentMonthDays; i++) { 722 | counter++; 723 | days.push(this.getDayObject(year, month, i, false, false, isYearAndMonthInCurrentMonth && i == today)); 724 | } 725 | // روزهای ماه بعد 726 | const nextMonthDateTime = new Date(year, month + 1, 1); 727 | year = nextMonthDateTime.getFullYear(); 728 | month = nextMonthDateTime.getMonth(); 729 | for (let i = 1; counter <= (6 * 7) - 1; i++) { 730 | counter++; 731 | days.push(this.getDayObject(year, month, i, true, false, false)); 732 | } 733 | // تعطیل کردن روزهای جمعه 734 | for (let row = 0; row < 6; row++) { 735 | for (let column = 0; column < 7; column++) { 736 | const index1 = row * 7 + column; 737 | if (column == 0) { 738 | days[index1].holiDay = true; 739 | } 740 | } 741 | } 742 | } 743 | this.daysInMonth = days; 744 | } 745 | private fireChangeEvent(): void { 746 | this.dateChanged.emit(this.getSelectedDateObject); 747 | } 748 | private fireRangeChangeEvent(): void { 749 | this.rangeDateChanged.emit(this.getSelectedRangeDatesObject); 750 | } 751 | 752 | private resetToFalseRangeParametersInMonthDays() { 753 | for (const day of this.daysInMonth) { 754 | day.isWithinRange = false; 755 | day.isStartOrEndOfRange = false; 756 | } 757 | } 758 | 759 | /** 760 | * ریست کردن تمامی اطلاعات روزهای ماه 761 | */ 762 | private resetMonthDaysWithContent() { 763 | if (this.daysInMonth == undefined) { return; } 764 | for (const day of this.daysInMonth) { 765 | day.isWithinRange = false; 766 | day.isStartOrEndOfRange = false; 767 | day.dayString = this.persianChar 768 | ? MdsDatetimePickerUtility.toPersianNumber(day.day.toString()) 769 | : day.day.toString(); 770 | } 771 | } 772 | 773 | /** 774 | * مخفی کردن بلاک های انتخاب ماه و سال 775 | */ 776 | hideSelecMonthAndYearBlock(): void { 777 | this.monthOrYearSelectorVisibilityStateName = 'hidden'; 778 | this.monthSelectorVisibilityStateName = 'hidden'; 779 | this.yearSelectorVisibilityStateName = 'hidden'; 780 | } 781 | resetIncompleteRanges(): void { 782 | if (this.selectedStartDateTime == null || this.selectedEndDateTime == null) { 783 | this.selectedStartDateTime = this.selectedEndDateTime = null; 784 | this._selectedPersianStartDateTime = this._selectedPersianEndDateTime = null; 785 | this.resetToFalseRangeParametersInMonthDays(); 786 | } 787 | } 788 | 789 | /** 790 | * کلیک روی دکمه نام ماه در بالای پیکر برای انتخاب ماه 791 | */ 792 | monthButtonOnClick(): void { 793 | this.monthOrYearSelectorVisibilityStateName = 'visible'; 794 | this.monthSelectorVisibilityStateName = 'visible'; 795 | } 796 | /** 797 | * کلیک روی دکمه سال در بالای پیکر برای انتخاب سال 798 | */ 799 | selectYearButtonOnClick(): void { 800 | this.monthOrYearSelectorVisibilityStateName = 'visible'; 801 | this.yearSelectorVisibilityStateName = 'visible'; 802 | } 803 | monthsBlockVisibilityAnimationDone(): void { 804 | this.updateMonthDays(); 805 | } 806 | yearsBlockVisibilityAnimationDone(): void { 807 | this.updateYearsList(); 808 | this.updateMonthDays(); 809 | } 810 | nextYearButtonOnClick(): void { 811 | if (this.isPersian) { 812 | this.dateTime = this.persianDateTime.addYears(1).toDate(); 813 | } else { 814 | this.dateTime = new Date(this.dateTime.setFullYear(this.dateTime.getFullYear() + 1)); 815 | } 816 | this.updateMonthDays(); 817 | } 818 | nextMonthButtonOnClick(): void { 819 | if (this.isPersian) { 820 | this.dateTime = this.persianDateTime.addMonths(1).toDate(); 821 | } else { 822 | this.dateTime = new Date(this.dateTime.setMonth(this.dateTime.getMonth() + 1)); 823 | } 824 | this.updateMonthDays(); 825 | } 826 | previousMonthButtonOnClick(): void { 827 | if (this.isPersian) { 828 | this.dateTime = this.persianDateTime.addMonths(-1).toDate(); 829 | } else { 830 | this.dateTime = new Date(this.dateTime.setMonth(this.dateTime.getMonth() - 1)); 831 | } 832 | this.updateMonthDays(); 833 | } 834 | previousYearButtonOnClick(): void { 835 | if (this.isPersian) { 836 | this.dateTime = this.persianDateTime.addYears(-1).toDate(); 837 | } else { 838 | this.dateTime = new Date(this.dateTime.setFullYear(this.dateTime.getFullYear() - 1)); 839 | } 840 | this.updateMonthDays(); 841 | } 842 | hourUpButtonOnClick(): void { 843 | this.dateTime = new Date(this.dateTime.setHours(this.dateTime.getHours() + 1)); 844 | } 845 | hourDownButtonOnClick(): void { 846 | this.dateTime = new Date(this.dateTime.setHours(this.dateTime.getHours() - 1)); 847 | } 848 | minuteUpButtonOnClick(): void { 849 | this.dateTime = new Date(this.dateTime.setMinutes(this.dateTime.getMinutes() + 1)); 850 | } 851 | minuteDownButtonOnClick(): void { 852 | this.dateTime = new Date(this.dateTime.setMinutes(this.dateTime.getMinutes() - 1)); 853 | } 854 | secondUpButtonOnClick(): void { 855 | this.dateTime = new Date(this.dateTime.setSeconds(this.dateTime.getSeconds() + 1)); 856 | } 857 | secondDownButtonOnClick(): void { 858 | this.dateTime = new Date(this.dateTime.setSeconds(this.dateTime.getSeconds() - 1)); 859 | } 860 | /** 861 | * انتخاب ماه از روی لیست ماه ها 862 | */ 863 | monthOnClick(selectedMonthName): void { 864 | const monthIndex = this.isPersian 865 | ? PersianDateTime.getPersianMonthIndex(selectedMonthName) 866 | : PersianDateTime.getGregorianMonthNameIndex(selectedMonthName); 867 | if (this.isPersian) { 868 | this.dateTime = this.persianDateTime.setPersianMonth(monthIndex + 1).toDate(); 869 | } else { 870 | const dateTimeClone = new Date(this.dateTime); 871 | dateTimeClone.setMonth(monthIndex); 872 | this.dateTime = new Date(dateTimeClone); 873 | } 874 | this.hideSelecMonthAndYearBlock(); 875 | } 876 | /** 877 | * انتخاب سال از روی لیست سال ها 878 | */ 879 | yearOnClick(selectedYear): void { 880 | const year = this.isPersian ? Number(MdsDatetimePickerUtility.toEnglishNumber(selectedYear)) : Number(selectedYear); 881 | if (this.isPersian) { 882 | this.dateTime = this.persianDateTime.setPersianYear(year).toDate(); 883 | } else { 884 | const dateTimeClone = new Date(this.dateTime); 885 | dateTimeClone.setFullYear(year); 886 | this.dateTime = new Date(dateTimeClone); 887 | } 888 | this.hideSelecMonthAndYearBlock(); 889 | } 890 | todayButtonOnClick(): void { 891 | const dateTimeNow = new Date(); 892 | if (this.dateTime.getFullYear() != dateTimeNow.getFullYear() || this.dateTime.getMonth() != dateTimeNow.getMonth()) { 893 | this.dateTime = dateTimeNow; 894 | this.updateMonthDays(); 895 | } else { 896 | this.dateTime = dateTimeNow; 897 | } 898 | this.selectedDateTime = dateTimeNow; 899 | if (!this.rangeSelector) { this.fireChangeEvent(); } 900 | } 901 | dayButtonOnClick(dayObject: IMdsAngularDateTimePickerDay): void { 902 | // روی روزهای ماه های قبل یا بعد کلیک شده است 903 | if (dayObject.disable) { 904 | if (this.isPersian) { 905 | this.dateTime = PersianDateTime.fromPersianDate(dayObject.year, dayObject.month, dayObject.day).toDate(); 906 | } else { 907 | const dateTimeClone = new Date(this.dateTime); 908 | dateTimeClone.setDate(dayObject.day); 909 | dateTimeClone.setMonth(dayObject.month); 910 | dateTimeClone.setFullYear(dayObject.year); 911 | this.dateTime = dateTimeClone; 912 | } 913 | this.updateMonthDays(); 914 | return; 915 | } 916 | 917 | // نال کردن تاریخ های شروع و پایان برای انتخاب مجدد رنج تاریخ 918 | // در صورتی که رنج گرفته شده بود 919 | if (this.rangeSelector && this.selectedStartDateTime != null && this.selectedEndDateTime != null) { 920 | this.selectedStartDateTime = null; 921 | this.selectedEndDateTime = null; 922 | this.resetToFalseRangeParametersInMonthDays(); 923 | } 924 | // \\ 925 | 926 | // روز انتخاب شده 927 | this.selectedDateTime = this.isPersian 928 | ? PersianDateTime.fromPersianDateTime(dayObject.year, dayObject.month, dayObject.day, this.hour, this.minute, this.second, 0).toDate() 929 | : new Date(dayObject.year, dayObject.month, dayObject.day, this.hour, this.minute, this.second); 930 | 931 | if (this.rangeSelector) { 932 | if (this.selectedStartDateTime == null || this.selectedStartDateTime >= this.selectedDateTime) { 933 | this.resetToFalseRangeParametersInMonthDays(); 934 | this.selectedStartDateTime = this.selectedDateTime; 935 | dayObject.isStartOrEndOfRange = true; 936 | } else { 937 | this.selectedEndDateTime = this.selectedDateTime; 938 | dayObject.isStartOrEndOfRange = true; 939 | } 940 | } 941 | if (this.rangeSelector && this.selectedStartDateTime != null && this.selectedEndDateTime != null) { 942 | this.fireRangeChangeEvent(); 943 | } else if (!this.rangeSelector) { 944 | this.fireChangeEvent(); 945 | } 946 | } 947 | dayButtonOnHover(dayObject: IMdsAngularDateTimePickerDay): void { 948 | if (!this.isRangeSelectorReady) { return; } 949 | // تاریخ روزی که موس روی آن است 950 | const hoverCellDate: Date = this.isPersian 951 | ? PersianDateTime.fromPersianDate(dayObject.year, dayObject.month, dayObject.day).toDate() 952 | : new Date(dayObject.year, dayObject.month, dayObject.day); 953 | for (const day of this.daysInMonth) { 954 | const currentDate: Date = this.isPersian 955 | ? PersianDateTime.fromPersianDate(day.year, day.month, day.day).toDate() 956 | : new Date(day.year, day.month, day.day); 957 | day.isWithinRange = currentDate >= this.selectedStartDateTime && currentDate <= hoverCellDate; 958 | } 959 | } 960 | rejectButtonOnClick(): void { 961 | this.selectedDateTime = null; 962 | this.selectedStartDateTime = this.selectedEndDateTime = null; 963 | this.resetToFalseRangeParametersInMonthDays(); 964 | this.fireRangeChangeEvent(); 965 | } 966 | confirmButtonOnClick(): void { 967 | if (this.selectedStartDateTime != null && this.selectedEndDateTime != null) { 968 | this.fireRangeChangeEvent(); 969 | } 970 | } 971 | } 972 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/src/lib/mds-angular-persian-date-time-picker.component.css: -------------------------------------------------------------------------------- 1 | .datepicker-container { 2 | position: relative; 3 | direction: ltr; 4 | } 5 | 6 | .datepicker { 7 | background: #fff; 8 | position: absolute; 9 | z-index: 999999; 10 | top: 53px; 11 | left: 0; 12 | min-width: 300px; 13 | border: solid 1px #e7e7e7; 14 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12); 15 | border: 1px solid #f7f7f7; 16 | } 17 | 18 | .datepicker-bootstrap { 19 | top: 34px; 20 | } 21 | 22 | .hidden { 23 | display: none; 24 | } 25 | 26 | .cursor-pointer { 27 | cursor: pointer; 28 | } 29 | 30 | .datepicker-box { 31 | border: 1px solid #ccc; 32 | position: relative; 33 | } 34 | 35 | .mat-form-field { 36 | width: 100%; 37 | } 38 | 39 | .calendar-icon { 40 | font-size: 18px; 41 | } 42 | 43 | .calendar-icon[mat-button] { 44 | margin-right: 6px; 45 | float: left; 46 | } 47 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/src/lib/mds-angular-persian-date-time-picker.component.html: -------------------------------------------------------------------------------- 1 | 
2 | 5 | 6 |
7 | 8 |
9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 22 | 23 |
24 |
25 | 26 |
27 |
28 |
29 | 30 |
31 | 33 |
34 | 36 |
37 | 40 | 41 |
42 |
-------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/src/lib/mds-angular-persian-date-time-picker.component.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component, ElementRef, EventEmitter, forwardRef, Input, OnInit, Output, ViewChild } from '@angular/core'; 2 | import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; 3 | import { Mds } from 'mds.persian.datetime'; 4 | import { TemplateTypeEnum, TextBoxTypeEnum } from './classes/enums'; 5 | import { IMdsAngularDateTimePickerDataModel, IMdsAngularDateTimePickerDate, IMdsAngularDateTimePickerDateModel, IMdsAngularDateTimePickerEventModel, IMdsAngularDateTimePickerRangeDate } from './classes/interfaces'; 6 | import { MdsDatetimePickerUtility } from './classes/mds-datetime-picker.utility'; 7 | import { MdsAngularPersianDateTimePickerCoreComponent } from './core/mds-angular-persian-date-time-picker-core.component'; 8 | import PersianDateTime = Mds.PersianDateTime; 9 | 10 | 11 | @Component({ 12 | selector: 'lib-mds-angular-persian-datetimepicker', 13 | templateUrl: './mds-angular-persian-date-time-picker.component.html', 14 | styleUrls: ['./mds-angular-persian-date-time-picker.component.css'], 15 | providers: 16 | [ 17 | { 18 | provide: NG_VALUE_ACCESSOR, 19 | useExisting: forwardRef(() => MdsAngularPersianDateTimePickerComponent), 20 | multi: true 21 | } 22 | ] 23 | }) 24 | export class MdsAngularPersianDateTimePickerComponent implements ControlValueAccessor, OnInit, AfterViewInit { 25 | 26 | constructor(private element: ElementRef) { 27 | const doc = document.getElementsByTagName('html')[0]; 28 | doc.addEventListener('click', (event) => { 29 | const targetElement = event.target as HTMLElement; 30 | if (this.showDatePicker && event.target && 31 | this.element.nativeElement != event.target && 32 | !this.element.nativeElement.contains(event.target) && 33 | !targetElement.hasAttribute('data-mds-persian-datetimepicker')) { 34 | this.showDatePicker = false; 35 | this.mdsDateTimePickerCore.hideSelecMonthAndYearBlock(); 36 | this.mdsDateTimePickerCore.resetIncompleteRanges(); 37 | } 38 | }, false); 39 | } 40 | 41 | private _persianChar = true; 42 | private _isPersian = true; 43 | myControl = new FormControl(); 44 | private afterViewInit = false; 45 | private inClearFunction = false; 46 | private showingDateTimePickerLocked = false; 47 | showDatePicker = false; 48 | 49 | private _selectedDateTime: Date = null; 50 | private _selectedDateTimeRanges: Date[] = null; 51 | 52 | get selectedDateTime(): Date { 53 | return this._selectedDateTime; 54 | } 55 | set selectedDateTime(value: Date) { 56 | if (!this.mdsDateTimePickerCore) { return; } 57 | try { 58 | this.mdsDateTimePickerCore.setDateTimeByDate(!value ? null : new Date(value)); 59 | if (value == null) { 60 | this._selectedDateTime = null; 61 | this.myControl.setValue(""); 62 | } else { 63 | this._selectedDateTime = new Date(value); 64 | this.myControl.setValue(this.mdsDateTimePickerCore.getSelectedDate.formatString); 65 | } 66 | } catch (e) { 67 | this.clear(); 68 | console.error(e); 69 | } 70 | } 71 | get selectedDateTimeRanges(): Date[] { 72 | return this._selectedDateTimeRanges; 73 | } 74 | set selectedDateTimeRanges(values: Date[]) { 75 | if (!this.mdsDateTimePickerCore) { return; } 76 | try { 77 | if (values == null || values.length < 2) { return; } 78 | this.mdsDateTimePickerCore.setDateTimeRangesByDate( 79 | values[0] == null ? null : new Date(values[0]), 80 | values[1] == null ? null : new Date(values[1])); 81 | this._selectedDateTimeRanges = [values[0], values[1]]; 82 | } catch (e) { 83 | this.clear(); 84 | console.error(e); 85 | } 86 | } 87 | 88 | @ViewChild('mdsDateTimePickerCore') private mdsDateTimePickerCore: MdsAngularPersianDateTimePickerCoreComponent; 89 | 90 | //#region Input OutPut 91 | 92 | 93 | /** 94 | * از بوت استرپ استفاده شود یا متریال 95 | * TemplateTypeEnum 96 | */ 97 | @Input() templateType: TemplateTypeEnum = TemplateTypeEnum.bootstrap; 98 | 99 | /** 100 | * نوع نمایش تکس باکس 101 | * TextBoxTypeEnum 102 | */ 103 | @Input() textBoxType: TextBoxTypeEnum = TextBoxTypeEnum.withButton; 104 | /** 105 | * مقدار اولیه 106 | */ 107 | // @Input() initialValue = ''; 108 | /** 109 | * نوع نمایش دیت پیکر به صورت این لاین باشد یا نه 110 | */ 111 | @Input() inLine = true; 112 | /** 113 | * آیا از کاراکترهای فارسی استفاده شود 114 | * وقتی تقویم میلادی است بدون تاثیر می شود 115 | */ 116 | @Input() 117 | get persianChar() { 118 | return this._persianChar; 119 | } 120 | set persianChar(value) { 121 | if (value == this._persianChar) { return; } 122 | this._persianChar = value; 123 | let controlValue = this.myControl.value; 124 | if (this._persianChar) { 125 | controlValue = MdsDatetimePickerUtility.toPersianNumber(controlValue); 126 | } else { 127 | controlValue = MdsDatetimePickerUtility.toEnglishString(controlValue); 128 | } 129 | this.myControl.setValue(controlValue); 130 | } 131 | /** 132 | * آیا دیت پیکر به شکل انتخاب رنج تاریخی باشد یا نه 133 | */ 134 | @Input() rangeSelector = false; 135 | /** 136 | * تقویم میلادی باشد یا شمسی 137 | */ 138 | @Input() 139 | get isPersian() { 140 | return this._isPersian; 141 | } 142 | set isPersian(value) { 143 | if (value == this._isPersian) { return; } 144 | this._isPersian = value; 145 | if (!this.mdsDateTimePickerCore) { return; } 146 | this.clear(); 147 | } 148 | /** 149 | * آیا تایم پیکر نمایش داده بشود یا نه 150 | * در نوع انتخاب رنج تاریخی بدون تاثیر است 151 | */ 152 | @Input() timePicker = true; 153 | /** 154 | * PlaceHolder 155 | */ 156 | @Input() placeHolder = ''; 157 | /** 158 | * آیکون 159 | */ 160 | @Input() buttonIcon = '📅'; 161 | /** 162 | * فرمت پیش فرض 1393/09/14 13:49:40 163 | * yyyy: سال چهار رقمی 164 | * yy: سال دو رقمی 165 | * MMMM: نام فارسی ماه 166 | * MM: عدد دو رقمی ماه 167 | * M: عدد یک رقمی ماه 168 | * dddd: نام فارسی روز هفته 169 | * dd: عدد دو رقمی روز ماه 170 | * d: عدد یک رقمی روز ماه 171 | * HH: ساعت دو رقمی با فرمت 00 تا 24 172 | * H: ساعت یک رقمی با فرمت 0 تا 24 173 | * hh: ساعت دو رقمی با فرمت 00 تا 12 174 | * h: ساعت یک رقمی با فرمت 0 تا 12 175 | * mm: عدد دو رقمی دقیقه 176 | * m: عدد یک رقمی دقیقه 177 | * ss: ثانیه دو رقمی 178 | * s: ثانیه یک رقمی 179 | * fff: میلی ثانیه 3 رقمی 180 | * ff: میلی ثانیه 2 رقمی 181 | * f: میلی ثانیه یک رقمی 182 | * tt: ب.ظ یا ق.ظ 183 | * t: حرف اول از ب.ظ یا ق.ظ 184 | **/ 185 | @Input() format = ''; 186 | 187 | /** 188 | * وقتی تاریخ انتخابی عوض می شود این اونت فراخوانی می شود 189 | */ 190 | @Output() dateChanged = new EventEmitter(); 191 | /** 192 | * وقتی رنج تاریخی انتخاب شده عوض می شود این اونت فراخوانی می شود 193 | */ 194 | @Output() rangeDateChanged = new EventEmitter(); 195 | /** 196 | * وقتی کلیدی روی تکس باکس انتخاب تاریخ فشرده می شود این اونت فراخوانی می شود 197 | */ 198 | @Output() textBoxKeyDown = new EventEmitter(); 199 | /** 200 | * وقتی روی تکس باکس انتخاب تاریخ بلور می شود این اونت فراخوانی می شود 201 | */ 202 | @Output() textBoxBlur = new EventEmitter(); 203 | /** 204 | * وقتی روی تکس باکس انتخاب تاریخ فوکوس می شود این اونت فراخوانی می شود 205 | */ 206 | @Output() textBoxFocus = new EventEmitter(); 207 | /** 208 | * وقتی روی تکس باکس انتخاب تاریخ تغییری ایجاد می شود این اونت فراخوانی می شود 209 | */ 210 | @Output() textBoxChange = new EventEmitter(); 211 | 212 | //#endregion 213 | 214 | 215 | ngOnInit() { 216 | if (!this.isPersian) { this.persianChar = false; } 217 | } 218 | ngAfterViewInit() { 219 | this.afterViewInit = true; 220 | } 221 | 222 | private getEventObject(event: any): IMdsAngularDateTimePickerEventModel { 223 | return { 224 | eventArgs: event, 225 | selectedDate: this.mdsDateTimePickerCore.getSelectedDate, 226 | selectedRangeDates: this.mdsDateTimePickerCore.getSelectedRangeDates 227 | }; 228 | } 229 | private getSelectedDateObject(): IMdsAngularDateTimePickerDateModel { 230 | return { 231 | selectedDate: this.mdsDateTimePickerCore.getSelectedDate, 232 | selectedRangeDates: this.mdsDateTimePickerCore.getSelectedRangeDates 233 | }; 234 | } 235 | showDatePickerButtonClicked() { 236 | this.showDatePicker = !this.showDatePicker; 237 | // if (this.showDatePicker) { 238 | // const rectObject = this.element.nativeElement.getBoundingClientRect(); 239 | // this.topOffset = rectObject.top; 240 | // this.leftOffset = rectObject.left; 241 | // } 242 | } 243 | dateChangedHandler(date: IMdsAngularDateTimePickerDate) { 244 | if (!this.afterViewInit) { return; } 245 | this.dateChanged.emit(date); 246 | if (date != null) { 247 | this.myControl.setValue(date.formatString); 248 | this.selectedDateTime = new Date(date.utcDateTime); 249 | if (!this.showingDateTimePickerLocked) { 250 | this.showDatePicker = false; 251 | } 252 | this.propagateChange(this.getSelectedDateObject()); 253 | } 254 | } 255 | rangeDateChangedHandler(rangeDate: IMdsAngularDateTimePickerRangeDate) { 256 | if (!this.afterViewInit) { return; } 257 | this.myControl.setValue(''); 258 | if (rangeDate == null) { 259 | this.rangeDateChanged.emit(rangeDate); 260 | this.selectedDateTimeRanges = [null, null]; 261 | this.propagateChange(this.getSelectedDateObject()); 262 | return; 263 | } 264 | if (rangeDate.startDate.formatString != '' && rangeDate.endDate.formatString != '') { 265 | this.myControl.setValue(`${rangeDate.startDate.formatString} - ${rangeDate.endDate.formatString}`); 266 | } 267 | this.rangeDateChanged.emit(rangeDate); 268 | if (rangeDate.startDate.formatString != '' && rangeDate.endDate.formatString != '' && !this.showingDateTimePickerLocked) { 269 | this.showDatePicker = false; 270 | } 271 | this.selectedDateTimeRanges = [rangeDate.startDate.utcDateTime, rangeDate.endDate.utcDateTime]; 272 | this.propagateChange(this.getSelectedDateObject()); 273 | } 274 | dateTimeTextBoxOnFocusHandler(event: any) { 275 | document.getElementsByTagName('html')[0].click(); 276 | try { 277 | if (this.selectedDateTime != null) { 278 | this.mdsDateTimePickerCore.setDateTimeByDate(this.selectedDateTime); 279 | } 280 | } catch (e) { 281 | this.clear(); 282 | console.error(e); 283 | } 284 | this.showDatePickerButtonClicked(); 285 | this.textBoxFocus.emit(this.getEventObject(event)); 286 | } 287 | dateTimeTextBoxOnBlurHandler(event: any): void { 288 | let value = !this.myControl.value ? '' : this.myControl.value.trim(); 289 | if (this.persianChar) { 290 | value = MdsDatetimePickerUtility.toPersianNumber(value); 291 | } else { 292 | value = MdsDatetimePickerUtility.toEnglishString(value); 293 | } 294 | const targetElement = event.target as HTMLElement; 295 | if (!targetElement.hasAttribute('data-mds-persian-datetimepicker')) { 296 | this.showingDateTimePickerLocked = true; 297 | this.mdsDateTimePickerCore.setDateTimeByString(value); 298 | this.showingDateTimePickerLocked = false; 299 | } 300 | this.textBoxBlur.emit(this.getEventObject(event)); 301 | } 302 | dateTimeTextBoxOnKeyupHandler(event: any): void { 303 | const value = event.target.value.trim(); 304 | if (value && event.keyCode != 13) { 305 | this.textBoxKeyDown.emit(this.getEventObject(event)); 306 | return; 307 | } 308 | if (!value) { 309 | this.mdsDateTimePickerCore.clearDateTimePicker(); 310 | } else { 311 | this.mdsDateTimePickerCore.setDateTimeByString(value); 312 | } 313 | this.showDatePicker = false; 314 | this.textBoxKeyDown.emit(this.getEventObject(event)); 315 | } 316 | 317 | clear() { 318 | if (this.inClearFunction || !this.mdsDateTimePickerCore) { return; } 319 | // this.initialValue = ''; 320 | this.inClearFunction = true; 321 | this.myControl.setValue(''); 322 | this.selectedDateTime = null; 323 | this.selectedDateTimeRanges = [null, null]; 324 | 325 | this.mdsDateTimePickerCore.clearDateTimePicker(); 326 | this.inClearFunction = false; 327 | } 328 | setDateTime(dateTime: Date) { 329 | try { 330 | this.mdsDateTimePickerCore.setDateTimeByDate(dateTime); 331 | } catch (e) { 332 | this.clear(); 333 | console.error(e); 334 | } 335 | } 336 | setDateTimeRanges(startDateTime: Date, endDateTime: Date) { 337 | try { 338 | this.mdsDateTimePickerCore.setDateTimeRangesByDate(startDateTime, endDateTime); 339 | } catch (e) { 340 | this.clear(); 341 | console.error(e); 342 | } 343 | } 344 | showDateTimePicker() { 345 | this.showDatePicker = true; 346 | } 347 | hideDateTimePicker() { 348 | this.showDatePicker = false; 349 | } 350 | 351 | //#region ControlValueAccessor 352 | 353 | private propagateChange: any = () => { }; 354 | private valIMdsAngularDateTimePickerDateFn: any = () => { }; 355 | 356 | writeValue(model: IMdsAngularDateTimePickerDataModel): void { 357 | if (!model || (!model.selectedDate && !model.selectedRangeDates)) { 358 | this.clear(); 359 | return; 360 | } 361 | if (this.rangeSelector && model.selectedRangeDates) { 362 | this.selectedDateTimeRanges = model.selectedRangeDates; 363 | // this.initialValue = this.selectedDateTimeRanges[0].toString() + '-' + this.selectedDateTimeRanges[1].toString(); 364 | this.mdsDateTimePickerCore.setDateTimeRangesByDate(this.selectedDateTimeRanges[0], this.selectedDateTimeRanges[1]); 365 | } else if (model.selectedDate) { 366 | this.selectedDateTime = model.selectedDate; 367 | // this.initialValue = this.selectedDateTime.toString(); 368 | this.mdsDateTimePickerCore.setDateTimeByDate(this.selectedDateTime); 369 | } 370 | } 371 | registerOnChange(fn: any): void { 372 | this.propagateChange = fn; 373 | } 374 | registerOnTouched(fn: any): void { 375 | 376 | } 377 | setDisabledState?(isDisabled: boolean): void { 378 | // this.disabled = isDisabled 379 | if (isDisabled) { 380 | this.myControl.disable(); 381 | } else { 382 | this.myControl.enable(); 383 | } 384 | } 385 | 386 | valIMdsAngularDateTimePickerDate(c: any) { 387 | return this.valIMdsAngularDateTimePickerDateFn(c.value); 388 | } 389 | 390 | //#endregion 391 | } 392 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/src/lib/mds-angular-persian-date-time-picker.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 4 | import { MatInputModule } from '@angular/material'; 5 | import { MatButtonModule } from '@angular/material/button'; 6 | import { MatFormFieldModule } from '@angular/material/form-field'; 7 | import { MatGridListModule } from '@angular/material/grid-list'; 8 | import { MdsAngularPersianDateTimePickerCoreComponent } from './core/mds-angular-persian-date-time-picker-core.component'; 9 | import { MdsAngularPersianDateTimePickerComponent } from './mds-angular-persian-date-time-picker.component'; 10 | import { SafeHtmlPipe } from './pipes/safe-html.pipe'; 11 | import { PersianNumberPipe } from './pipes/persian-number.pipe'; 12 | 13 | @NgModule({ 14 | imports: [ 15 | CommonModule, 16 | MatFormFieldModule, MatButtonModule, MatInputModule, 17 | MatGridListModule, FormsModule, ReactiveFormsModule 18 | ], 19 | declarations: [ 20 | MdsAngularPersianDateTimePickerCoreComponent, 21 | MdsAngularPersianDateTimePickerComponent, SafeHtmlPipe, PersianNumberPipe], 22 | exports: [ 23 | MdsAngularPersianDateTimePickerComponent 24 | ] 25 | }) 26 | export class MdsAngularPersianDateTimePickerModule { } 27 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/src/lib/pipes/persian-number.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { MdsDatetimePickerUtility } from '../classes/mds-datetime-picker.utility'; 3 | 4 | @Pipe({ name: 'persianNumber' }) 5 | export class PersianNumberPipe implements PipeTransform { 6 | transform(value: string, isPersian: boolean): string { 7 | if (!isPersian) return value; 8 | return MdsDatetimePickerUtility.toPersianNumber(value); 9 | } 10 | } -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/src/lib/pipes/safe-html.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { DomSanitizer } from '@angular/platform-browser'; 3 | 4 | @Pipe({ 5 | name: 'safeHtml' 6 | }) 7 | export class SafeHtmlPipe implements PipeTransform { 8 | constructor(private sanitized: DomSanitizer) { 9 | } 10 | transform(value: string) { 11 | return 'this.sanitized.bypassSecurityTrustHtml(value)'; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/src/lib/service/mds-datetime-picker-resources.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class MdsDatetimePickerResourcesService { 7 | persianResources = { 8 | 'Year': 'سال', 9 | 'Month': 'ماه', 10 | 'Day': 'روز', 11 | 'PreviousYear': 'سال قبل', 12 | 'PreviousMonth': 'ماه قبل', 13 | 'NextYear': 'سال بعد', 14 | 'NextMonth': 'ماه بعد', 15 | 'SelectMonth': 'انتخاب ماه', 16 | 'Today': 'امروز', 17 | 'Confirm': 'تایید', 18 | 'Reject': 'رد', 19 | 'Start': 'شروع', 20 | 'End': 'پایان' 21 | }; 22 | englishResources = { 23 | 'Year': 'Year', 24 | 'Month': 'Month', 25 | 'Day': 'Day', 26 | 'PreviousYear': 'Previous Year', 27 | 'PreviousMonth': 'Previous Month', 28 | 'NextYear': 'Next Year', 29 | 'NextMonth': 'Next Month', 30 | 'SelectMonth': 'Select Month', 31 | 'Today': 'Today', 32 | 'Confirm': 'Confirm', 33 | 'Reject': 'Reject', 34 | 'Start': 'Start', 35 | 'End': 'End' 36 | }; 37 | } 38 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/src/public_api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of mds-angular-persian-date-time-picker 3 | */ 4 | 5 | export * from './lib/classes/enums'; 6 | export * from './lib/classes/interfaces'; 7 | export * from './lib/classes/mds-datetime-picker.utility'; 8 | export * from './lib/mds-angular-persian-date-time-picker.component'; 9 | export * from './lib/mds-angular-persian-date-time-picker.module'; 10 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "target": "es2015", 6 | "module": "es2015", 7 | "moduleResolution": "node", 8 | "declaration": true, 9 | "sourceMap": true, 10 | "inlineSources": true, 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "types": [], 15 | "lib": [ 16 | "dom", 17 | "es2015" 18 | ] 19 | }, 20 | "angularCompilerOptions": { 21 | "annotateForClosureCompiler": true, 22 | "skipTemplateCodegen": true, 23 | "strictMetadataEmit": true, 24 | "fullTemplateTypeCheck": true, 25 | "strictInjectionParameters": true, 26 | "flatModuleId": "AUTOGENERATED", 27 | "flatModuleOutFile": "AUTOGENERATED" 28 | }, 29 | "exclude": [ 30 | "src/test.ts", 31 | "**/*.spec.ts" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /projects/mds-angular-persian-date-time-picker/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "lib", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "lib", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: 'Segoe UI'; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | Welcome to {{ title }}! 4 |

5 |
6 |

Gregorian DateTimePicker

7 |
8 |
9 | 12 | 13 |
14 |
15 | 
{{dateTime | json}}
16 |
17 |
18 |
19 |
20 | 22 | 23 |
24 |
25 | 27 | 28 |
29 |
30 | 31 | 32 |
33 |
34 | 35 | 36 |
37 |
38 | 39 | 40 |
41 |
42 | 43 | 44 |
45 |
46 | 47 | 48 |
49 |
50 | 51 |
52 | 53 |
54 |
55 |
56 | 57 |
58 | 59 |
60 |
61 |
62 |
63 | 64 | 65 |
66 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { IMdsAngularDateTimePickerDataModel, TemplateTypeEnum } from 'projects/mds-angular-persian-date-time-picker/src/public_api'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.css'] 8 | }) 9 | export class AppComponent { 10 | title = 'MdsAngularPersianDateTimePicker Sample'; 11 | 12 | rangeSelector = false; 13 | timePicker = false; 14 | inLine = false; 15 | isPersian = false; 16 | persianChar = false; 17 | format = ''; 18 | initialValue = new Date().toString(); 19 | templateType = TemplateTypeEnum.bootstrap.toString(); 20 | placeHolder = 'Date Time Picker'; 21 | 22 | dateTime: IMdsAngularDateTimePickerDataModel = { 23 | selectedDate: new Date(Date.parse('2016-01-01 3:3:3')), 24 | selectedRangeDates: [] 25 | }; 26 | 27 | 28 | } 29 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { ReactiveFormsModule, FormsModule } from '@angular/forms'; 3 | import { BrowserModule } from '@angular/platform-browser'; 4 | import { MdsAngularPersianDateTimePickerModule } from 'projects/mds-angular-persian-date-time-picker/src/lib/mds-angular-persian-date-time-picker.module'; 5 | import { AppComponent } from './app.component'; 6 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | AppComponent 11 | ], 12 | imports: [ 13 | BrowserAnimationsModule, 14 | BrowserModule, FormsModule, ReactiveFormsModule, 15 | MdsAngularPersianDateTimePickerModule, 16 | ], 17 | providers: [], 18 | bootstrap: [AppComponent] 19 | }) 20 | export class AppModule { } 21 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mds92/mds-angular-datetime-picker-package/9d735b465850924dec0fefcfa9596fd1f9d3fc15/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed 5 | > 0.5% 6 | last 2 versions 7 | Firefox ESR 8 | not dead 9 | # IE 9-11 -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * In development mode, to ignore zone related error stack frames such as 11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can 12 | * import the following file, but please comment it out in production mode 13 | * because it will have performance impact when throw error 14 | */ 15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 16 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mds92/mds-angular-datetime-picker-package/9d735b465850924dec0fefcfa9596fd1f9d3fc15/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MdsAngularPersianDateTimePicker Sample 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | import 'hammerjs'; 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 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /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/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Web Animations `@angular/platform-browser/animations` 51 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 52 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 53 | **/ 54 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 55 | 56 | /** 57 | * By default, zone.js will patch all possible macroTask and DomEvents 58 | * user can disable parts of macroTask/DomEvents patch by setting following flags 59 | */ 60 | 61 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 62 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 63 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 64 | 65 | /* 66 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 67 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 68 | */ 69 | // (window as any).__Zone_enable_cross_context_check = true; 70 | 71 | /*************************************************************************************************** 72 | * Zone JS is required by default for Angular itself. 73 | */ 74 | import 'zone.js/dist/zone'; // Included with Angular CLI. 75 | 76 | 77 | 78 | /*************************************************************************************************** 79 | * APPLICATION IMPORTS 80 | */ 81 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mds92/mds-angular-datetime-picker-package/9d735b465850924dec0fefcfa9596fd1f9d3fc15/src/styles.css -------------------------------------------------------------------------------- /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/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "src/test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2015", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es5", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2017", 18 | "dom" 19 | ], 20 | "paths": { 21 | "MdsAngularPersianDateTimePicker": [ 22 | "dist/mds-angular-persian-date-time-picker" 23 | ], 24 | "MdsAngularPersianDateTimePicker/*": [ 25 | "dist/mds-angular-persian-date-time-picker/*" 26 | ] 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "deprecation": { 15 | "severity": "warn" 16 | }, 17 | "eofline": true, 18 | "forin": true, 19 | "import-blacklist": [ 20 | true, 21 | "rxjs/Rx" 22 | ], 23 | "import-spacing": true, 24 | "indent": [ 25 | true, 26 | "spaces" 27 | ], 28 | "interface-over-type-literal": true, 29 | "label-position": true, 30 | "max-line-length": [ 31 | false, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-arg": true, 47 | "no-bitwise": true, 48 | "no-console": [ 49 | true, 50 | "debug", 51 | "info", 52 | "time", 53 | "timeEnd", 54 | "trace" 55 | ], 56 | "no-construct": true, 57 | "no-debugger": true, 58 | "no-duplicate-super": true, 59 | "no-empty": false, 60 | "no-empty-interface": true, 61 | "no-eval": true, 62 | "no-inferrable-types": [ 63 | true, 64 | "ignore-params" 65 | ], 66 | "no-misused-new": true, 67 | "no-non-null-assertion": true, 68 | "no-shadowed-variable": true, 69 | "no-string-literal": false, 70 | "no-string-throw": true, 71 | "no-switch-case-fall-through": true, 72 | "no-trailing-whitespace": true, 73 | "no-unnecessary-initializer": true, 74 | "no-unused-expression": true, 75 | "no-use-before-declare": true, 76 | "no-var-keyword": true, 77 | "object-literal-sort-keys": false, 78 | "one-line": [ 79 | true, 80 | "check-open-brace", 81 | "check-catch", 82 | "check-else", 83 | "check-whitespace" 84 | ], 85 | "prefer-const": true, 86 | "quotemark": [ 87 | true, 88 | "single" 89 | ], 90 | "radix": true, 91 | "semicolon": [ 92 | true, 93 | "always" 94 | ], 95 | "triple-equals": [ 96 | false, 97 | "allow-null-check" 98 | ], 99 | "typedef-whitespace": [ 100 | true, 101 | { 102 | "call-signature": "nospace", 103 | "index-signature": "nospace", 104 | "parameter": "nospace", 105 | "property-declaration": "nospace", 106 | "variable-declaration": "nospace" 107 | } 108 | ], 109 | "unified-signatures": true, 110 | "variable-name": false, 111 | "whitespace": [ 112 | true, 113 | "check-branch", 114 | "check-decl", 115 | "check-operator", 116 | "check-separator", 117 | "check-type" 118 | ], 119 | "no-output-on-prefix": true, 120 | "use-input-property-decorator": true, 121 | "use-output-property-decorator": true, 122 | "use-host-property-decorator": true, 123 | "no-input-rename": true, 124 | "no-output-rename": true, 125 | "use-life-cycle-interface": true, 126 | "use-pipe-transform-interface": true, 127 | "component-class-suffix": true, 128 | "directive-class-suffix": true 129 | } 130 | } 131 | --------------------------------------------------------------------------------