chingyawhao / materialize-clockpicker Goto Github PK

View Code? Open in Web Editor NEW

142.0 9.0 71.0 1.68 MB

A materialize clockpicker, demo on

Home Page: http://chingyawhao.github.io/materialize-clockpicker.html

License: MIT License

CSS 24.47% HTML 13.32% JavaScript 62.21%

materialize-clockpicker's Introduction

Description:

This is a materialize clockpicker designed as an addition to http://materializecss.com/

Most source codes are taken from https://github.com/weareoutman/clockpicker

Install:

bower

bower install materialize-clockpicker --save

npm

npm i materialize-clockpicker --save

Options:

Here are some options and their defaults:

default: '',            // default time, 'now' or '13:14' e.g.
fromnow: 0,             // set default time to * milliseconds from now
donetext: 'Done',       // done button text
cleartext: 'Clear',     // clear button text
autoclose: false,       // auto close when minute is selected
ampmclickable: false,   // set am/pm button on itself
darktheme: false,       // set to dark theme
twelvehour: true,       // change to 12 hour AM/PM clock from 24 hour
vibrate: true,          // vibrate the device when dragging clock hand
container: '',          // default will append clock next to input
submit:''               // submit in 24 hour format

Screenshots:

Developing:

npm i gulp bower -g
npm install
bower install
gulp watch

Getting started

Basic setup

Make sure you have materialize css (including their JavaScript files): http://materializecss.com/
Install this package via npm or bower. Alternatively you can also download the source files and add them to your project manually.
Create an input field in your html code like the following:

<div class="input-field col s12">
    <label for="timepicker">Time</label>
    <input id="timepicker" class="timepicker" type="time">
</div>

Add default value to the input

<div class="input-field col s12">
    <label for="timepicker">Time</label>
    <input id="timepicker" data-default="14:20:00" class="timepicker" type="time">
</div>

Add the Javascript trigger with the corresponding options

<script>
  $('#timepicker').pickatime({
    autoclose: false,
    twelvehour: false,
    default: '14:20:00'
  });
</script>

Get time selected using after done function

<script>
  $('#timepicker').pickatime({
    autoclose: false,
    twelvehour: false,
    afterDone: function(Element, Time) {
      console.log(Element, Time);
    }
  });
</script>

You can trigger the clock either by ID's or classes (useful if you have several clocks on one page).

materialize-clockpicker's People

Stargazers

Watchers

materialize-clockpicker's Issues

AM/PM in clockpicker-display

When you set the twelvehour at false, PM is still displayed in the clockpicker-display div.

When default value is set to now , AM/PM isn't picking

The now value for default attribute shows the time(hour and minute) correctly but AM/PM is always on PM.

Unable to integrate with explicit materialize library

I am using materialize library in my angular js web app. Am also using grunt as my building tool. Due to my existing materialize library am getting conflict using materialize clockpicker library as it is dependent on some lower version on Materialize (as specified in your package.json file.). Due to this am unable to use the clock pickers when am creating a build using grunt.

Kindly help me sort out this issue.

Add project to bower

Hi can you possibly add your project to bower?

opening inside a input box, not popping.

I need a time picker for my materializecss web project. your project working fine. but after adding your css and js, its not popping. simply displaying inside input box. Any fix????

Rename picker__date-display to get compatibility with datepicker from materialize.

I'm using your clockpicker library in combination with the timepicker from materialize.

Both of them are using the picker__date-display class for the div containing the date or the time. By using the same class the styling gets overridden.

Is it possible to change the class maybe to picker__time-display? If so, I could offer a pull request.

Couldn't require it as node module

I installed clockpicker as node-module.
npm i materialize-clockpicker --save

Then I imported it as,
require("materialize-clockpicker");
It throws materialize-clockpicker module not found.

If I import it as require it as require("/node_modules/materialize-clockpicker/dist/js/materialize.clockpicker.js")
then it throws, pickatime is not a function.

Am I importing it wrong?

After closing the clockpicker when opened from modal, horizontal scroll bar remains appeared until the modal is closed

I have a modal in which one form is there. I am using the clockpicker inside that form. Before opening the clockpicker, there is no horizontal scroll bar in the page but after closing the clockpicker, a horizontal scroll bar appears. This horizontal scroll bar disappears when the modal is closed.

jquery `on change` isn't triggered - trying to validate input

My HTML:

<input id="start_time" type="time">

My jquery script:

            $('#start_time').pickatime({
                autoclose: false,
                twelvehour: true
            });

And this is only triggered when I select the time for the first time:

        $(document).on('change','#start_time',function(){ 
            console.log('changed');
        });

When I change the time to something else changed is not logged to console.

Am I missing something basic here or is this a desired behaviour?
How do I proceed with checking if the time has changed?

Events to work

What events can I call?

Create release

Hi ho,

first of all: thx for creating this awesome piece of code.
I am about to integrate your Materialize clock picker into my Yii2 Materialize repo.

Could you please create a release (and further later on when issuing new features or bugfixes)? This makes maintaining and requiring (Composer) easier as I can clearly state the version I need.

Thanks a lot in advance.

Cheers

Materialize Timepicker does not display well

Hey everyone!

I am using materialize timepicker in my project, and I can't get it to display correctly.

Here's what I get:

Here's what I should get:

Here's my code: demo

access_time

Start Time

Disabled hours and minutes

Can I disable some range of time?

Ability to choose just x minutes

For example, I have a thing like "How many minutes until you arrive?" and would like a 5-10-15-20 minute picker similar to yours

Please release 1.0.1 version on npm

Thank you for this package!

But I'm getting the error

Unable to resolve some modules:

  "js/materialize.clockpicker.js" in
[...]/node_modules/materialize-clockpicker/package.json
(web.browser)

because the package.json is not fixed. Please release the latest 1.0.1 version to npm. Thank you!

Merge!

Hello man! I began this project:

https://github.com/fega/materialize-helpers

we could merge the projects.
what do you think?

Step of 15min

Hi and thans for bring a Time Picker into Materialize :)

I just want to make the minutes picker step with 15min (00-15-30-45). I had succeed to hide the other value but I can't prevent the picker to step 1min by 1min. Could you help me? I saw that plenty of ask for it from the wearoutman version, I think it will be helpfull ^^

Chrome 73 mouseup disappear issue

When clicking the input with mousedown, the clock picker pops up but on mouseup it disappears.

Add button to clear picked time

Just as you can clear the date selected using the Materialize Datapicker, it would be neat to be able to clear the picked time as well. For now I've had to settle with adding a button next to the field, to clear it, but that solution isn't pretty - especially with a datepicker right next to it that has a clear button.

TwelveHour clock still being shown after disabling

I have the initialization as:

$('#startDatetime').pickatime({
          autoclose: true,
          twelvehour: false
        });

However, the clock still comes up as this:

Am I missing something here?

Similar issue as #13 am/pm is not set when default is provided

Like this issue when default value is provided such as '09:14' the clock does not set to AM. it's always PM.

clockpicker with model problem

I just created my form in materialize model and used materialize-clockpicker in it. Its working fine from outside the model but when opening in model its opening in model its showing inside the model but i need to append that clock in document body, so is it possible to do this?

Thanks

afterDone callback not working as shown in readme

I tested the code from the readme and the last section contains the code
<script> $('#timepicker').pickatime({ autoclose: false, twelvehour: false, afterDone: function(Element, Time) { console.log(Element, Time); } }); </script>

After testing the callback, undefined is returned for both Element and Time.
Is there a callback for when someone completes the picking process?

Add a 'Clear' button

There is no button to reset the selected time as it is there in the Materialize Date Picker. If user wants to clear the text field containing the time. He can't do because clicking on the text field doesn't allow to edit the text as the clock picker is opened.

Adding this to angular-materialize

I just included a wrapper for this clockpicker in the angular-materialize project.

You can see the commit here: krescruz/angular-materialize@25e6d98

If you have any comments (or a better way to include it), please let me now.

If not, just close this issue.

Safari - Clockpicker is cutoff by modal overlay

I tried opening a clockpicker from a modal. In chrome everything is fine, but on safari the clockpicker is cutoff. I played with the css, particularly, the z-index and couldn't figure out why.

Supporting Seconds

Webpack & Sass compiler

Sass has a problem when compiling it.

@import "Materialize/sass/components/mixins"; not found ---> when I checked the code in node_modules the materialize components is not there it is lacking..

Webpack has a problem when imported it.

Cannot resolve the file which I cannot see also the .JS file.

Dist css sourcemap assumes Materialize was installed using bower

I use this with react and webpack, so I imported the dist css file into my stylesheet in order for it to be bundled. Like this:
@import "../node_modules/materialize-clockpicker/dist/css/materialize.clockpicker.css";

Webpacks css-loader would then complain that the file "/bower_components/Materialize/sass/components/_color.scss" is not in the SourceMap. Which is naturally correct in my case, since I didn't install Materialize using bower.

I solved it manually by deleting the sourcemap line from the dist css file.

Can you fix it so that it doesn't directly depend on Materialize to be installed using bower - there quite a few different "installation methods" after all. (bower, npm, cdn, etc.)

Thank you for a much needed Materialize timepicker though.

hides scroll bar on open

Hi. the scrollbar gets hidden whenever the timepicker opens causing the page to tilt to the right. :)

Event on set

Can we have an event/callback on value set?