# @ngageoint/md-date-time-picker > An implementation of the Material Design Picker components in vanilla CSS, JS and HTML Latest version **2.3.0** (published 2023-02-01) · MIT license · 0 weekly downloads ## Install ```sh npm install @ngageoint/md-date-time-picker pnpm add @ngageoint/md-date-time-picker yarn add @ngageoint/md-date-time-picker bun add @ngageoint/md-date-time-picker ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.3.0 | | Published | 2023-02-01 | | First published | 2023-02-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 7 | | Unpacked size | 6.1 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Puranjay Jain | | Maintainers | restjohn, kgilland, danielbarela, ngageoint-npm, gisjedi, caldwellc, rachelais, mheppner, schmidtk | | Keywords | material, design, date, time, picker, pickers, dialog, calendar, clock, input | ## Links - npm: https://www.npmjs.com/package/@ngageoint/md-date-time-picker - Repository: https://github.com/restjohn/md-date-time-picker - Homepage: https://puranjayjain.github.io/md-date-time-picker - Issues: https://github.com/puranjayjain/md-date-time-picker/issues - npm.io page: https://npm.io/package/@ngageoint/md-date-time-picker ## Dependencies (7) - [moment](https://npm.io/package/moment.md) ^2.29.4 - [draggabilly](https://npm.io/package/draggabilly.md) ^2.1.1 - [babel-plugin-transform-minify-booleans](https://npm.io/package/babel-plugin-transform-minify-booleans.md) ^6.8.0 - [babel-plugin-transform-property-literals](https://npm.io/package/babel-plugin-transform-property-literals.md) ^6.8.1 - [babel-plugin-transform-es2015-modules-umd](https://npm.io/package/babel-plugin-transform-es2015-modules-umd.md) ^6.23.0 - [babel-plugin-transform-merge-sibling-variables](https://npm.io/package/babel-plugin-transform-merge-sibling-variables.md) ^6.8.2 - [babel-plugin-transform-member-expression-literals](https://npm.io/package/babel-plugin-transform-member-expression-literals.md) ^6.8.1 ## Alternatives - [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads - [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads - [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads - [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads - [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads ## Recent versions - 2.3.0 (latest) — 2023-02-01 ## README # md-date-time-picker [![Gitter](https://badges.gitter.im/puranjayjain/md-date-time-picker.svg)](https://gitter.im/puranjayjain/md-date-time-picker?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![GitHub version](https://img.shields.io/github/release/puranjayjain/md-date-time-picker.svg)](https://badge.fury.io/gh/puranjayjain%2Fmd-date-time-picker) [![npm version](https://img.shields.io/npm/v/md-date-time-picker.svg)](https://badge.fury.io/js/md-date-time-picker) [![Bower version](https://img.shields.io/bower/v/md-date-time-picker.svg)](https://badge.fury.io/bo/puranjayjain%2Fmd-date-time-picker) [![Dependency Status](https://david-dm.org/puranjayjain/md-date-time-picker.svg)](https://david-dm.org/puranjayjain/md-date-time-picker) [![Maintenance](https://img.shields.io/maintenance/yes/2017.svg)]() [![Issues](https://img.shields.io/github/issues/puranjayjain/md-date-time-picker.svg)](https://github.com/puranjayjain/md-date-time-picker/issues) [![Forks](https://img.shields.io/github/forks/puranjayjain/md-date-time-picker.svg)](https://github.com/puranjayjain/md-date-time-picker/network) [![Stars](https://img.shields.io/github/stars/puranjayjain/md-date-time-picker.svg)](https://github.com/puranjayjain/md-date-time-picker/stargazers) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/puranjayjain/md-date-time-picker/master/LICENSE.md) Share the :heart: ! [![Twitter](https://img.shields.io/twitter/url/https/github.com/puranjayjain/md-date-time-picker.svg?style=social)](https://twitter.com/intent/tweet?text=check%20out&url=https://puranjayjain.github.io/md-date-time-picker&via=puranjayjain) [![Google Plus](https://www.gstatic.com/images/icons/gplus-16.png)](https://plus.google.com/share?url=https://puranjayjain.github.io/md-date-time-picker) [![Facebook](https://github.com/puranjayjain/md-date-time-picker/blob/master/src/images/FB-f-Logo__blue_29.png)](https://www.facebook.com/sharer.php?u=https://puranjayjain.github.io/md-date-time-picker&media=https://puranjayjain.github.io/md-date-time-picker/favicon-128.png&description=An%20implementation%20of%20Material%20Design%20Picker%20components%20in%20vanilla%20CSS,%20JS,%20and%20HTML) :heart: the package? Then :star: it! > An implementation of [Material Design Picker](https://www.google.com/design/spec/components/pickers.html) components in vanilla CSS, JS, and HTML ## NOTICE This is a mod of the original `md-date-time-picker` package to allow a combined date and time field. This package is published to the [@ngageoint](https://github.com/ngageoint) GitHub packages for use by [MAGE Server](https://github.com/ngageoint/mage-server). This package is deprecated and no longer under maintenance. The files in this repository are copies from [MAGE Server](https://github.com/ngageoint/mage-server/tree/master/web-app/src/ng1/vendor/md-date-time-picker). The build/bundling of the source files no longer works correctly, so any modifications to the source would require repairing the bundling process. ## Documentation The Documentation is at [https://puranjayjain.github.io/md-date-time-picker](https://puranjayjain.github.io/md-date-time-picker) ## Browser Support Supported evergreen browsers: - Chrome (and Chrome for Android) - Edge - Firefox - Opera Supported versioned browsers: - Internet Explorer 8+ - Safari 8+ - Mobile Safari 8+ - Android Browser 4.3+ ## Dependency ### Moment Why? because parsing dates correctly is not every browser's cup of :tea: and also according to [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) standard Moreover, it makes dealing with timezones easier. ok. Not satisfied with the answer? Let's take an example: ```js new Date('1/10/2016') ``` What should it output? ... well it is interpreted as 1st October 2016 in some browsers and 10th January 2016 in some. For more information refer [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse). ### Draggabilly This is an optional dependency if you want to make the dial draggable in time picker in minute which makes it useful there to select values which are not a divisor of 5 (e.g 3, 6) or in layman terms the values which come between 5, 10, 15, etc. ### What's included In the repo you'll find the following directories and files. | File/Folder | Provides | |-----------------|--------------------------------------------------------------------------| | .github | Contains CONTRIBUTING.md, ISSUE_TEMPLATE.md and PULL_REQUEST_TEMPLATE.md | | gulpfile.js | gulp configuration. | | LICENSE.md | Project license information. | | package.json | npm package information. | | bower.json | bower package information. | | README.md | Details for quickly understanding the project. | | src | Source code. | | dist | Distributable code. | | test | Project test files. | ### Build To get started modifying the components or the docs, first install the necessary dependencies, from the root of the project: ```bash npm install ``` After successfully installing the above components ```bash ./node_modules/gulp default ``` Most changes made to files inside the `src` directory will cause the page to reload. This page can also be loaded up on physical devices thanks to BrowserSync. ## Tests ```bash $ npm run cs:scss //lint all scss files $ npm run cs:js //lint and fix all js files $ npm run cs //run both cs jobs ``` ## Versioning For transparency into our release cycle and in striving to maintain backward compatibility, this project is maintained under [the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible. ## License © Puranjay Jain, 2016. Licensed under an [MIT License](https://github.com/puranjayjain/md-date-time-picker/blob/master/LICENSE.md). ## Custom build To allow only "sharp" time (e.g. 1 sharp, 2 sharp...etc) to be picked in time picker, see: --- _Source: https://npm.io/package/@ngageoint/md-date-time-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._