vitalets / combodate

Dropdown date and time picker

Combodate

Dropdown date and time picker.
This plugin converts <input type="text"> into dropdown elements to pick day, month, year, hour, minutes and seconds.

• support of date, time, datetime
• 12h / 24h format
• based on moment.js

Live Demo and Docs

http://vitalets.github.com/combodate

Installation

bower install combodate

or download manually.

jsFiddle

http://jsfiddle.net/5m6gG/62/

License

MIT

combodate's Issues

firstItem for all dropdown

If it will for individual dropdown then it is better e.g. firstItemMonth, firstItemYear ..

Date problem

Validation problem with the dates: 20-Oct-2013 and 20-Oct-1968

Publish to npm

https://www.npmjs.com/package/combodate is waiting :)

Is it possible to have composer supported?

Comoser users like me then are able to directly include this js in composer's require section without specifically creating a package node for it, which potentially has an issue to find combodate.js if the directory structure is altered like this time, from original ../master/combodate.js to the new one .../master/src/combodate.js, even though it is a minor change.

Events/Callbacks?

It would really be helpful if some life-cycle events were fired.

In my specific use case, I wanted to apply the select2 enhancements to my combodate. This had to be done after combodate finished altering the page markup.

As a temporary measure, I added a callback option, in order to pass in a function, and then called it from the bottom of the combodate init method.

It is such a hack that I am ashamed to publish it! What is needed is a well thought out implementation — Callbacks vs events, etc. Hoping somebody might find time to do this

Can we have a select box with arrow up and down?

Hi, this plugin is great! I used it in my current project. One question is can we have an arrow up and down to this plugin? like on the <input type="number">

Thanks!

make combodate disable-able

hey guys

I stuck around with trying to disable a combodate input. as far as i can see ng-disabled only acts on the input. but not on the following selects inside the span.
I cannot find any documentation or other bug report on this.

i'm using combodate 1.1.0

bg
Johannes

EVERY MONTH HAVE 31 DAYS?

Don't you think the problem is important?

Option to round value to possible dropdown items

See vitalets/x-editable#203

Refresh <select> with valid days for each month

This is a improvement.

If you select for example 30th February, it appears marked in red, it could be great to prevent user to valid it, to directly refresh days in order to show: 1 to 28 (or 29 if is leap year).

Default maxYear to the current year, not 2015

For an example, take a look at the demo page. None of those dropdowns allow you to select 2016 since the default max is 2015.

The default should be whatever the current year is. The trick to that will be dealing with timezones. The current year will be different depending on browser.

MMM template shows two "mar' months

Hi,

I've noticed this in x-editable, but I as I was searching actual issue is here in combodate. Check your demo... there are two mar months.

Bootstrap?

How do you apply the form-control class on the combodate? I tried editing the js and the tags but they mess up the layout

does not work with jquery validation?

This plugin seems not working with the jquery validation. Below is an sample codes showing that validation does not take effect. Can you please advise?

http://jsfiddle.net/5m6gG/376/

Thanks!
Jin Fang

0 and 12 for Hour

Hello! Thank you for combodate! Is it possible to suppress the 0 in the hour dropdown? The reason is that if one selects 0 AM, it is interpreted as 12:00 AM. If one selects 12 AM, it is interpreted as 12:00 PM!

Thank you!!!
Eric

Call the change event when value is updated

I think it would be great if you called the change event when the value is updated. That way people can register event handlers to your control.

Here are the changes I made (added change()):

Line 52:

            //update original input on change 
            this.$widget.on('change', 'select', $.proxy(function(){
                this.$element.val(this.getValue()).change();
            }, this));

Line 375:

this.$element.val(dt.format(this.options.format)).change();

Toggle view

Would be nice to offer a toggle to switch from combodate to raw text-input. Some users for a site might prefer to use the raw version especially if they know the format expected.

ng-model binding

How do I prepopulate the combodate using a date in the model in angular.
The control is bound to a date of birth, but for some reason it is not populated.

Moment 2.4.0 Compatibility

There seems to be a compatibility issues with Moment version 2.4.0 due to the deprecated support of a globally scoped moment.

Line 146 relTime = moment.relativeTime || moment.langData()._relativeTime;
Makes use of moment.langData() which is not available any longer and resulting in the error:

Uncaught TypeError:
Object function (){
return!b&&console&&console.warn&&(b=!0,console.warn("
Accessing Moment through the global scope is deprecated, 
and will be removed in an upcoming release.")),c.apply(null,arguments)}
 has no method 'langData' 

See also: moment/moment/issues/334

I did some initial digging searching for the proper alternative, but have no answer of yet. Will submit a pull if I resolve. For now I'm on Moment 2.3.1 that still provides backwards compatibility.

AngularJs directive

Do you know about AngularJs directive wrapping the ComboDate?

No Min Date/Max Date options?

Hi.

I want to configure combodate to show dates only from specified range of date (min date to max date). But there's only minYear and maxYear options. If you don't mind please add this feature.

Thanks.

Min/Max ranges don't appear to work via data attributes

Tried to specify a min year value of 1901, however the dropdown still states "1970" as the minimum year. Works fine when using the jQuery way though.

http://jsfiddle.net/5m6gG/98/

Time start stop

Hello. Why doesn't it work?

<input name="start_stop" value="10:00-18:00" data-format="HH:mm-HH:mm" data-template="HH:mm-HH:mm"> 
***
$('input').combodate({minuteStep: 10});

Clear Combodate Value

Hi,

Can you please guide me how I can clear the value of a Combodate whose value is already set.
I tried using
$('#date').combodate('setValue','');
but this did not do the trick.

Thanks

Multiple drop downs

I'm an amateur with javascript so my apologies if this is a stupid question, but how can I implement two drop downs (for #datetime24)? My code will only show one. The second shows an input field.

Example below will only work once in a list:

    <div class="event-item">
        <label for="date">End Date and Time</label>
        <input type="text" id="datetime24" data-format="DD-MM-YYYY HH:mm" data-template="DD / MM / YYYY     HH : mm" name="datetime" value="21-12-2012 20:30">
        <script>
            $(function(){
            $('#datetime24').combodate();  
            });
        </script>
    </div>

i18n documentation

In the documentation I can't find any clear method for localization. There is a link at the bottom to a resource in the momentjs library but it is broken (https://github.com/timrwood/moment/tree/master/lang).

ComboDate not fix specific date "1969-10-19" BUG

When I try to put the date '1969-10-19' the combodate sends to the server the date '1969-10-18'.
I've tried everything but I can not solve this problem. Acretido be a bug in the component.

My code is this:

<a href="#" id="dtnascimento" data-name="dtnascimento" data-type="combodate" data-title="Data de Nascimento">1969-10-18</a>

http://jsfiddle.net/fagnerdireito/8T9hm/

In this example Try to set '1969-10-19', the fix result empty (vazio). Is a bug.

Default current time for MM/DD/YYYY HH:mm

Hi;
Thank you for a great library.
How can i set the default MM/DD/YYYY HH:mm to the current one.
I tried value: moment().format('MM/DD/YYYY HH:mm')
but it doesn't work.
thank you

Combodate options in camelNotation can't be set by data-attributes (should be closed)

Hi there!

My mistatake -(
It can be easily accessible by data-camel-notation attribute

Optional parameters

Hello!

Is there a way to define optional parameters, i.e year is required and month is optional.
Now, when I set template: 'YYYY MM', after entering year only, the input (output) will appear blank.
I tried using regex, but no luck here.

Template string causes data loss

Thank you for your software!

When a datetime is set using an initial value, any time unit (year, month, hour) not used in the template is lost, and when the resulting datetime is retrieved using getValue, it will be missing any units of the datetime not used in the template. This is because the datetime's value is stored and retrieved by accessing the dropdown element's values.

This restricts any format string units to the subset of specified template string units. I am unable to use years in my format string if my template string doesn't display years.

iso_string = 'YYYY-MM-DDTHH:MM:SS-Z';
$('#some_input).combodate({
  template: 'S',
  format: iso_string,
  value: moment()
});

// Somebody changes the template drop down value
var missing_everything_but_seconds = $('#some_input').combodate('getValue', iso_string);

A change event could update an internally stored moment, and then the dropdowns could be set to the new value of the internally stored datetime.

Alternatively, hidden elements could be created to store values not used in the template string.

I am willing to help with a pull request if you are interested.

How to Change Year on firing an event

I want to change my Year dropdown while i am firing an event of another control.

Like: i have checkboxlist and i want to update Year dropdown on the basis of selection of checkboxlist.

Kindly give me a solution or how to do it.
Thanks
Rohit

Pass in available times

I have an array of available times (H:i) that comes from a database backend. Would it be possible to load those times into Combodate instead of letting it loop through all the times?

Combodate default value

How to set default value of combodate dropdowns to current date

but leave input value empty

Change the 'empty' text when no date is assigned

Hello,

I have a combodate with the initial value set to null, and the combodate is showing 'Empty' in Italic+red.

I would like to change this text to show 'Without date specified' with a black font.

How can I achieve this ?

Thanks in advance,

Roger

CSS / layout not applied to dropdown

I am using the combodate

and then setting attributes

$('#date').combodate({
minYear: currentYear,
maxYear: currentYear+10
});

However the bootstrap layout of buttons is not applied to it so it look ugly: http://puu.sh/aJJdf/dd30aeadd4.png

Can someone please explain me why?

Leaving day and/or month blank is not possible

I would like it to be possible to select day, month and year, but let day and month be optional.
If I leave date or month (or both) blank now, combodate('getValue') returns null.

It works if I change the input format like:
data-format="MM-YYYY" data-template="MMM YYYY" or
data-format="YYYY" data-template="YYYY", but I would like all options available at the same time.

Is it possible, or a new feature request?

minuteStep cannot be set via data-minuteStep attribute...

My guess is it has something to do with the attribute being coerced into a number or string at some point, but I have not investigated...

The input's value is not updated in Firefox <= 8

In Firefox <= 8 (and probably Opera <= 11) the value of wrapped <input /> is not updated after changes in Combodate widget.

Combodate not firing parent change() function

First off, thanks for ComboDate, it's very useful :)

If I use combodate to change an input, the change() function doesn't get fired for the parent input.

I've managed to "fix" this by changing the the change function

this.$widget.on('change', 'select', $.proxy(function(){ }

From

this.$element.val(this.getValue());

To

this.$element.val(this.getValue());
this.$element.trigger('change');

This works as I'd expect it, but I've raised as an issue because I'm no jquery expert.

compatability with firefox

There is a problem in how the dropdown list shows itself in FireFox.
In Chrome, it aligns the dd box on the current value of the field (so the field value and the same value in the dd-box are on the same height, other values are below/ above). That is great.
But in FF (laste version) it positions the dd-box completely below the field. I tested this with your examples. Especially with the day field this is not very comfortable.

Add Gruntfile to repo

and add jsfiddle in readme: http://jsfiddle.net/5m6gG

Moment Construction Deprecation

Hey, so I don't have an exact time as to when this message started popping up, but recently I've been getting the following message when instantiating a new combodate:

 Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to https://github.com/moment/moment/issues/1407 for more info.

It doesn't point to the specific line of code that is causing the issue, but here's the context that it was called from:

this.$().find('.dob-dropdown').combodate({
          value: moment(currentDate, "YYYY-M-D"),   //toString resolves to "Mon Mar 25 1985 00:00:00 GMT-0500"
          firstItem: 'none',
          minYear: 1898,
          maxYear: moment().format('YYYY'),  //Resolves to "2014"
          smartDays: true
        });

I've tested each of the two moment constructors used in building the attributes for this combodate and they were both able to resolve with no deprecation warning, so this leads me to believe it might be happening somewhere in the constructor of the combodate itself or it's associated methods.

Using:
Combodate 1.0.7
Moment 2.8.4

Add to cdnjs

Please add this repo to cdnjs?

doc problem?

I do not see how I can use the methods as documented:

All methods can be called as $().editable('method', parameters).

I would like to implement dynamic interaction between a start and enddate. So I need to be able to set the values.

ps the correct working of the lib depends very much on the correct release of jquery and momentjs. like moment.js 2.1.0 does not work, 2.4.0 does

Make Month and Date as one dropdown box

I was wondering if it is possible to make a dropdown menu where there is both month and date together something like this

Date dropdown not getting refreshed.

Hi
Is there any way to refresh the value of date dropdown ?
I have given 'name' as value to 'firstItem' attribute.
If the user selects a date, and clicks on a button/link ,I want date dropdown to get refreshed i.e. it should show day,month, year as selected values. As of now, It shows the previously selected date.

Please help.

HTML template for dates

Hi,

First, thanks for this simple yet very useful plugin. As for my question, is there a way to apply/set an html template for the date elements? Say, I'd like to add a label for each date elements like:

Day	Month	Year
comboday	cobomonth	comboyear

Thanks

Maintainer welcome!

hi all!
I'm sorry but can't find any time to support this tiny but pretty project.
If anybody ready to take maintenance I and community will really appreciate!
Please write me an email.
Thanks a lot!

How can i set default value?

How can i set default value?