Disabling dates with jQueryMobile and Mobiscroll - jquery-mobile

I need to disable dates e.g. weekends and holidays on a jQueryMobile date picker similar to the jQuery datePicker http://forum.jquery.com/topic/datepicker-beforeshowdate.
I'm using Mobiscroll http://code.google.com/p/mobiscroll/ where there are no date restrictions. Is it possible to restrict dates with mobiscroll?
My question is: what is the best approach to disabling dates for a smart phone datepicker (including mobiscroll and other options)?

DateBox in calendar mode works (DateBox).

Did you try to validate on the onSelect event? If it's not a valid selection, pop a message or something.
EDIT: Starting from mobiscroll 2.0 you can disable (make them un-selectable) date with the invalid option.
Check out the documentation for more info: http://docs.mobiscroll.com
EDIT:
Disable recurring days like days of week, or recurring dates with daysOfMonth, or exact dates by passing a Date object.
$('#demo').mobiscroll().date({
invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] }
});

Related

Manual date entry check for jQuery UI Datepicker

I have jQuery datepicker on a page that allows manual date entry.How to check the format and validation of date in the jQuery UI Datepicker.For example,input 20030230,and it will remind me of the incorrect date.
thanks for your help.

How can I resolve Automatically fetching dates in datetimepicker?

I am using Bootstrap datetimepicker. When I open a datetimepicker calendar, without selecting any date if I click outside its automatically taking current date and time. How can I resolve this issue? After selecting date only the selected date should display on the screen. How can I do this?
If you are using Bootstrap 3 Datepicker v4 by eonasdan set
useCurrent: false
http://eonasdan.github.io/bootstrap-datetimepicker/Options/#usecurrent

Grails:How to disable dates in calendar plugin

I' have 2 text fields 1st one for giving date from and the other one for date to, what i want is while i'm selecting date from using 'calendar:datePicker' the dates before current date must be disabled and if i have selected a date 1/6/2014 in 1st text field, when i select the date to from the 2nd one the dates before 1/6/2014 must be disabled how can i achive this..?
From<calendar:datePicker name="datefrom" years="${2014..2017}" value="${new Date()}" defaultValue="${new Date()}"/>
To<calendar:datePicker name="dateto" years="${2014..2017}" value="${new Date()}" defaultValue="${new Date()}"/>
That looks like an old plugin and it might not have the option that you need.
Use jQuery UI instead: http://jqueryui.com/datepicker/#date-range
jQuery UI has a grails plugin as well. http://grails.org/plugin/jquery-ui

How to add a form field which accepts the date of birth of a person?

I'm creating a form in which there will be a select box for day, month and year to store the date of birth of a person? I'm using devise and going to customize it. Thanks in advance.
You could use jQuery UI Datepicker:
http://jqueryui.com/datepicker/
There are plenty of other Datepickers around, just google it and find what is best for your stack. If you are using Twitter Bootstrap, here is something:
http://www.eyecon.ro/bootstrap-datepicker/
You can use the built-in date_select helper. Or you could use jquery datepicker

Datepicker UI format error in Google Chrome

I have been doing some testing whilst using Jquery UI datepicker and have found that the date format doesn't work correctly with Chrome - if I type 13/10/2009 an error appears saying that it is incorrect format. What I think has happened is that the format is dd/mm/yyyy for all browsers and validation but for some reason chrome has defaulted to mm/dd/yyyy - i.e. it works fine across all other browsers but not Google Chrome.
Here's a link: https://www.carcreditassured.co.uk/apply-now-poor-rating/ (on this occassion I'm going to change the question type to three select boxes to aid usability but I would like to know an answer for future reference)
Here's my jquery code:
$('.date-pick').datepicker({
showOn: 'both',
buttonText: 'Choose a date',
buttonImage: '/images/calendar.png',
buttonImageOnly: true,
dateFormat: 'dd/mm/yy',
numberOfMonths: 1,
showButtonPanel: true
});
Any advice would be greatly appreciated.
Best wishes
Rachel
P.S. After reading another post on this forum I tried to captialise the MM and that gives a format of (13 October 2009) which isn't what i'm looking for.
i have experienced the same issue and i solved it in a simple way, i think it will be helpful to all others too.
change the input field type to "text" from "date" or "datetime-local".
its the problem with chrome, it automatically converts the date format to default, date picker passes the date in the mentioned format. when we change the input type to text then browser will not interfere to our date. Helpfull ??? :-)
I think it looks at the browser's Locale settings (for google, go to chrome://settings/language)
You'll need to set it for your picker control like so:
$('.date-pick').datepicker("option", $.datepicker.regional["en-GB"]);
having said that, your picker results in dates in dd/mm/yyyy format for me even if I set Google Chrome to use American English, albeit the week starts with Sunday, so it's still influenced unless you set control's culture as per code I've provided.

Resources