When the github pages are loaded, the example with validation shows a validation message saying "Oh snap!"

It would be good for the different examples to display a snippet of code so that we know how those examples are being generated.

The latest moment.js version gives deprecated warnings on the use of add(period, number), this should be add(number, period) instead.

moment.weekdaysMin and moment.monthsShort are no longer in the global namespace with Moment.js v2. They are now defined within the lang() function.

As the associated MomentDatepicker 1.05 NuGet package does not specify a version with its Moment.js dependency, Nuget will allow Moment.js to update thus causing JavaScript errors and the DatePicker not displaying.

If you enter 25/1/1 with a format of 'MM/DD/YYYY', it converts it to 1/1/1903 (in IE and FireFox, not chrome).

I think the issue is in DPGlobal.parseDate:

moment('25/1/1', 'MM/DD/YYYY').isValid() returns false on all browsers, but the fallback moment('25/1/1') is valid.

jsfiddle: http://jsfiddle.net/KL8nr/3/

Could we get an enforceFormat option to keep the value from getting coerced?

Brian

Though IE8 is antique we still have considerable number of customers using it. The click event doesn't work well there, when you press mouse button on popup it will be dismissed without any effect. Probably blur happened before click.

You can see it by opening http://makingsense.github.com/moment-datepicker/ in IE8 and trying to use any of first 6 inputs. None of them can be selected with mouse.

Here is something very similar uxsolutions/bootstrap-datepicker#9

1. Go http://makingsense.github.io/moment-datepicker/
2. Copy/paste 25/05/11 into first 4 datepickers
3. The results will be:
   empty string
   25/05/0011
   25/5/11
   0025-05-11

When I set the moment.js language to ru, for instance, the first day of week in the datepicker is Sunday, although in the Russian locale it's Monday and this info is stored in the moment.js language settings. I think the datepicker should use these as the defaults.

I'm looking for onRender option to disable past dates. Is it possible?

There is a problem with the headings of the Months when the current date of the system is the 31st of the month. For any month that doesn't have 31 days it will not update the heading Month description.

From the demo page (should be September 2012):

Current system date/time:

Unfortunately, I have to support IE7 in my application!

I have incorporated the Datepicker and all is great in Firefox/Chrome/IE8 but if I switch to IE7 compatibility mode it breaks with some JavaScript errors.

I thought this might be down to something I have done but I see the same problems if I use the demos here http://makingsense.github.com/moment-datepicker/ .

Should this work in IE7 or is it unsupported?

Thanks
Kev

hi,
no matter if i change the value to "left" or "right" the calendar keep showing on the left only

thanks in advanced.

When you use the datepicker on a form-control within a modal dialog, it incorrectly dismisses the entire dialog.

I updated my source to not trigger the hide event on the source element, which seems to correctly fix this issue. Would really love to see this updated, and the nuget package updated:

hide: function () {
this.picker.hide();
$(window).off('resize', this.place);
this.viewMode = this.startViewMode;
this.showMode();
if (!this.isInput) {
$(document).off('mousedown', this.hide);
}
this.refresh();
// COMMENTED OUT BY Ryan (causes Dialogs to close when shown on dialog)
//this.element.trigger({
// type: 'hide'
//});

hi,
this is awesome plugin, and it is working fine with knockout, except that i have little problem,

i have a model property called PublishOn, which is optional, that is why i set it to DateTime.MinValue
http://msdn.microsoft.com/en-us/library/system.datetime.minvalue.aspx

because i don't want null dates, and it returns this "0001-01-01T00:00:00.0000000" as default value

the problem is that moment-datepicker shows this as "January 1 0001" which i dont want, i just want the text input to be blank in this case.

thanks in advanced.

In http://makingsense.github.com/moment-datepicker/:

• I also take things.. could be improved to I also took things..
• Use knockout.js custom Binding could be improved to Using...
• Attachet should be Attached
• The start date cannot be greater than the end date validation message could be improved to The start date cannot be after the end date

I have used the above date for testing, there is an issue where typing this date into the textbox is only sometimes understood by the datepicker.

If I change the format to 'DD/MM/YYYY' then it does see this date correctly. but i need the result to be in the format of mm/dd/yyyy.

am somewhat new to this and jquery. if it were possible to utilize the wrong format but add some function call or ? to swap the month and day? so the output into the textbox would be in mm/dd/yyyy, even though the format itself is DD/MM/YYYY. why does it understand the above date in one format but not the other? thanks

When using moment-datepicker with newer versions of moment (I'm using 2.8.4) the "gray" days for years before 1970 are wrong:

The moment-datepicker NuGet package should refer to bootstrap, not Twitter.Bootstrap.

Setting an initial date, then clicking in an input... highlight all.... delete, then tab out. The empty input will revert to the original date in IE/Chrome. Additionally IE shows null.

Heres the fix...

       refresh: function () {
            var formated = this.getAsText();

            if (!this.isInput) {
                if (this.component) {
                    //this.element.find('input').prop('value', formated).change();
                    this.element.find('input').val(formated).change();
                }
                this.element.data('date', formated).change();
            } else {
                //this.element.prop('value', formated).change();
                this.element.val(formated).change();
            }
        },

First, your work is great.
Secondly I am having a very major issue with IE8. If I click the textbox, it opens the calendar but upon selection, calendar doesn't update the textbox. If I click the calendar icon then the input field get's updated.
Secondly if I type the date in input field , its clears up.
Can you please assist me how can I fix it?

Thank you so much for your time and help :)
Cheers.

Thanks for plugin!

But I found a small bug. Days view rendered ok, but when switch to month or years views:

Init plugin with:

$('.calendar').datepicker({
    format: 'DD.MM.YYYY',
    weekStart: 1,
    language: 'ru'
});

After small investigation found a workaround:

.datepicker.dropdown-menu .table-condensed {
  width: 100%;
}

Can you fix this in new version?

P.S.:
Use jquery 1.11.2, bootstrap 3.3.4, latest version of moment-datepicker

hi,
i have followed the docs, and changeDate fires correctly but there is no ev.date returned, it is undefined

thanks win advanced.

This is a great datepicker to use with Knockout and Bootstrap. It's solved all the headaches I'd inherited from its predecessors. But it's reintroduced one.

When applied to an empty IE input field, the value "null" is displayed.

With some of the earlier Bootstrap datepickers I'd seen this behaviour in IE8 only, but with the moment-datepicker it's also evident in IE9.

Hello

First of all great library. I'm trying to get the KO bindings to work inside a bootboxjs dialog. I render the content of the dialog from a KO template where the input field with the datepicker binding is also located. However I'm not able to trigger the datepicker to render. I know from other regular JQ components that I need to trigger something from within the afterrender of bootboxjs. Any Idea of how to solve this with momentdatepicker?

Is it time for a new release? Lot's of improvements since September 2013

Curious why we depend on jQuery < 2.0.0. I would like to manage my use of jQuery and the MomentDatepicker through NuGet, but I cannot do that if I'd like to use the latest jQuery release.

Hi, am using this plugin as calender(date picker always will be visible).
I just want to add class to some days like active class.
That class should not removed when move to another month and come back to present.

EXAMPLE:If i have add class(someclassname) to june moth date: 20, 21, 25, 28.
If move to July by click next arrow and come back to June by click previous arrow.. that class (someclassname) should not be removed.

Note: this problem does not exist in IE10 or Chrome,

Setting an initial date, then clicking in an input... highlight all.... delete, then tab out. The empty input will revert to the original date.

Duplicate March in date picker when 29, 30, 31 every month.

Line 232: html += '' + monthsShort(moment().month(i++)) + '';

caused by the upgrade of moment?
Before version 2.1.0, if a moment changed months and the new month did not have enough days to keep the current day of month, it would overflow to the next month.

As of version 2.1.0, this was changed to be clamped to the end of the target month.

// before 2.1.0
moment([2012, 0, 31]).month(1).format("YYYY-MM-DD"); // 2012-03-02
// after 2.1.0
moment([2012, 0, 31]).month(1).format("YYYY-MM-DD"); // 2012-02-29

I'm not an expert, but the examples just don't seem to work in Bootstrap 3, e.g. now it uses glyphicons, and a different grid system.

Looking at index.html in the source code has helped me get up and running. Perhaps the demo site (http://makingsense.github.io/moment-datepicker/) just needs updating with this.

I am having trouble with the current approach to loading the date picker via requirejs as both moment and knockout are only loaded through that system. I would like to avoid to modify the moment-datePicker.js to use the define(..) syntax. It appears that if the moment and knockout are added through requirejs, they do not populate global scope and thus (this.moment and this.ko are undefined). Anyone thought of a good workaround?

Using Chrome 48.0.2564.97

You can replicate on your demo page (http://makingsense.github.io/moment-datepicker/)

1. Scroll down half way
2. Click the input in "Using KnockOut.js Date binding."
3. Scroll down further, you can see the calendar below

I fixed locally by doing the following

place: function () {
            var sourceItem = this.component ? this.component : this.element;
            var offset = sourceItem.offset();

            //var viewportOffset = this.$viewport.offset();
            //var scrollTop = this.$viewport.scrollTop();

            var zIndex = parseInt(this.element.parents().filter(function () {
                var zIndex = $(this).css('z-index');
                return zIndex != 'auto' && zIndex != '0';
            }).first().css('z-index')) + 10;

            //console.log('top: ' + (offset.top + this.height + scrollTop - viewportOffset.top));
            //console.log('offset.top: ' + offset.top);
            //console.log('this.height: ' + this.height);
            //console.log('scrollTop: ' + scrollTop);
            //console.log('viewportOffset.top: ' + viewportOffset.top);

            if (this.calendarPlacement == 'left') {
                this.picker.css({
                    top: offset.top + this.height,
                    left: offset.left + sourceItem[0].offsetWidth - this.picker[0].offsetWidth
                });
            } else {
                this.picker.css({
                    top: offset.top + this.height,
                    left: offset.left,
                    zIndex : zIndex
                });
            }
        },

Example:

• Go to January page
• Select 27th of December from the days that are visible from the previous month
• The input value now shows 02-27-2012

Hi, thanks for your code.
I've noted that if the html <INPUT readonly> is binded with datepicker, the picker shown also if the INPUT is marked READONLY! (eg: javascript $("input").prop("readOnly",true);)

I've tested this changes to moment-datepicker.js and seems to work:

Line106

show: function (e) {
if (!e.currentTarget.readOnly)      //DD 20/05/2013 14:19:29    
{
...
}

Is-it a way to include datepicker in modal ?