If you try to open the popup(in small screen or sm/xs screen) it will not be able to show the Save/Cancel/Now buttons.

I'm trying to use this lib, but I could not quite understand the documentation. My suggestion is to be made a demo code as was done in md-date-time.

Very minor fix, but the minutes less than to generally need a leading zero, e.g. 6:05 PM.

The docs show how to change the weekdays, but how do you update the language for the months?

Also you set the i18n in a value, but I need to inject angular-translate, how would I do this?

Having an issue where the ng-change on the datetime picker only fires once and then doesnt fire again when the date/time is changed. I am using autosave="true" as the datepicker is part of a larger form

Has anyone got any suggestions as to a fix or an alternative to get this to work?

Needs keyboard interaction rules.

Initial thoughts:

• Enter Hits 'Save' button.
• Esc Hits 'Cancel' button.
• Tab or Shift+Tab Switches between Year - Month - Day - Hour - Minute dependant on display mode etc.
• Number/Arrow/Letter Keys Depends on focussed point, Hour, Minute, Year and Month should all function as their native HTML input behaviour. Date should move the selected date via arrows etc.

displayMode: 'time' isn't overriding the defaultMode, though your README says it should be.

 defaultMode: 'date',
  defaultDate: void 0,
  displayMode: 'time',

Hi,
I have been trying to use the 'on-save' attribute and sending a callback function.
when i used:

on-save="controller.saveCallBack($value)"

It evaluated to undefined in this part of your code:

saveFn = $parse(attrs.onSave);

And when i used:

on-save="{{controller.saveCallBack($value)}}"

Your code evaluated it correctly but the function executed multiple times (something like 15 times) while the directive initiated. Furthermore, the callback called (twice) not only when clicking save but even when picking a new date.
So, am I doing something wrong?

Trying to add something like this in my own local test does not produce the popover as shown in the demo.

Even in the material demo page though, if you click cancel, the calendar wont pop up again anymore.

Hi, I could not tell from your demo page if I could manually enter date and time with the keyboard instead of the dialog?

Hi,

How can I customise the controls to match my color scheme?
How can I make the material theme look like that of bootstrap theme wrt to the font size and control size?

Regards.

Old Issue see: SimeonC/md-date-time#6

Relevant Highlights here:

@codebreach

We are using this component in a site powered by angular material and I was looking to enable mdTheming support so that it blends in with the rest of the site.
This should be as simple as updating the html to use md-classnames.

@SimeonC

I've done some work now with angular-material, and there's a big issue with trying to get into this stuff in nicely as pointed out here: angular/material#1269 (<- this is one of the reasons we gave up on angular-material too...)
Until that issue is solved I think the best way is to generate your own stylesheets from the stylus (less and sass version would look 90% the same - I may upload a sass option at some point) as we don't know what the "Official" solution will be sadly.

Currently there are seperate templates for bootstrap and material for our new theme option which will make changing this easier.

Tagging old Participants (Sorry for the spam!): @scanferla @zeeshanjan82 @pavankumarkatakam

It would be nice to have the possibility to define how many minutes are being changed when you click once on the arrow up/down of the time picker, i.e. if the picker opens with 3.00pm, then I can only change to 2.45pm, 3.15pm, 3.30pm, etc.

When I give a date object with PM values, the time is set correctly on the left side. But on the right side, in the input field, the value is in AM.

Example:
Date object is 15:00, then the input fields are 3:0.

PS: Also the minute value is "0" and not "00" as it should be imho.

Hi all,

I've write my own theme, but I found hard coded value in source.
For example, I want reduce size of calendar.
For that, I change day-cell size (width, height).
But in code offsetMargin we found :

offsetMargin: -> "#{new Date(@_year, @_month).getDay() * 2.7}rem"

I hack by writing :

    /**
     * Hack to calculate correctly margin of calendar.
     *
     * @param calendar calendar var in scope of calendar
     * @param cssClass css class of fisrt day
     * @returns {string}
     */
    $rootScope.offsetMargin = function(calendar, cssClass) {
        var obj = $('.' + cssClass);
        var selectedObj;

        for (var index = 0; index < obj.length; index++) {
            selectedObj = obj[index];

            if (selectedObj.getAttribute("aria-label") === "1") {
                break;
            }
        }

        var calendarOffsetMagin;

        if (selectedObj.clientWidth) {
            calendarOffsetMagin = (new Date(calendar._year, calendar._month).getDay() * selectedObj.clientWidth);
        } else {
            calendarOffsetMagin = 0;
        }

        return calendarOffsetMagin + 'px';
    };

And using :

<md-button ng-style="{'margin-left': $root.offsetMargin(calendar, 'day-cell')}" ng-class="calendar.class(1)" ng-disabled="calendar.isDisabled(1)" ng-show="calendar.isVisible(1)" ng-click="calendar.select(1); save()" aria-label="1" class="day-cell">1</md-button>

I hope this hack will be using by someone else 😄

Regards

Has anyone created a popup version to use on mobile? I tried throwing it into an mdcustomdialog but it doesn't quite fit.

I implemented the modal version, similar to the one in the demo (material). I've set the displayTwentyfour config to true, yet the fullTitle of the dialog contains the AM/PM value, since this is hardcoded. Could this be changed so that either the fullTitle is customizable or at least follows some of the settings?

I have form tag and inside. time-date-picker uses md-button and md-button is rendered as button tag (https://material.angularjs.org/0.11.2/#/api/material.components.button/directive/mdButton). The template in scDateTime don't set the type of the button (like type="button"), then button tag is rendered without type and the default html behavior is to assume type="submit", which submits the form. This is not expected behavior - clicking on date in calendar submits the whole form. Probably type="button" should be added in the templates.

Per SimeonC/md-date-time#12, lets add a implementation that shows a dropdown with a input box similar to ui-bootstraps popup demonstration. https://angular-ui.github.io/bootstrap/#/datepicker

Minor issue, but it seems you actually need angular >= 1.3 to compile the included templates. Angular 1.2.29 (latest 1.2-build) does not support the one-time binding double colon syntax (e.g. {{ :: translations.previousMonth }}), while 1.3 and above does:
https://code.angularjs.org/1.3.20/docs/guide/expression (Mentions one-time binding)
https://code.angularjs.org/1.2.29/docs/guide/expression (No mention of one-time binding)

I suggest updating the readme and site with the proper requirements, or removing the syntax altogether if the performance gains are not substantial.

We're currently on 1.2.28 and the template doesn't compile in its original form. As a workaround for anyone trying to run it on 1.2.x, you can simply remove the double colons from the minified template in the js-file (search-replace "{{::" with "{{" in sc-date-time.js) and you should be good to go.

Installing sc-date-time with npm produces an error at initialisation caused by this line at package.json:

  "main": "./dist/sc-date-time.min.js",

As npm compiles only sc-date-time.js at root directory we need to change the line to bypass the error:

  "main": "sc-date-time.js",

I have not create a pull request with the change because the best option is to change the NPM compilation to include the dist directory with sc-date-time minificated version

That's overkill, there's no good reason for having that as a requirement, it's just more bloat.

Having an issue where I run gulp build I can see sc-date-time in my bower_components directory, but cannot see it in vendor directory.

Bower_components Directory:

Vendor Directory:

What am I doing wrong here?

Hi,

I was wondering if is it possible to add support for selecting multiple dates? I'm working on a project where I need to implement such a feature and I'm already using sc-date-time.

If time is a constraint I could take a look myself and try to implement but I wanted to check first if it's doable with the current state of the project and if it will be a desirable feature.

Bests,

Yoanis.

Hello,

with some research, I found this npm package.

I wondered why is there is no documentation about it in the readme? It would be simple and really appreciated to add some documentation, and it would help other to find the package for those who don't use bower.

thank you

From commit comment (3045eaf)

Should this not be:
return if tAttrs.theme.indexOf('/') === -1 then "scDateTime-#{tAttrs.theme}.tpl" else tAttrs.theme

As it is now if you are trying to use a relative URL, like:

It ends up prefixing with scDateTime-

The bower option for distribute the project is awesome but I believe many people use automatic builders (such as grunt or gulp) to only use".min" versions of the libs, which is not available on date time.

Would be great to have .minified files. :)

Hello

Is there a demo for the translation of the sc-date-time ? I dont understand, if I override the default value, should I lose the english version ?

Hi all, I was trying to use the modal form, and I got problems because I dont find anything in the documentation.

I try the following with no luck:

<input class="form-control" type='text' name="dateOfBirth" ng-model='date' placeholder="Date of Birth" date-time-picker-input
 display-mode="full" display-format="d MMMM yyyy" ng-max="getMinimumDrivingDate()" />

I would appreciate your help.

Regards.

Could you publish to npm registry?

Support "templateUrl" attribute for custom compilation. Config and attribute - overrides the "Theme" attribute for the template.

I can only get this to show 4 weeks. Has anyone got an idea how to fix this?

As much as I like font awesome, using angular/material all of my icons are in a different icon set completely. I don't want to pull in font awesome just for this library and I probably won't use it as a result.

Your library is very good but I have one question. I want to add this library to my todo list project but I need the posibility to have tasks without due date (no date marked in the calender) Can I do that using your library?

it is possible to move up and down the minute number by scrolling.

the print screen was take from the demo on the site, but in my own application, the scrolling is far more apparent, the numbers can go out of the box to the point of being half-hidden.

Would be great to launch the datepicker on a popup when an input field is clicked on, with placeholder values, and once 'Save' is clicked, the date/time value is then represented in the input field.

Super useful for check in/check out forms!

From Issue SimeonC/md-date-time#11 (Short Summary).

amcdnl is talking about the date range feature. If you can add it, it would be perfect.
Example date range picker:
https://github.com/dangrossman/bootstrap-daterangepicker

Tagging old participants (sorry for the spam): @amcdnl @scanferla @rbarriuso @reginald-louis @mfaizanshaikh @sergonius

I am using sc-date-time and not sure why but all my months are showing up with same 31 days.
I am using sc-date-time with angular material.
Any help?

Hi, I am trying to set a mindate within the directive declaration, like this:

My minDate variable is calculated through moment js before that. But I just can't make it work. The calendar does not really disable any day buttons. Thanks in advance.

In Europe, weeks start on Mondy, would it require a big effort to support this?
Thanks.

In the Time picker, we can manually edit the fields, but it doesn't do any kind of check, so we can enter a completely wrong time or even remove the values

Old Issue: SimeonC/md-date-time#9
Abridged Summary

@amcdnl

On one of your comments here angular/material#648 you show a clock picker. Personally I prefer that over the up down, is that still available?

@SimeonC

There's an older version of it here that has the clockface: http://codepen.io/SimeonC/pen/XJdWPy

@georgebarbarosie

This one seems to be closest to the material design behavoiour http://weareoutman.github.io/clockpicker/ so I believe @amcdnl might have had it in mind.

@amcdnl

Have you seen this? http://material-ui.com/#/components/time-picker

@SimeonC

I do like that way of doing hours/minutes, though it could do with a bit of work, the double layer on selecting hours is a little confusing.

If we take that option but show both the minute and hour hands, highlighting the hand you are selecting and showing either minutes or hours around the face I think that could work.

Common to all the implementations I've seen so far, that I want to figure some way around, is that "jump" you get when selecting an hour and it switches to minutes. That feels jarring to me.

Tagging old participants (Sorry for the spam): @georgebarbarosie @amcdnl

Hello.

I tried to use maxdate with material, but it did not work for me. Model changes and everything else is working fine. Just min and max are not working.

$scope.maxDate = new Date();

<time-date-picker autosave ng-model="toDate" maxdate="{{maxDate}}" display-mode="full"></time-date-picker>

I tried it via attributes and via the configuration option

analyicsModule.value('scDateTimeConfig', {
    defaultTheme: 'material',
    autosave: false,
    defaultMode: 'date',
    defaultDate: undefined, // should be date object!!
    displayMode: undefined,
    maxdate: new Date(),
    defaultOrientation: false,
    displayTwentyfour: true,
    compact: false
});

I can set up autosave option, That's all.

I'll submit a pull request if I find a nice fix, but I thought I'd bring this up in case you had some time to work on it.

Thanks!

I could not tell from your demo if you could open the picker in a dialog? (Current version of Angular Material does not support dialog in dialog action v1.0.6)

I'm trying to use this datepicker.
I need to use two datetimepicker to choose different dates.
The problem is that I display only a datepicker instead of two.
what can I do?

There html inside of the following tag:

Is rendered in the browser but hidden from view (all I see is a green header and footer).

I'm trying to restrict the dialog by a minimum/maximum time because I'm having to do start-end times, but it only seems to restrict by date if I pass in something like "2016-05-13T21:48:08.078Z"

Looking at the code, it looks like it's alway setting the min allowed time to midnight.

    if ((val != null) && Date.parse(val)) {
            scope.restrictions.mindate = new Date(val);
            return scope.restrictions.mindate.setHours(0, 0, 0, 0);
          }

I can see why you'd do that, but if you're actually trying to restrict the time, it's disruptive. According to the docs it says you can restrict by a date and time, so I don't know if you want to fix that or add specific mintime/maxtime tags to the directive.

Thanks

Where can I find the tpl file?