[Brandon]

Here is a working date picker. I know a lot of people were asking about something like this. I know it probably wont fit everyones project but hopefully it will help some. Simply open the project and you can run the demo. There is also a small readme in it. The original calendar script was off of javascriptkit.com I just modified it a bit and got it working in MobiOne. I have not tested the calendar a lot so Im not sure how well it will interact with other objects and such. However, I have it writing the selected date into a variable called myDate, In theory you could use this to search local storage for an event, or use it to write an event to local storage and create a events calendar.

http://cincyplanet.com/mobione/files/datePicker.mobi

[ehpdesigns]

Checked out the demo file and it runs great. Looking forward to tweaking this to meet my apps needs.

Quick question, is the “Open Calendar” button necessary or can I have a page open up with the calendar already visible?

[Brandon]

If you may the java call in the load document it should open it right up, you may also need to take out when it closes if you want it to remain open.

To stop it from going away when the user clicks on it modify this:

// When the user clicks the day.
function ds_onclick(d, m, y) {
    // Hide the calendar.
    ds_hi();    //<----REMOVE THIS LINE TO KEEP THE CALENDAR OPEN
    myDate = ds_format_date(d, m, y);
    if (show_alert == 1){alert (myDate);}
}

[DavidPhillips]

Great job Cinci, This is a great way to link the the user to local storage, keep up the good work!

[Brandon]

@phillda

Thanks. I havent been able to post much as I am focusing on the mobile business and getting clients. I am hoping to maybe post less, but post better samples or full projects. And hopefully get a few more contributors to the blog (so if anyone is interested contact me)

[davite]

Hello!

First of all, thank you for you great work with the code, but i’m totally newbie in this and i have a question. How can I assign the value of the variable “myDate” to a textField?

Thanks a lot.

[Brandon]

This assumes your text field is called textField1

$(‘[id$=textField1]’).val(myDate);

[davite]

Thanks a lot!. It’s fixed now, it was a problem with my TextField id.

[hussain.m]

Hello,

I tried your code and it works perfectly. But when I tried using it inside multipage widget, the calender goes up along with that page when the display button is clicked. Can you please help me with this issue?
You can find my test project here: https://www.dropbox.com/s/beaxw49lblealwn/TestDatePicker.zip

Thanks a lot.

[Robert Gardner]

Perfect timing on this calendar feature…. How do you hide the HTML tag shown on the app?

[Robert Gardner]

This indeed is a great addition and example. Two questions with this… With regard to placing the date value in the text field where does the code get placed in the HTML code or does it get placed elsewhere. I commented out the original and pasted the the suggestion noted in the post with my text field. It doesn’t show the date text in the field however when i run it in the test center.

My code is after the myDate=ds_format_date(d, m, y);

I placed this code $(‘[id$=QQ_ReturnDate’).val(myDate);

Lastly, when I place the HTML in the app anywhere but on the top of the screen the calendar popup shifts the entire screen up to where the top of the HTML is placed. I want to retain the entire app screen and just have the calendar pop up in place…

Thanks in advance to everyone who shares. I’m rather new to this so I’m trying to get up to speed..

[Robert Gardner]

I figured out the issue with the text field….

[Robert Gardner]

Ok… So I want to calculate the difference between two dates on my app screen. The screen ids are QQ_ prefixed.

I’ve attached my function which is called by a push button onclick CalculateOvernights() I can’t seem to see the variables date1 date2 when I use the debugger? What am I doing wrong? The function is contained in the datepicker html.

function CalculateOvernights() {
 
    date1=QQ_DepartureDate;
    date2=QQ_Returndate;

// get the parts of the date
    date1=date1.split("-");
    date2=date2.split("-");

// rebuild the date so js understands it and convert to millisecs
    date1=new Date(date1[2], date1[0] - 1, date1[1]).getTime();
    date2=new Date(date2[2], date2[0] - 1, date2[1]).getTime();

// difference between the dates in millisecs
    var difference = Math.abs(date1 - date2);
    var Overnights = Math.round(difference/86400000);

// Put the result into the text field

  $('#m1-QuickQuote-QQ_NumOvernights').text(Overnights);
}

[Robert Gardner]

I should have stated the property id of the text fields containing the dates in the format mm-dd-yyyy are prefixed QQ_ in my function….

[hussain.m]

Hi aviator21114,

Even my calendar popup shifts the entire screen up.
Did you figure out a way to fix that?
Thanks

[Author]

Posts