BlogEngine and JQuery

Topics: ASP.NET 2.0, Controls
Feb 23, 2009 at 9:23 PM
I have this textbox on a form that I would like to have a datepicker submit the date. I was using Ajax, script managers and such to do this in VWD with the Club Starter Kit. I am switching ove to BlogEngine and would like to use JQuery to do this now but am having trouble implenting it.. Anyone proficient with JQuery that could help would be greatly appreciated. Thank you.

<asp:TextBox ID="Date" runat="server"></asp:TextBox>
Coordinator
Feb 23, 2009 at 10:17 PM
I've not used the jQuery datepicker.  Do you mean this one?

If so, that one looks pretty straight forward to use.  I took the sample code they had, made a few adjustments, and put the code below into the site.master and site.master.cs file in the standard theme directory.

1. In site.master file, in the <head> section, I added,

<link type="text/css" rel="stylesheet" href="http://ui.jquery.com/testing/themes/base/ui.all.css" />
<script type="text/javascript" src="http://ui.jquery.com/testing/jquery-1.3.1.js"></script>
<script type="text/javascript">
      $j = jQuery.noConflict();
</script>
<script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.core.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.datepicker.js"></script>
<script type="text/javascript">
    $j(document).ready(function(){
        $j("input.myDatePicker").datepicker();
    });
</script>

2. Lower down in site.master, right after the <form runat="Server" class="body"> tag, I put:

<asp:TextBox ID="txtDate" runat="server" class="myDatePicker"></asp:TextBox><br />
<asp:Button ID="btnSubmitDate" runat="server" Text="Submit Date" OnClick="submitDate" /><br />
<asp:Literal ID="litDateSelected" runat="server"></asp:Literal>

3. In site.master.cs, I added,

protected void submitDate(object sender, EventArgs e)
{
  litDateSelected.Text = txtDate.Text;
}

That was all it took.

One note ... you'll notice in the <head> section, I have:
     $j = jQuery.noConflict();
     
This will replace the standard $ jQuery alias with $j.  This is a good idea to have if you're using BE 1.4.5 because BE 1.4.5 has it's own $ alias which conflicts with jQuery's $ alias.  The latest build of BE isn't tied to the $ alias anymore.
Feb 23, 2009 at 10:58 PM
Edited Feb 23, 2009 at 11:10 PM
In VWD with the CSK and ASP..Net 3.5 I was using this

<cc2:CalendarExtender ID="CalendarExtender1" runat="server" Format="dddd, MM/dd/yy"
                                        TargetControlID="Date">
                                    </cc2:CalendarExtender>

with great success, however I am kind of afraid to update the ASP.Net build in BlogEngine to ASP.Net 3.5 to use it. When I did it to CSK it took me awhile to get it working.

What would you suggest as the easiest way to accomplish this in BE. I have about 5 or 6 forms I need to use a datepicker with. Thanks for your help, you are very patient with me and I do appreciate it.

At the present time I am trying this, it is a control wrapped in ASP.net so I can just drag it in place.

 <ww:jQueryDatePicker ID="JQueryDatePicker1" runat="server" Format="dddd, MM/dd/yy"></ww:jQueryDatePicker >

although I cannot get the date to display like this: Tuesday Feb 23 09
Feb 23, 2009 at 11:36 PM
I went ahead and updated the build to ASP.Net 3.5 which added to the web.config, installed the Ajax toolkit and everything is working ok. Thanks for you help.
Coordinator
Feb 23, 2009 at 11:37 PM
Well if you can get your custom jQueryDatePicker control working, then why not stick with that.  The format string for dates is a little different in jQuery (compared to .NET).  I'm not sure what the code in your control looks like, but using the code I had before, this works to get it in the format you're looking for:

<script type="text/javascript">
    $j(document).ready(function(){
        $j("input.myDatePicker").datepicker({
          dateFormat: 'DD, mm/dd/y'
        });
    });
</script>

As you can see, the 'dateFormat' is "DD, mm/dd/y".  For reference, here's the page showing the available format options.
Coordinator
Feb 23, 2009 at 11:37 PM
Okay, just saw your post about upgrading ... sounds good.