I want to change the datepicker for my mobile website on iOS - ios

Currently the datepickers trigger the default iOS datepicker with dd-mm-yyyy format. I would like it to trigger the dddd-dd-mm-yyyy format so users are better at picking the correct date because they can see the actual day of the week.
Is this possible for a mobile website?

I'm not sure about doing it for mobile website. But we can change format of default iOS date picker if you want. It's directly not possible through date picker. There is another component called UIPickerView in iOS, through which we can achieve this. Check how to create UIPickerView for mobile website and place the values you want in pickerView.

So after doing more research on the subject I have found that it is possible to use datetime-local. This triggers the native datepicker with ddd-dd-mm format but also accounts for the year (so scrolling over december 31 will make the date object move to the next year). This workaround has issues with IE though, so is not a universal solution.

Related

Force TMonthCalendar to display user defined date format

By default TMonthCalendar shows date in the format that is set in Windows control panel (Short Date). I want to override this setting and force TMonthCalendar to always display my format regardless of Windows setting. Is it possible ?
As far as I know, you can not change the date format settings of TMonthCalendar.
The reason for this is the fact that TMonthCalendar is actually just a wrapper around a calendar API from the OS. That is why not only is the date format in the form that is set in OS regional settings, but the whole look of the calendar matches the look of the OS on which you are running your application on.
So, I'm afraid you will have to look at some third party components for this. For instance, TMS Software has several calendar and date-time picking components as part of TPlannerCalendar.
No, this control is a wrapper for the native Month Calendar Control. As the documentation states:
The month-calendar control gets its format and all strings from
LOCALE_USER_DEFAULT.

html 5 input DateTime-Local any browser ios 9 native date time picker - how to select year?

I'm working on an html 5 business application and someone just discovered something weird in Beta testing that I can't find an answer to.
We have a form with date/time input on it:
<input type="datetime-local" step="any" id="StartDate" name="StartDate" value="2015-09-10T10:20:29">
In Safari / Chrome or Firefox browser in iPad or iPhone (IOS 9.02 just confirmed but older versions as well) when I click on the input field it correctly brings up the native date/time picker, however there is no facility to change the year.
It's just not an option at all. Am I missing something fundamental or is this a bug in IOS? Note that this works fine in all other platforms we've tested on with Chrome / FireFox, just not on IOS with it's native picker.
Support for the full range of date type inputs is not yet available in the majority of browsers hence the issue you are getting here. In order to use them, one solution is to utilize a polyfill that provides functionality that the browser does not support.
http://html5please.com/#date
An example is the forms polyfill from the webshims library.
$.webshims.polyfill('forms forms-ext');
Then it is possible to select the year when using your example above.
Webshim link:
http://afarkas.github.io/webshim/demos/
Configurator https://afarkas.github.io/webshim/demos/demos/cfgs/input-datetime-local.html#min=&max=&list=&step=&value=&startView=0&minView=0&stepfactor=&useDecadeBase=0&startValue=&calculateWidth=on&popover=&popover=&popover=
and fiddle https://fiddle.jshell.net/trixta/VNuct/light/ from the developer provide additional information on the use of webshims.
It is NOT a bug. As the Safari Developer Library states, the following values are only valid for datetime-local picker:
date. An input control for specifying a date value. The user can select a month, day of the month, and year. Unlike datetime, date
does not offer the time of day.
datetime. An input control for specifying a date and time value. The user can select a month, day of the month, year, and time of
day.
datetime-local. An input control for specifying a date and time value where the format depends on the locale.
You can find the whole documentation here:
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/InputTypes.html
I would suggest you to combine date and datetime input fields in order to adapt your app for iOS browsers.
Add min/max attributes to enable scrolling to different years.
<input type="datetime-local" step="any" id="StartDate" name="StartDate" value="2015-09-10T10:20:29" min="1970-01-01T00:00" max="2030-01-01T00:00">
https://codepen.io/oriadam/pen/pxvqNE

Show date and time together Jquery mobile Datebox

I am using jquerymobile datebox to implement a calendar with time.
http://dev.jtsage.com/jQM-DateBox2/
I was able to set up the calendar successfully and select dates. But I also want to select the time. All the demos just shows how to set up a date picker and time picker separately. And what I want is both together. i.e in one click I should be able to select both the date and time. Any help would be greatly appreciated.
Thanks
It is not possible to do so in the current version 1.1.0. You are welcome to vote on this issue.

Test different calendars on iOS

I have an app that relies heavily on date calculations. I am using NSCalendar and doing all the calculations "the right way", but I don't really have any way to test any other calendar besides the default US one.
How can you change the calendar used on iOS? Where can I find more information about calendar alternatives?
You can simply change it on your Device/Simulator. Open Settings -> General -> International. Here you can change the format of the calendar date or the calendar itself.

jquery.mobile: how to ask user for date ranges?

I need to ask users of my jquery mobile web site to select a date range.
I can't find any suitable jquery-mobile plugin. I looked for a lot of plugins for date-time picking (the most promising to me being "jQM-DateBox"), but no one seems to allow for a date range.
Any suggestion?
As far as i know there isn't any plugin which provides date ranges until now.
The available date plugins for jQM are
The jQM-Datebox
The MobiScroll
In my opinion the most common way is to use two dateboxes, one for the start date and one for the end date. Initially the end date will be deactivated. The user will select the start date and using the change event you will have to complete the end date with the same date as the selected start date. Afterwards the user will have the option to modify the end date or not.
Im not sure how it works in jQuery Mobile but you could try jQuery UI DateRangePicker (much of jQuery ui is in jQuery Mobile) ...
http://tamble.github.io/jquery-ui-daterangepicker/
Ill be interested to know the outcome.

Resources