Skip to content

Commit

Permalink
AltField and AltFormat Demos
Browse files Browse the repository at this point in the history 
Added demo codes for AltField and AltFormat in Unix and ODBC date
formats.
  • Loading branch information
@KidSysco
KidSysco committed May 4, 2016
1 parent 4e07b30 commit 696fc77
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 4 deletions.
14 changes: 14 additions & 0 deletions demo/examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,20 @@ $(document).ready(function() {
title: 'MonthPicker Dialog Test',
modal: true
});

$('#AltMonthField').MonthPicker({
SelectedMonth: 'Jan, 2016',
MonthFormat: 'M, yy', // Short month name, Full year.
AltFormat: '@', // Unix time stamp.
AltField: '#serverValue' // Selector for hidden input.
});

$('#AltMonthField2').MonthPicker({
SelectedMonth: 'Jan, 2016',
MonthFormat: 'M, yy', // Short month name, Full year.
AltFormat: 'yy-dd-mm', // ODBC time stamp.
AltField: '#serverValue2' // Selector for hidden input.
});

$("h1").text( $("h1").text().replace('@VERSION', $.MonthPicker.VERSION) );
});
45 changes: 41 additions & 4 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,11 +188,42 @@ <h3>Month Format Demonstration</h3>
<option value="MM &apos;in the year&apos; yy">With text - MM 'in the year' yy</option>
</select>
</p>

<h3>Inline Menu Demonstration</h3>
<h3>Alternate Field/Format Demonstration</h3>

This comment has been minimized.

Sign in to view

Copy link
@benjamin-albert

benjamin-albert May 5, 2016

Collaborator

@KidSysco Forgot to say great work with the new demo yesterday :)

It's definitely better than my example fiddle where the alternate field gets hidden when you open the menu.
<p>
This demonstrates the Month Picker menu inlined in a div tag.
<div id='InlineMenu'></div>
This demonstrates how the <a href='https://github.com/KidSysco/jquery-ui-month-picker/wiki/AltField-Option' target="_blank">AltField</a> and
<a href='https://github.com/KidSysco/jquery-ui-month-picker/wiki/AltFormat-Option' target="_blank">AltFormat</a> options work so that values shown to the user can be different than what is submitted to the server.
<table style="margin-top: -25px;">
<tr>
<td>Value shown to user:</td>
<td>&nbsp; &nbsp; </td>
<td>Unix Date value sent to server:</td>
</tr>
<tr>
<td><input id="AltMonthField" style='width:100px;' /></td>
<td>&nbsp; &nbsp; </td>
<td><input name='selectedMonth' id="serverValue" />
<!-- This could be a hidden input, I made it a text so you cen see what gets sent to the server -->
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Value shown to user:</td>
<td>&nbsp; &nbsp; </td>
<td>ODBC Date value sent to server:</td>
</tr>
<tr>
<td><input id="AltMonthField2" style='width:100px;' /></td>
<td>&nbsp; &nbsp; </td>
<td><input name='selectedMonth2' id="serverValue2" />
<!-- This could be a hidden input, I made it a text so you cen see what gets sent to the server -->
</td>
</tr>
</table>
</p>

<h3>jQuery UI Dialog Integration Demonstration</h3>
Expand All @@ -202,6 +233,12 @@ <h3>jQuery UI Dialog Integration Demonstration</h3>
<br />
<button type="button" id="LaunchDialog" onclick="$('#Modal').dialog('open');">Launch Dialog</button>
</p>

<h3>Inline Menu Demonstration</h3>
<p>
This demonstrates the Month Picker menu inlined in a div tag.
<div id='InlineMenu'></div>
</p>

<h3>HTML 5 Month Input Type Support</h3>
<p>
Expand Down

3 comments on commit 696fc77

@KidSysco
Copy link
Owner Author

@KidSysco KidSysco commented on 696fc77 May 5, 2016 •
edited by benjamin-albert

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was in your test right? I saw that when I added tests for clearing the AltField.

I thought that your approach was rather interesting, you ran all operations against that hidden field including test assertions and the hidden field was never actually inserted into the DOM.

I also noticed something interesting about your style of jQuery programming...

You do this,

$(ElementId)

instead of...

$("#ElementId")

Which I had no idea even worked. It's interesting that it does and I see why now, but I have never seen either of these approaches before so I enjoyed reading your code, working in it, and learning from it!

@benjamin-albert
Copy link
Collaborator

@benjamin-albert benjamin-albert commented on 696fc77 May 6, 2016 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I only recently (about 8 months ago) learned that if a property is not found on the global object (know as window in the browser) it searches for an element with that ID on the document (DOM).

But there's a reason you rarely see this (in fact I would never use this in an environment that I don't 100% control).

The reasons you should avoid using this is:

  1. If you define an element with the Id foo and then someone in the future defines a global called foo you will have a name clash (where the global wins and your code breaks).
  2. Even developers that know this trick will think it's a property on the global object and try to search for its definition in .js files before they realize it's defined in HTML.
  3. The Id must be a valid JavaScript identifier (which is rarely the case because you can use characters such as -, # or .)

The reasons I use this trick in our unit tests are:

  1. I'm kind of lazy when it comes to writing well factored unit tests.
  2. I 100% control the test environment so when it fails I can just refactor this.
  3. Unlike a production like environment the whole point of unit tests are running tests and watching it fail (even on annoying things like this).

I'm not saying it's always a bad idea to use this trick, but you should definitely think twice before using it.

@KidSysco
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I was able to pull up quite a bit of info about it, most of it read like that and most folks recommended against it. I figured you knew all of this too but I didn't want to say anything to you about it. I trust you and I know you will beat me to fixing any sort of problem that might arise. And using the hidden input without even inserting into the DOM. Thats great, I had no idea that would work as such. Very interesting approaches, this is all very rewarding stuff for me! We are a good team and this is a lot of fun! Woot!

Please sign in to comment.