Search jQuery

jQuery Forum

Datepicker extension with month and year picker

in Developing jQuery UI • 8 years ago

I've created an extension for the UI Datepicker that adds an easy month and year picker, IMHO providing a better UX than the default dropdowns.
https://github.com/silverskater/jQuery-UI-Datepicker-MonthYearPicker-Addon

I don't clain that it's perfect and I've only tested it on FF, IE6 and IE8. And it's turned off for multimonth datepickers so it might not be what you need.

I'd like to see it included into the datepicker, but it's already working as it is. Feel free to use it or improve it as you need.
What do you guys think?

Replies(11)

chrishies..

Re: Datepicker extension with month and year picker

8 years ago

I'm looking forward to using this. Can you include (perhaps in README.md) a javascript example of how to use it? I'm trying to use it and I'm not sure if I need to call it separately or if it overrides normal datepicker functionality. But so far I've included your files and it's behaving the same as the old datepicker.

Thanks.

silverska..

Re: Datepicker extension with month and year picker

8 years ago

Hi Chris,


You just need to add the js and the css to your file AFTER the jquery ui datepicker. This will simply extend the datepicker, so there are no extra functions to call.
I've just addd this to the readme file:
Example
Add these two lines to your html after <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>:
    <script type="text/javascript" src="jQuery-UI-Datepicker-MonthYearPicker-Addon/jquery.ui.datepicker.monthyearpicker.js"></script>
    <link type="text/css" href="jQuery-UI-Datepicker-MonthYearPicker-Addon/jquery.ui.datepicker.monthyearpicker.css" rel="stylesheet" />
That's it, your datepickers will show a nice month and year picker when clicking on the month year heading (e.g. September 2012).

thanks for the feedback and have fun using it

chrishies..

Re: Datepicker extension with month and year picker

8 years ago

Thank, but I did try that the first time. I'm still having no luck. I've boiled it down to the minimum source code and I still can't get it to work. Though it could have to do with the way jquery is changing how their UI package is laid out.

While I expect to see your specific month-year calendar, I still see the normal jquery ui datepicker.

<!DOCTYPE html>
<html>
<head>
<title>DatePicker Plugin Test</title>
<link rel="stylesheet" href="/css/jquery/themes/base/jquery.ui.base.css" media="all" type="text/css">
<link rel="stylesheet" href="/css/jquery/themes/base/minified/jquery.ui.theme.min.css" media="all" type="text/css">
</head>
<body>
<input type="text" name="monthyear" id="monthyear" value="12/2013" />
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery/ui-1.8.22/minified/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery/ui-1.8.22/minified/jquery.ui.datepicker.min.js"></script>
<script type="text/javascript" src="/js/jquery/ui-datepicker-monthyearpicker/jquery.ui.datepicker.monthyearpicker.js"></script>
<link rel="stylesheet" href="/js/jquery/ui-datepicker-monthyearpicker/jquery.ui.datepicker.monthyearpicker.css" media="all" type="text/css">
<script type="text/javascript">
$(document).ready(function () {
$("#monthyear").datepicker({ dateFormat: 'mm/yy'});
});
</script>
</body>
</html>

silverska..

Re: Datepicker extension with month and year picker

8 years ago

While I expect to see your specific month-year calendar, I still see the normal jquery ui datepicker.

If you see the normal datepicker you can click on the month and year heading (September 2012) to get to the month picker. The heading changes to show only the year, when you click that you get to the year selection. I think this is similar to how the windows 7 calendar works.
The purpose of this plugin was to extend datepicker functionality, and not to replace it. But I think it would be easy to skip the normal datepicker screen based on the date format or a new option. Just let me know if that's what you need.

chrishies..

Re: Datepicker extension with month and year picker

8 years ago

Oh, you're right. I expected the interface to be different. It does work the way you suggest - I was just looking for something different.

What I wanted was a way to select the month and year, and then have the html input element be updated with the month and year, without requiring the user to click on the day. But it sounds like we have different ideas in mind.

Thanks anyway!

johnicent

Re: Datepicker extension with month and year picker

7 years ago

Thanks so much. I tried it and it worked.

I just added the files. No changes made to the code.

Thank u

Marc Rous..

Re: Datepicker extension with month and year picker

5 years ago

I did include the files all right but I'm getting this error when clicking the month

Line: 1
Error: 'DP_jQuery_undefined' is undefined

Any thoughts ?

jakecigar

Re: Re: Datepicker extension with month and year picker

5 years ago

Don’t attempt to wake the dead post. As your own questions.

JΛ̊KE

silverska..

Re: Datepicker extension with month and year picker

5 years ago

Marc, the code has been updated to work with jQuery UI 1.11. The "DP_jQuery_undefined' is undefined" is gone.

(Sorry if I shouldn't have answered in this thread.)

jakecigar