Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/RenovoSolutions/ngx-datetimepicker
An Angular component for a customizable date and time picker
https://github.com/RenovoSolutions/ngx-datetimepicker
calendar calendar-component date-picker datepicker datetime datetime-picker picker timepicker timepickerdialog
Last synced: 3 months ago
JSON representation
An Angular component for a customizable date and time picker
- Host: GitHub
- URL: https://github.com/RenovoSolutions/ngx-datetimepicker
- Owner: RenovoSolutions
- License: mit
- Archived: true
- Created: 2017-02-22T20:17:37.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-02-13T14:38:48.000Z (9 months ago)
- Last Synced: 2024-07-21T22:44:47.841Z (4 months ago)
- Topics: calendar, calendar-component, date-picker, datepicker, datetime, datetime-picker, picker, timepicker, timepickerdialog
- Language: TypeScript
- Size: 3.15 MB
- Stars: 31
- Watchers: 8
- Forks: 24
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - RenovoSolutions/ngx-datetimepicker - An Angular component for a customizable date and time picker (UI Components / Form)
README
> [!NOTE]
> This project is no longer actively maintained.
>
> We want to thank everyone for their contributions and hope we've helped you in your coding journey.
# ngx-datetime-picker
- No jQuery or other external dependencies
- Three separate components for Date Time, Date, and Time picker
- When being used on a mobile or touch devices, it falls back to HTML5 inputs of date, datetime-local, and time
[](https://www.npmjs.com/package/ngx-datetime-picker)
[](https://www.npmjs.com/package/ngx-datetime-picker)
## Demo
Live demo can be found at .
Date time picker that falls back to native HTML5 components on mobile
## DateTime formats
Date formats are called at `datePicker.component.ts` - functions `formattedDate()` and `mobileFormattedDate()`.
Time formats are called at `timePicker.component.ts` - functions `formattedTime()` and `mobileFormattedTime()`.
DateTime formats are called at `dateTimePicker.component.ts` - functions `formattedDate()` and `mobileFormattedDate()`.
Change these calls to a different format to get different results.
All formats are defined in [`date.service.ts`](/src/services/date.service.ts).
## Usage
```typescript
import { DateTimePickerModule} from 'ngx-datetime-picker';
@NgModule({
imports: [
DateTimePickerModule
],
```
```html
```
Additional options for each picker:
- `[disableButton]="false" (default)`
- `[disableInput]="false" (default)`
- `[disablePicker]="false" (default)`
- `[doNotCloseOnDateSet]="false" (default)`
Additional options for `ngx-date-picker` and `ngx-datetime-picker`:
- `[min]="null" (default)`
- `[max]="null" (default)`
Additional options for `ngx-time-picker` and `ngx-datetime-picker`:
- `[use24HourClock]="false" (default)`
## CSS
Compile `ngx-datetime-picker.css` from SCSS and copy into to your project.
If you are using angular-cli, the css can be added to your `angular-cli.json`:
```typescript
"styles": [
"../node_modules/ngx-datetime-picker/ngx-datetime-picker.css"
]
```
[SCSS files](/src/scss/) available for quick customization. Override the defaults, compile, and include them in your project.
## Development:
### Work flow
- Clone repository to your machine.
- Run `npm run setup` to prepare the project.
- Live edit mode with `npm run serve`.
- Run tests with watcher with `npm run test`.
- Run tests without a watcher with `npm run test.once`.
- Prepare for distribution with `npm run dist`. (Note: you may need to also run `tsc index.ts` if you have updated the exported values)
- Test a demo project using the exported ngModule with `npm run demo`.
- Sass files are compiled locally using [Koala](http://koala-app.com/).
- Set Koala to watch `date.component.scss` and compile it to `ngx-datetimepicker > src > assets` as `ngx-datetime-picker.css`.
- _Optionally_, you can use to publish the demo install to github pages. First run `npm run demo`, then switch into your demo directory with `cd demo`. From there, you can copy and paste the two commands to publish to github pages:
```shell
ng build --prod --aot --base-href "https://renovosolutions.github.io/ngx-datetimepicker/"
ngh --repo=https://github.com/renovosolutions/ngx-datetimepicker.git
```
_Note: this will publish to the `gh-pages` branch and you wil need to authenticate again._
### Requirements
- angular-cli 12.2.16 or higher, known issues with version 13
- node 10 or higher
### Contributors
| [
](https://github.com/JoshDSommer) | [
](https://github.com/BrentWMiller) | [
](https://github.com/benjamin-a-kuntz) | [
](https://github.com/SFarageNIS) | [
](https://github.com/TheLand) | [
](https://github.com/JojiePalahang) | [
](https://github.com/SamGraber) | [
](https://github.com/alecrem) | [
](https://github.com/jrquiick17) |
| :-----------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |
| [Josh Sommer](https://github.com/JoshDSommer) | [Brent Miller](https://github.com/BrentWMiller) | [Benjamin Kuntz](https://github.com/benjamin-a-kuntz) | [Steven Farage](https://github.com/SFarageNIS) | [Marco Mantovani](https://github.com/TheLand) | [Jojie Palahang](https://github.com/JojiePalahang) | [Sam Graber](https://github.com/SamGraber) | [Alejandro Cremades](https://github.com/alecrem) | [Jeremy Quick](https://github.com/jrquick17) |
| | | | | | | | | [Personal](https://jrquick.com) |