diff --git a/components/datetimepicker/.npmignore b/components/datetimepicker/.npmignore new file mode 100644 index 0000000..50ddd30 --- /dev/null +++ b/components/datetimepicker/.npmignore @@ -0,0 +1,3 @@ +js/moment-with-locales.js +snippets +datetimepicker.html \ No newline at end of file diff --git a/components/datetimepicker/datetimepicker-npm.html b/components/datetimepicker/datetimepicker-npm.html new file mode 100644 index 0000000..18d15f5 --- /dev/null +++ b/components/datetimepicker/datetimepicker-npm.html @@ -0,0 +1,402 @@ + + + + + + + + Datetimepicker - Propeller Components + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+
+ + +
+

Datetimepicker

+

The Datetimepicker widget allows the user to select a value from a calendar or a time drop-down list as well as direct input. You can find a wide variety of date and time pickers here.

+

We have used Bootstrap Datetimepicker as a reference which we have then customized based on our Propeller theme.

+

For more options and documentation, visit : Bootstrap Datetimepicker

+
+ +
+
+
+ +
+ + +
+ + +
+
+

Propeller Datetimepicker

+

This is the default date and time picker with Propeller theme.

+

Initialize datetimepicker plugin by calling .datetimepicker() function. +

+
+ + +
+
+ +
+
+
+ + +
+
+
+ +
+
+
+ + +
+ + +
+
+

Time Picker

+

It is used when you only need to fetch just the time from the user.

+
+
+ + +
+
+ +
+
+
+ + +
+
+
+ +
+
+
+ + +
+ + +
+
+

Linked Picker

+

These are two individual date and time pickers, of which, one is used to select start date and time and the other is used to select end date and time.

+
+
+ + +
+
+ +
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+ +
+
+
+ + +
+ + +
+
+

View Mode

+

This one is used when you want the user to select a year and month. For example: This kind of picker is used for selecting expiry date of a card.

+
+
+ + +
+ +
+ +
+
+
+ + +
+
+
+
+
+
+ + +
+ + +
+
+

Disabled Days of the Month

+

This is a date and time picker which can be used when you want to show few days of the month as disabled. For exmaple: Here, saturdays and sundays are shown as disabled.

+
+
+ + +
+
+ +
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+ + +
+ + +
+
+

Inline Datetimepicker

+

Such type of datetimepickers are by default displayed as visible.

+
+
+ + +
+
+ +
+
+
+
+
+ +
+
+
+ + +
+ + +
+ +
+ + +
+
+ +
+
+
+ + +
+ + + + +
+
+ +
+
+
+ + +
+ + +
+
+

Datetimepicker with left header

+

In such type of date and time picker the header of the picker is displayed to the left. It displays current date significantly.

+
+
+ + +
+
+ +
+
+
+ + +
+
+
+
+
+
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + diff --git a/components/datetimepicker/package.json b/components/datetimepicker/package.json new file mode 100644 index 0000000..9dc4076 --- /dev/null +++ b/components/datetimepicker/package.json @@ -0,0 +1,30 @@ +{ + "name": "propellerkit-datetimepicker", + "version": "0.0.2", + "description": "propellerkit-datetimepicker is a front-end responsive component based on Google's Material Design Standards & Bootstrap.", + "homepage": "http://propeller.in/", + "author": "Digicorp, Inc", + "license": "MIT", + "main":"css/pmd-datatable.css", + "scripts": { + "test": "npm install propellerkit-datetimepicker" + }, + "repository": { + "type": "git", + "url": "/~https://github.com/digicorp/propeller/tree/master/components/datetimepicker" + }, + "keywords": [ + "css", + "js", + "mobile-first", + "responsive", + "front-end", + "framework", + "web", + "datetimepicker" + ], + "dependencies": { + "propellerkit":"*.*.*", + "moment": "^2.9.0" + } +}