trentrichardson / jQuery-Timepicker-Addon

Adds a timepicker to jQueryUI Datepicker
http://trentrichardson.com/examples/timepicker/
MIT License
2.66k stars 1.05k forks source link

getDate does not include defaultValue's time unless user explicitly enters time in the picker's dropdown. #885

Closed JeffMatthews2 closed 8 years ago

JeffMatthews2 commented 8 years ago

Looks like it could be a bug, but maybe I am doing something wrong.

this._insertPicker =
                $("<input>").datetimepicker({
                    dateFormat: "DD, MM d, yy - ",

                    hour: 9, //but it does not work.
                    //hourMin: 9,

                    defaultValue: newDateInputString,
                    minDate: new Date(),

                    timeInput: true,
                    timeFormat: "h:mm tt",
                    timezone: -300,
                    timezoneList: [
                        //{ value: -300, label: 'Eastern'},
                        { value: -300, label: 'Central' }
                        //{ value: -420, label: 'Mountain' },
                        //{ value: -480, label: 'Pacific' }
                    ],
                    showTimezone: true,
                    showHour: false,
                    showMinute: false
                })

When clicking on the textBox, the dateTimePicker's dropdown opens to allow selection of a date and entry of time. If user accepts default by pressing Done, getDate returns proper date, but it returns a time of midnight.

Thanks for your help and this beautiful control!

JeffMatthews2 commented 8 years ago

Problem seems to be that when there are literal characters in the format string, there is a parsing error.

dateFormat: "DD, MM d, yy - ", timeFormat: "h:mm tt",

The date is properly returned when the literal is removed.

dateFormat: "DD, MM d, yy", timeFormat: "h:mm tt",

It's not a deal-killer, but it would be nice to have literals. I still love this control.

trentrichardson commented 8 years ago

If I remember correctly literal characters need to be surrounded with single quotes. On May 27, 2016 7:01 PM, "JeffMatthews2" notifications@github.com wrote:

Problem seems to be that when there are literal characters in the format string, there is a parsing error.

dateFormat: "DD, MM d, yy - ", timeFormat: "h:mm tt",

The date is properly returned when the literal is removed.

dateFormat: "DD, MM d, yy", timeFormat: "h:mm tt",

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/trentrichardson/jQuery-Timepicker-Addon/issues/885#issuecomment-222271179, or mute the thread https://github.com/notifications/unsubscribe/AATHOFA8gcFU__K-fA_9ZbvsHpbOl9hYks5qF3fngaJpZM4Iovsz .

JeffMatthews2 commented 8 years ago

I saw that and tried it, but it didn't work. I tried:

dateFormat: "DD, MM d, yy' - '", timeFormat: "h:mm tt",

and also:

dateFormat: "DD, MM d, yy", timeFormat: "' - 'h:mm tt",

Errors without escaping as follows:

jquery-ui-timepicker-addon.js:2227 
Error parsing the date string: Extra/unparsed characters found in date: 9:00 am
date string = Saturday, May 28, 2016 - 9:00 am
date format = DD, MM d, yy - 

jquery-ui-timepicker-addon.js:2227 
Error parsing the date/time string: Unexpected literal at position 24
date/time string = Saturday, May 28, 2016 - 9:00 am
timeFormat = h:mm tt
dateFormat = DD, MM d, yy - 

Errors with escaping are as follows:

jquery-ui-timepicker-addon.js:2227
Error parsing the date string: Extra/unparsed characters found in date: 9:00 am
date string = Saturday, May 28, 2016 - 9:00 am
date format = DD, MM d, yy' - '

jquery-ui-timepicker-addon.js:2227 
Error parsing the date/time string: Unexpected literal at position 24
date/time string = Saturday, May 28, 2016 - 9:00 am
timeFormat = h:mm tt
dateFormat = DD, MM d, yy' - '
JeffMatthews2 commented 8 years ago

Hi, Trent. I see you are open to getting some outside help to continue improving the project. I would be happy to contribute along the lines of making an effort to fix a bug on my own when I find one. I found one which sets hour and minute to NAN when pressing Now.

In order to help, I will need a small bit of guidance in order to get going.

For example, I went to line 2227 in the source code, and this is it:

2226 $.fn[method].call(startTime, $.extend({ 2227 timeOnly: timeOnly, 2228 onClose: function (dateText, inst) { 2229 checkDates($(this), endTime); 2230 }, 2231 onSelect: function (selectedDateTime) { 2232 selected($(this), endTime, 'minDate'); 2233 }

This does not look like it could be the "Line 2227" being referenced in the preceding post concerning the parsing error.

trentrichardson commented 8 years ago

Thanks for the code help. I'm not at a computer at the moment, but do know that there is a dev branch which could differ slightly from master. I like to apply all changes to the dev branch. You may need to do a search for "$.fn[method]" as I'm sure there aren't too many of those. On May 28, 2016 9:29 AM, "JeffMatthews2" notifications@github.com wrote:

Hi, Trent. I see you are open to getting some outside help to continue improving the project. I would be happy to contribute along the lines of making an effort to fix a bug on my own when I find one. I found one which sets hour and minute to NAN when pressing Now.

In order to help, I will need a small bit of guidance in order to get going.

For example, I went to line 2227 in the source code, and this is it:

2226 $.fn[method].call(startTime, $.extend({ 2227 timeOnly: timeOnly, 2228 onClose: function (dateText, inst) { 2229 checkDates($(this), endTime); 2230 }, 2231 onSelect: function (selectedDateTime) { 2232 selected($(this), endTime, 'minDate'); 2233 }

This does not look like it could be the "Line 2227" being referenced in the preceding post concerning the parsing error.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/trentrichardson/jQuery-Timepicker-Addon/issues/885#issuecomment-222308637, or mute the thread https://github.com/notifications/unsubscribe/AATHOASBy3C9eQdLqF6pY391atNBXWRVks5qGEMjgaJpZM4Iovsz .

JeffMatthews2 commented 8 years ago

I found the problem. The bug is with JQuery-UI's datePicker. It's not yours. Their dateFormat parsing function does not handle the case for "DD" - being the full name of the day of the week.

JeffMatthews2 commented 8 years ago

Hi, Trent. As is usually the case, it turns out there is no bug anywhere. I had the itemTemplate formatted in a way which caused the parsing error.

Notice the dash (-):

itemTemplate: function (value) {
            // This is display mask for the date to be used in rows.            
            return new moment(value).format("dddd, MMMM D, YYYY  -  h:mm a");    

The parsing error triggered when clicking on the input element to invoke the dateTimePicker selector dropdown. I finally figured out it was reading the input's value and that " - " will not work from within an input. It was an unescaped literal.

The following change was required. Notice the escape brackets:

return new moment(value).format("dddd, MMMM D, YYYY  [-]  h:mm a");    

Then, as far as getting the dateTimePicker to open on the right date and the right time, I was using all the defaultDate, defaultValue, hours, etc. to no avail. These actually work just fine when not compounded with my failure to use the escape brackets for moment.js.

However, the following was the best way. Notice the datetimepicker("setDate", newDate) added to the very end. This actually populates the input with the date in advance, rather than leaving it blank.

insertTemplate: function () {
            //fires once to set a template for grid row inserts.
            //alert("insertTemplate()");

            // Set a default date of new record to this coming Saturday at 9:00 am. 
            var newDate = getNextDayOfWeek(new Date(), 6);
            newDate.setHours(9, 0, 0, 0);            

            return this._insertPicker =
                $("<input>").datetimepicker({

                    minDate: newDate,
                    dateFormat: "DD, MM d, yy' - '",                    
                    timeInput: true,
                    timeFormat: "h:mm tt",
                    timezone: -300,
                    timezoneList: [
                        //{ value: -300, label: 'Eastern'},
                        { value: -300, label: 'Central' }
                        //{ value: -420, label: 'Mountain' },
                        //{ value: -480, label: 'Pacific' }
                    ],
                    showTimezone: true,
                    showHour: false,
                    showMinute: false

                }).datetimepicker("setDate", newDate);

I am a little embarrassed at the time I spent on this, but it really helped my understanding.

Thanks again.