jtsage / jtsage-datebox Goto Github PK

Hi there,

I have a jquery mobile page with multiple internal pages.
I'm setting the value of a date field before transitioning to the "edit" page, but the first time i go to the "edit" page the setting of the value is lost. After going to the edit page at least once, it works as expected when i go back and forth (i dont think the datebox is initialized when i set it first because i havn't gone to that page yet).

I suspect that the datebox initializes when going to the "edit" page for the first time (after i set the value).

Is there a way around this? I hope i explained that ok

Cheers,
Michael

Document method and possibility of changing datebox options after the page has been created (not all will work).

Days and Dates that are blacked out are selectable in the 'extra' dates from surrounding months, even if they are explicitly listed.

On an iPhone (or the simulator if you have a mac):
Open safari and go to google.com
Change the URL to http://dev.jtsage.com/
Open a date picker that is going to show up in a dialog page.
Without setting a date just press the "X" button to close the dialog.

The result is that closing the dialog will take you back to google.com. As the code stands the changePage that shows the dialog isn't in the page history so the cancel/back button takes you back to google. Desktop Safari and Firefox don't seem to have the problem, only mobile Safari.

line 255 needs to change from
$.mobile.changePage(self.pickPage, 'pop', false, false);
to
$.mobile.changePage(self.pickPage, 'pop', false, true);

After making the correction above there still is a problem. Using $.mobile.changePage on line 262 to go Back/Close the dialog box doesn't work right. After going Back/Closing the dialog if you try to go Back from the page that contains the form enclosing the datebox input then jQM will attempt to do the reverse pop transition when it shouldn't. I'd guess that in some way the transition effects are push on some stack with each hyperlink/form used and going back pops them off of that stack. Using $.mobile.changePage to go back leaves a left-over reverse pop for use.

line 262 needs to change from
$.mobile.changePage([self.pickPage,self.thisPage], 'pop', true, false);
to
$(self.pickPage).dialog('close');

When I use "calStartDay": 1 in calbox mode, the days numbers for the previous month are incorrectly computed. The code block applying the start day offset on calmode.start is called too late. Upping it just after calmode.start is assigned and before it is used to compute calmode.prevtoday seem to fix this issue.

snip While I was using the JQM for a mobile Application development, I had a necessity to create a specific Picker called Week Picker whose functionality ids as provided in the below link but in compatible with JQM theme and style:

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerSelectWeek.html

Can you add this as a new feature to the jQuery-Mobile-DateBox Project you are working on.

Please let me know your views.

~~via: krishnan

Hey mate,

I was wondering if it would be possible to prevent the incrementing/decrementing of the Hours when the Minutes rolls over (in timebox mode)

I can see how this is a useful feature, however in some cases I think it would be best to switch off, for usability reasons.
For example, if the current time is "12:50 PM", and i'm wanting to select the time "1:10 PM", then i would first set hour to 1, then increment minutes from 50, to 0, then to 10 (rather than go backwards, which is more clicks), but then i have to go back and re-set the hour back to 1 (as it auto-incremented to 2).

I hope that makes sense,

Cheers,
Michael

Using the mousewheel to change month in calbox doesn't call the _offset method preventing the dispatch of offset event.

Hi,

I have been trying to use simple dialog as a menu to jump from one internal page to another. I followed the Full HTML demo code and it works well. The only issue I am having is when I open the dialog up and click on a previous page that was opened it goes to that page but the dialog box opens after the page loads on its own. Is this a s bug or am I missing something?

I am using phonegap with html5 boilerplate and jquery b2

Thanks,
Deon

Here is a copy of my code.

  <script src="js/libs/jquery-1.6.2.min.js"></script>
  <script src="js/libs/Hyphenator.js" type="text/javascript"></script>
  <script src="js/libs/jquery.mobile-1.0b2.min.js"></script>
  <script src="js/libs/jquery.mobile.simpledialog.min.js"></script>
  <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
  <script src="js/libs/modernizr-1.7.min.js"></script>      

<script type="text/javascript">
    $('#dialoglink').live('vclick', function() {
                          $(this).simpledialog({
                                               'mode' : 'blank',
                                               'prompt': false,
                                               'forceInput': false,
                                               'fullHTML' : 
                                               "<a data-role='button' href='#clinical' id='simpleclose'>Clinical</a><a data-role='button' href='#genpath' id='simpleclose'>GenPath</a><a data-role='button' href='#genedx' id='simpleclose'>GeneDx</a><a data-role='button' href='#wh' id='simpleclose'>Women's Health</a>"
                                               })
                          });
         </script>

<div data-role="page" id="home">

    <div data-role="header" id="header-shelf" data-position="fixed">
        <ul class="top-menu">
            <li><a href="#home" data-role="button" id="topmenu">Home</a></li>


            <li><a href="#" id="dialoglink" data-role="button">Libraries</a></li>
        </ul>   
        <h1>Index</h1>
    </div>

    <div data-role="content" id="home-content">
        Some content
    </div>
</div>

Good Day All,

I am having an issue highlighting dates using the code on the demo. I am passing the dates, but it won't work for some reason. highDays is working. This is on a tight deadline, basically tomorrow/today (Monday, Aug 8th)

Event Dates:

Help or guidance would be appreciated.

Thanks!
Mike

My site required the change event on the input to be fired after the date was set. I changed your JS to include the following, and it worked like a charm.

self.input.val(self._formatDate(self.theDate));
self.close();
/* New */
self.input.trigger("change");

Ok, so I really, really want to be able to either (and when I say this, I mean both really):

1.) swipe the dates to the side to reveal the next ones. i.e. it should be a giant slider.

2.) do the same thing with the mousewheel on a desktop machine.

The issue is I haven't the foggiest idea how to do either - I am hesitant to include any dependencies, because then installation of this becomes cumbersome, but if anyone can point out an example, I'd be much obliged.

~jon

Question: Is there a way to force the inline calendar to be refreshed? We are blacking out dates in our JS code (so after the control has been created) and sometimes the days don't always grey out until you show/hide the page the calendar is on. Something like $("#mycal").datebox("refresh") would be neat.

~~via: Robert C - thanks!

It would be great, if the pattern letters could also be specified, then it would be easier to be compatible with SimpleDateFormat.

See:
http://download.oracle.com/javase/1.4.2/docs/api/java/text/SimpleDateFormat.html

Provide a method to blacklist (make unelectable) specific dates and/or days of the week.

If the current month has more days than the next month, and it is one of those days (i.e. May 31st, vs. 30 days in June), hitting the next month button will cause the calendar to roll to july instead of june. Likewise, using the "extra" dates at the end of the calendar will supply dates from 2 months away, rather than just next month.

When keying a year value manually in the datebox control, one- or two- digit years automatically get reformatted to 19XX, making it impossible to enter a year such as "2003". Modifying line 946 from:

self.theDate.setYear(parseInt($(this).val(),10));

to:

self.theDate.setFullYear(parseInt($(this).val(),10));

fixes the issue.

Also, please fix the spelling of "November" in the monthsOfYear object on line 34.

Thanks...and thanks much for creating a very useful control to work with jQuery Mobile!

Bret Fynewever

I use the JQM pagebeforeshow event to populate the upcoming page with data stored in memory or locally.

When running datebox on the iPhone I see that the JQM pagebeforeclose event is called after the datebox event is called once a date has been set in the calendar. However, the pagebeforeshow event is not called when I run it on any PC browser (incl Safari) - I do not know if this happens on android or not. I was not expecting the event to be fired on the iPhone as this causes the newly selected date to be overwritten with the stored data.

Is it possible that this behavior is caused by the datebox code or is it more likely an issue with JQM? I'm not familiar with the details of either code so want to make sure I know where to go looking for help and to provide more details.

If it's more likely to be in JQM, is there anything that happens in this event sequence that you think may point to the issue?

Thanks!

Under certain circumstances, the left boundary of the popup can be located off the left side of the screen.

Sometime in the very recent past (last few days) it seems that the datebox stopped working on my site. When I went to check the demo on your site (dev.jtsage.com) it also seemed not to be working. The main symptom is that the datebox loads up on the screen ok - however any attempt to select a date, or exit the datebox by tapping the 'X' give no response. (This behaviour is identical on my site and on your demo site.)

Strangely it seems to work correctly when I try it in Chrome or Firefox on the desktop - but not when using my mobile device browser. (Yes - an earlier version had worked well on both desktop and mobile.)

Any ideas what might have changed recently?

Thanks

Sean

There is no selected Date in the calbox, when using a custom Format.

$(function () {
   jQuery.extend(jQuery.mobile.datebox.prototype.options, {
      'dateFormat': 'ddd, DD. MM YYYY',
      'headerFormat': 'ddd, DD. MM YYYY',
      'daysOfWeek': ['Sonntag',
            'Montag',
            'Dienstag',
            'Mittwoch',
            'Donnerstag',
            'Freitag',
            'Samstag'],
        'daysOfWeekShort': ['So',
            'Mo',
            'Di',
            'Mi',
            'Do',
            'Fr',
            'Sa'],
        'monthsOfYear': ['Januar',
            'Februar',
            'März',
            'April',
            'Mai',
            'Juni',
            'Juli',
            'August',
            'September',
            'Oktober',
            'November',
            'Dezember'],
        'monthsOfYearShort': ['Jan',
            'Feb',
            'Mär',
            'Apr',
            'Mai',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dez'],
        'durationLabel': ['Tage', 'Stunden', 'Minuten', 'Sekunden'],
        'durationDays': ['Tag', 'Tage'],
   });  
});

<input data-options="{'noButtonFocusMode':'true','mode':'calbox','noAnimation':'false','calHighPicked':'true'}" data-role="datebox" id="datetime" name="" readonly="readonly" style="width: 100% !important" type="date" value="Mittwoch, 29. Juni 2011"></input>

Maybe the DateBox could save the Date also on a custom attribute "<input data-custom-date=2011-07-27 />"

Or do I need some other options to make it work?

Dates in the input box are not correctly loaded on safari (verified) or ios (unverified, I don't have any ios devices). Instead, it seems to always fall back to "today".

Using calbox select the last day of the month. When you open the calbox again every day that you hover over will stay lit up. Line 305-308 needs to change from:

                            }).hover(
                                function() { $(this).addClass('ui-btn-down-'+thisTheme).removeClass('ui-btn-up-'+thisTheme); },
                                function() { $(this).addClass('ui-btn-up-'+thisTheme).removeClass('ui-btn-down-'+thisTheme); }
                            );

to:

                            }).hover(
                                new Function("$(this).addClass('ui-btn-down-" + thisTheme + "').removeClass('ui-btn-up-" + thisTheme + "');"),
                                new Function("$(this).addClass('ui-btn-up-" + thisTheme + "').removeClass('ui-btn-down-" + thisTheme + "');")
                            );

both can be gotten around by advancing the month around the year barrier.

While using the calbox and switching months, it would be great to have a button that selects the "today-date", instead of browser back each month.

It could be under the calendar-table.

Anyway, thanks for datebox, it is really useful. :)

Provide a method to display the datebox (any mode) as an inline html element, without any popup or dialog action.

Hi,

This issue is related with this : #37

Now we're able to display/hide duration fields in the date picker, but the output is not changed.

So, when I define the "durationOrder" as ['h', 'i'], the picker shows me only hour and minute inputs. However after I select sth, say 03:15, the output is shown as 03:15:00.

I wanted to implement this, but I wasn't sure.
What do you say?

For example in our project, we only need day and hour inputs. Thus, we needed to manually hide minutes and seconds buttons.

A syntax like 'fieldsOrder': ['d', 'h'] would be great, just like used in Android mode.

Thanks,

Add the ability to start the week on a day other than sunday (i.e. Mon-Sun)

minDays and maxDays ignore the year, thus, if minDays or maxDays runs over a year boundry, very odd things happen, including the calendar becoming unusable.

I have a page which has a series of check boxes at the top followed by a date field. The DateBox UI appears under the check boxes.

Here is a sample:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" /> 
    <title>Sample</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script type="text/javascript"> 
        $( document ).bind( "mobileinit", function(){
            $.mobile.page.prototype.options.degradeInputs.date = 'text';
        });    
    </script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox/jquery.mobile.datebox.js"></script>
    <link rel="stylesheet" href="http://dev.jtsage.com/jQM-DateBox/jquery.mobile.datebox.css" />
</head>
<body>
    <div data-role="page">
        <input type="checkbox" name="Sample" id="Sample_192" class="custom" value="192" checked />
        <label for="Sample_192">Sample 192</label>
        <input type="checkbox" name="Sample" id="Sample_294" class="custom" value="294" checked />
        <label for="Sample_294">Sample 294</label>
        <input data-role="datebox" type="date" name="DeliveryDate" id="DeliveryDate" value="3/10/2011 12:00:00 AM" />
    </div>
</body>
</html>

As a hack, I found that if I update the .ui-datebox-container class in jquery.mobile.datebox.css with a z-index:1000; it puts the date box in the right z position. I'm sure there's a more elegant way to do it.

The android style date picker interface would also function nicely as a time picker. The third column could be am/pm. Having an option to specify the stepping of the minutes would also be nice.

< input value="12:00 AM" name="time12" type="text" data-options='{"mode": "timebox", "timeFormat": 12, "minuteStep":15, "useInline": "true", "noSetButton":"true", "useInlineHideInput":"true"}' data-role="datebox" id="time12" />

$('#time12').attr('value') never gets updated.

$('#time12).datebox('close') and $('#time12).datebox('refresh') do not put the time value into $('#time12').attr('value') either.

Perhaps there's a method I can call to simulate pressing the invisible "set" button?

Hi there,

Firstly, thanks for writing this great plugin :) its very cool
I notice that clicking the X button to close a calendar makes the browser go back one in history
This happens in my android app, as well as in firefox when looking at the demo page

Cheers,
Mike

Found a (potential) bug. I may want to make changes to a datebox before the page it is on is created. In order that I can do this I need to initialize the datebox first, so I do something like this:

$("#mydate").datebox();

I can then call $("#mydate").data("datebox").options.etc.

The problem is that the control will be initialized again in the pagecreate event and this ends up creating another calendar on top of the existing one.

It's a bit obscure and I can easily work around this but I thought it was worth pointing out.

Great script. Works out of the box which is rare. Chronicles of Narnia.

Is there a callback event to bind to, or should we just add a click event to the set date button?

For date value for example: 02/2012 I have error:
parts[i] is undefined

in line 180:
if ( parts[i].match(/d/i) ) { d_day = data[i]; }

This date format is very useful for credit cards Exp. field.

Once jQM goes past a4.1, and in particular sometime before 1.0 hits release, the behavior of changePage() is changing, which will break the dialog mode in DateBox.

Trying to figure out the best time for this change to hit the repo here.

Hi.
I upgraded my project to jquery mobile 1.0b and now on certain date boxes (when mode is set to timebox), the dialog opens up but clicking on 'Set Time" doesn't do anything. In my case, I am using a hidden field:

<div data-role="fieldcontain" style="display: none !important;">
        <input id="gcTimeOfReading" type="date" data-role="datebox" name="gcTimeOfReading" 
                    data-options='{"mode": "timebox", "useDialogForceTrue": true, "timeFormat": 12}' />
</div>

It works (with the same set up) when mode is set to "datebox". I grabbed the latest from your project as well but still the same issue. I am testing this on Android devices; it works fine on desktop but not on my Android devices.

Thanks
Ali.

When I am trying any calendar on this site http://dev.jtsage.com/jQM-DateBox/#/jQM-DateBox/demos/calendar/ on my iPhone or HTC Android, it works fine in the "landscape" mode but not in "portrait" mode. Calendar spread out through entire screen, black header Set Date displayed (that header is not showing in the landscape mode) and you can not select date or even close this page.
Any suggestions?

Every DateBox-Typ never use setTimeButtonLabel

Demo: http://dev.jtsage.com/jQM-DateBox/#/jQM-DateBox/demos/time/

The Time Picker is confusing to some people because they are not used to seeing the minutes presented as a single digit (i.e. "5 0" for 5:00. It would be great to have an option to 0-pad the minutes in the Time Picker, just like there is an option to 0-pad months in the Date picker.

On iPod Touch I'm getting initially 1970 as year. On iPhone and iPad is the current date.

When a datebox is instantiated on a time input element with no value, the value is replaced with a date. However since it is a time input, it should contain a timestring (hh:mm), not a datestring (dd/MM/YYYY)

If the calendar control is displayed inline and the input control is hidden then changing the input date won't update the selected date on the calendar. For example:

HTML:

<input type="date" id="mydate" data-role="datebox" data-options='{"useInline": true, "useInlineHideInput": true, "mode": "calbox" }' />

JS:

$("#mydate").val("2011-06-07");
// Calling refresh will not display 2011-06-07 in the selected colour
// The calendar control displays no selected date
$("#mydate").data("datebox").refresh();

I have tested this date box using the following libraries:
jquery.mobile-1.0b1.min.css
jquery.mobile.datebox.min.css
jquery-1.6.1.min.js
jquery.mobile-1.0b1.min.js
jquery.mobile.datebox.min.js

This is working fine in both iPhone and iPad. But on the Windows phone 7 browser, it seems to be not working. The format of the datebox is spread out and ugly. Please tell me if need to tweak anything for WP7.

I'm using the date format
"dateFormat": "DD/MM/YYYY" (italian)

i.e. 11/1/2011

I can pick the date correctly, but when I open the picker again it starts viewing month 11, and selects day 1 (restoring previous value).

What it should do is start viewing month 1 with day 11 selected.

There is no file named "markdown.php" when execute "index.php" in demo.

With this code:

<input name="start" id="start" type="date" data-role="datebox" data-options='{"mode": "timebox"}'>

A timebox appears. I can click at the button to launch it. Cancel button works as expected, but I am not able to "apply" the time. The click on the "Set Time" button is ignored.

On chrome it is working fine

jquery 1.6.1
jquery.mobile-1.0b1.min.js

Environment:

OSX 10.6.7
Xcode 4
iPhone 4 (emulator)