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.
Related
I am using the date_field_tag.
<%= date_field_tag :date_from, value = nil, options = {} %>
The date picker is displayed in English, with the machine locale set to is.I am wondering if it is possible to translate the date picker text using I18n.t? Or is this not possible since the date picker is provided by the browser?
The Rails helper date_field_tag generates an input field with a type of "date", but it's not a widely supported field type. You can either let the browser render the field and hope for the best, or use a polyfill to provide support for users who don't have a browser with the functionality. You could also use something like the jQuery UI datepicker for everybody, regardless of whether the browser supports date fields or not.
Your options for translating the control depend on which approach you take. If the browser is drawing the calendar widget, you can't control the language it uses. If you're providing a calendar widget via JavaScript, then you can - it's just HTML, after all. jQuery's datepicker provides a lot of localisation options.
You can try out how your browser displays native date-related fields in this JSFiddle.
I need my users to be able to select a specific datetime in an input field.
I would like to use angular-ui-bootstrap library as it avoids the Jquery dependancy.
The problem is that even if it contains a datepicker and a timepicker, it seems it's not possible to have them in a popup with a nice layout.
I found a component that do exactly what I'd like to do with angular-ui-bootstrap:
http://www.malot.fr/bootstrap-datetimepicker/demo.php
The problem is that it uses Jquery and we need to include a lot of javascript files whih makes the page a bit heavy just for this need...
I investigated in the angular-ui-bootstrap github repo, and found this issue which contain a plunker sample that addresses partially my problem, but with this example there is no possibility of selecting the time.
Does anyone know if it's possible at the moment to use angular-ui-bootstrap datepicker and timepicker to select a datetime?
Maybe this can help. I created a date time picker that wraps the date and time pickers. You can find it here
https://github.com/Gillardo/bootstrap-ui-datetime-picker
The question is some kind of old but in case anybody is still looking for an answer, here is my implementation for timepicker-popup, purely written in angular.
plunkr
I is a mixture of angular-ui-bootstrap datepicker-popup and timepicker with switchable seconds ability.
So, have fun with it!
Why don't you try to use it with a dialog? I made one with dojo and it looks great:
http://jsfiddle.net/eugenia96/t9bae/
var dojoConfig = (function() {
var base = location.href.split("/");
base.pop();
base = base.join("/");
return {
async: true,
isDebug: true,
parseOnLoad: true,
packages: [{
name: "demo",
location: base + "/"
}]
};
})();
I have a form where you click in start_date and a jquery calendar comes up to pick the date. I want to display the date as (ex.) September 25, 2012, but I also need rails to comprehend the correct start date not just output it correctly.
What do i need to add to this?
<%= feed_item.start_date %>
events.js.coffee
jQuery ->
$('#event_start_date').datepicker
dateFormat: 'yy-mm-dd'
$('#event_end_date').datepicker
dateFormat: 'yy-mm-dd'
Take a look at the altField and the altFormat options for the datepicker.
You can store the Rails-friendly date in a hidden field and pass it to the controller, and display the user-friendly field to the user.
EDIT
Take a look at this answer for an example on how to work with altField and altFormat.
The text field and the pop-up are linked in that I can use the calendar and the field shows the correct value (or blank) initially.
But they are not linked in that the pop-up is always for the current month, not the month of the db field value.
= f.text_field :content_date, id: 'datepicker', size: 10
I tried adding ,value: #user.content_date but it didn't help.
My jquery is:
// jQueryUI Date Picker:
$(function (){
$(".datepick").datepicker({ dateFormat: "yy-mm-dd"});
});
I added the dateFormat per dimuch which seemed promising but it didn't help yet.
I also tried altFormat but it did't help.
You probably have different date formats in the datepicker and content_date field. Take a look at this fiddle http://jsfiddle.net/wKNXx/
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'] }
});