Skip to content

Changing Month or Year via dropdowns does nothing #557

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
cosm1c opened this issue Mar 1, 2013 · 5 comments
Open

Changing Month or Year via dropdowns does nothing #557

cosm1c opened this issue Mar 1, 2013 · 5 comments

Comments

@cosm1c
Copy link

cosm1c commented Mar 1, 2013

Changing Month or Year via dropdowns does nothing. To reproduce:

Refresh page

  1. Click DateTimePicker button
  2. Change the year using the dropdown
  3. Click the Done button
  4. Click the Log Time Value Button
  5. Notice in the console the date logged is incorrect

See next comment with webpage demonstrating the error.
@cosm1c
Copy link
Author

cosm1c commented Mar 1, 2013 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>DateTimePicker Bug</title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"/>
    <style>
            /* css for timepicker */
        .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
        .ui-timepicker-div dl { text-align: left; }
        .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
        .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
        .ui-timepicker-div td { font-size: 90%; }
        .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

        .ui-timepicker-rtl{ direction: rtl; }
        .ui-timepicker-rtl dl { text-align: right; }
        .ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }
    </style>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
</head>
<body>

<h1>DateTimePicker Bug</h1>

<p>Changing Month or Year via dropdowns does nothing. To reproduce:
<ol>
    <li>Refresh page</li>
    <li>Click DateTimePicker button</li>
    <li>Change the year using the dropdown</li>
    <li>Click the Done button</li>
    <li>Click the Log Time Value Button</li>
    <li>Notice in the console the date logged is incorrect</li>
</ol>
</p>

<hr/>
<input id="picker"/>
<hr/>

<button id="btnShowTime">Log Time Value</button>

<script>
    $(function () {
        'use strict';

        var defaultOpts = {
            changeMonth: true,
            changeYear: true,
            showOn: 'button',
            buttonImageOnly: false,
            dateFormat: 'yy-mm-dd'
        };
        var elem = $('#picker');
        elem.datetimepicker(defaultOpts);
        elem.datetimepicker('setDate', new Date());

        $('#btnShowTime').on('click', function () {
            console.log('Time is ' + $('#picker').datetimepicker('getDate'));
        });
    });
</script>

</body>
</html>

@pratik136
Copy link

I would actually say that the Date logged by the button in the console is correct, and the one shown in the textbox is wrong.

This is because you simply changed the year and didn't actually click on a date in the changed calendar. The Year dropdown is merely a parameter and changing it should only update the UI and not cause a change in the stored data. If I want the year to be updated, I should have to select the required date in the calendar after changing the Year.

This is the standard behaviour of the jQuery UI DatePicker, and jQuery-TimePicker-Addon being an addon to it, should follow the standard behaviour of the original picker.

I created a fiddle for your code just for ease: http://jsfiddle.net/pratik136/bcNTz/

@nicofrand
Copy link

I think this is a duplicate : #213

@elisherer
Copy link

Add this to your options:

onChangeMonthYear: function (year, month, dp_inst) {
    //Make month scrolling change the actual month selection
    var tp_inst = $(this), dt = tp_inst.datetimepicker('getDate'); dt.setMonth(month - 1);
    var newVal = month + '/'  + dt.getDate() + '/' + year + ' ' + dt.getHours() + ':' + dt.getMinutes();
    tp_inst.val(newVal).datetimepicker('setDate', newVal);
}

@laxdragon
Copy link

This version works better for me, and handles month number of day differences:

onChangeMonthYear: function (year, month, datePicker) {
    var daysInMonth = new Date(year, month, 0).getDate();
    var oldDate = $(this).datetimepicker('getDate');
    var oldDay = oldDate.getDate();
    if (oldDay > daysInMonth)
        oldDay = daysInMonth;
    var newDate = new Date(year, month - 1, oldDay, oldDate.getHours(), oldDate.getMinutes());
    $(this).datepicker('setDate', newDate);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@cosm1c @elisherer @laxdragon @pratik136 @nicofrand