Recent Topics

[plugin] jQuery Datepicker Plugin

Started by on Jan 22, 2009 – Contents updated: Jan 22, 2009

Jan 22, 2009 22:08    

Today I proudly present my latest plugin. It's a calendar type date picker for use in the Write / Edit section. There is a JavaScript thingy that's ugly and that had a bug. Because it's the last time you see it: here's an image:

http://www.blog.hemminga.net/B2evoforum/DatepickerOld.png

The Datepicker I offer in this plugin is much nicer. Also it's relatively clevr. It knows your Locale and will paste the date in that Locale. Furthermore it's automagically translated if you have the proper language files installed. Here's a French version of the new jQuery Datepicker Plugin:

http://www.blog.hemminga.net/B2evoforum/jQueryDatepickerFrench.png

All you have to do is download, unzip and install. There are no options.

Download: [url=http://downloads.sourceforge.net/evocms-plugins/jquery_datepicker_plugin-0.2.zip?use_mirror=]jquery_datepicker_plugin-0.2.zip[/url]

Have fun

Jan 22, 2009 23:17

I must have a script conflict. ( Probably one of Yabba's Admin tricks )
Your very attractive DatePicker doesn't show up at all, and in fact neither does the default one!!

Jan 22, 2009 23:47

Hi John,

A conflict is unlikely. Do you have FireBug installed (FF plugin). That will show you what's going on.

Good luck

Jan 22, 2009 23:48

I'll check into it and report back

Jan 23, 2009 00:21

Thanks for the login Afwas.
Alas... there is no Issue Date: field at all when I viewed your "test" blog "write" screen. Note the following from your write screen..

http://wow-factor.com/img/afwas_admin.jpg

Firefox 3 and Safari on OS X 10.5.6

On my installation, I get the Issue Date field at least.

Discovery!!!

In my Admin, when I click on the text,Issue Date: or the input field I get the following unskinned popup!!!

http://wow-factor.com/img/date_picker.jpg

Jan 23, 2009 00:27

You're nearly there.
Try a fresh upload in case you missed a couple of files.
Then view the source of that page. It should read:

	<link rel="stylesheet" type="text/css" href="/plugins/jquery_datepicker_plugin/themes/redmond/ui.core.css" />

	<link rel="stylesheet" type="text/css" href="/plugins/jquery_datepicker_plugin/themes/redmond/ui.theme.css" />
	<link rel="stylesheet" type="text/css" href="/plugins/jquery_datepicker_plugin/themes/redmond/ui.datepicker.css" />
	<script type="text/javascript" src="/plugins/jquery_datepicker_plugin/jquery-1.3.1.js"></script>
	<script type="text/javascript" src="/plugins/jquery_datepicker_plugin/ui.core.min.js"></script>
	<script type="text/javascript" src="/plugins/jquery_datepicker_plugin/ui.datepicker.min.js"></script>
	<script type="text/javascript">
		jQuery(function() {
			jQuery("#anchor_item_issue_date").hide();
			jQuery("#item_issue_date").datepicker( { onSelect: function(){jQuery('#edit_date').attr("checked", "checked");}, dateFormat: 'dd/mm/y', 
			monthNames: ['January','February', 
				'March', 'April', 'May', 
				'June', 'July', 'August',
				'September', 'October', 
				'November', 'December'],
			dayNamesMin:  ['Sun', 'Mon', 'Tue',
				'Wed', 'Thu', 'Fri', 
				'Sat'] });
		});
	</script>


just before </head>

Good luck

Jan 23, 2009 00:32

John wrote:

Thanks for the login Afwas.
Alas... there is no Issue Date: field at all when I viewed your "test" blog "write" screen. Note the following from your write screen..

http://wow-factor.com/img/afwas_admin.jpg

Firefox 3 and Safari on OS X 10.5.6

This was stupid. The user was administrator but had Level 1 and you were trying to edit a post by admin who has Level 10.

:roll:

You can try again.
Good luck

Jan 23, 2009 00:39

The Datepicker source code is spot on..

<link rel="stylesheet" type="text/css" href="/plugins/jquery_datepicker_plugin/themes/redmond/ui.core.css" />
	<link rel="stylesheet" type="text/css" href="/plugins/jquery_datepicker_plugin/themes/redmond/ui.theme.css" />
	<link rel="stylesheet" type="text/css" href="/plugins/jquery_datepicker_plugin/themes/redmond/ui.datepicker.css" />
	<script type="text/javascript" src="/plugins/jquery_datepicker_plugin/jquery-1.3.1.js"></script>
	<script type="text/javascript" src="/plugins/jquery_datepicker_plugin/ui.core.min.js"></script>
	<script type="text/javascript" src="/plugins/jquery_datepicker_plugin/ui.datepicker.min.js"></script>

	<script type="text/javascript">
		jQuery(function() {
			jQuery("#anchor_item_issue_date").hide();
			jQuery("#item_issue_date").datepicker( { 
				onSelect: function(){jQuery('#edit_date').attr("checked", "checked");}, 
				dateFormat: 'dd.mm.y', 
				monthNames: ['January','February', 
					'March', 'April', 'May', 
					'June', 'July', 'August',
					'September', 'October', 
					'November', 'December'],
				dayNamesMin:  ['Sun', 'Mon', 'Tue',
					'Wed', 'Thu', 'Fri', 
					'Sat'] 
			});
		});
	</script>

It's followed by your resize_admin scripts and Yabba's am_image_editor_plugin scripts before </head>

!!!

Jan 23, 2009 00:42

Ok, so a conflict after all. The other plugins load older versions of some jQ elements.
Open /jquery_datepicker_plugin/_jquery_datepicker.plugin.php and set:

var $priority = 99;

Good luck

Jan 23, 2009 00:58

Ok, it works just perfect at your test site :) and it's sweet as.

However it still appears "un styled" on my installation even after setting the priority to 99, reloading plugins, clearing pre rendered cache etc etc.

Jan 23, 2009 01:04

I can confirm the problem on my normal blog.The proposed solution doesn't seem to push the code down. $priority *should* do that.
I'll find a solution.

--F

Jan 23, 2009 01:32

I have good news and bad news,

The good news is that the conflict is with AM_Image_Ediitor. Luckily that one isn't released yet. Yabba has set it's priority to 100, so the 99 I proposed for jQuery_Datepicker wasn't enough. Solution: set the priority of AM_Image_Editor to 98 and taht for jQuery_Datepicker to 99. You can do so in the plugin's settings. No need for editing files.

The bad news is that the calendar displays to high in my normal blog. That's due to inline style by jQuery, It calculates the position of the date input textfield. However it is mistaken by all the other javaScript on that page. The textarea is moved around by all sorts of other items. I'll see if I can find a cure for that.

Good luck

Jan 23, 2009 01:38

Thanks for the effort...
I'll change the priorities

Jan 23, 2009 07:37

Ok, works just fine.
Note: Remember to delete the 2 at the end of the folder name when you unpack your zip

jquery_datepicker_plugin 2

Thanks for the work.


Form is loading...

Content Mangement System – This forum is powered by b2evolution CMS, a complete engine for your website.