I am new to both javascript and coffeescript. I am trying to initialize my datepicker to another language.
Given the following snippet in the documentation...
$(function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
});
If I do the following in my .js.coffee file in a Rails 4 app, it doesn't seem to be working.
jQuery ->
$('#order_expected_delivery_date').datepicker
dateFormat: 'yy-mm-dd'
showAnim: 'slideDown'
minDate: '+3D'
maxDate: '+1M +3D'
$.datepicker.regional[ "zh-CN" ]
Many thanks in advance.
If you look at $.datapicker.regional['zh-CN'], you'll see something like this:
{
closeText: ...,
prevText: ...,
...
}
so the values in $.datepicker.regional are objects which hold a set of localized options for the datepicker. That means that your datepicker call really looks like this:
$('#order_expected_delivery_date').datepicker
dateFormat: 'yy-mm-dd'
showAnim: 'slideDown'
minDate: '+3D'
maxDate: '+1M +3D'
{ closeText: '...', prevText: '...', ... }
and that is interpreted as two arguments to datepicker:
$('#order_expected_delivery_date').datepicker({
dateFormat: 'yy-mm-dd', ...
}, {
closeText: '...', ...
})
and the localization options are ignored.
Probably the easiest thing to do is to merge the localization options into your options.
options = $.extend({ }, $.datapicker.regional['zh-CN'],
dateFormat: 'yy-mm-dd'
showAnim: 'slideDown'
minDate: '+3D'
maxDate: '+1M +3D'
)
$('#order_expected_delivery_date').datepicker options
I use $.extend since you're already using jQuery. I also put the standard localized options before your options since dateFormat might be provided by the localized options and you want to use your own.
You could also use the option method like the example does:
$('#order_expected_delivery_date').datepicker 'option', $.datepicker.regional['zh-CN']
but that might overwrite your dateFormat so some care might be needed.
Related
I am using jquery DateTimePicker plugin and I have to change year range form 2008 to 2018.I am using this plugin, Please help me in this.
jQuery('#datetimepicker1').datetimepicker({
timepicker:false,
format:'d-m-Y',
changeMonth: true,
changeYear: true,
yearRange: '2008:2018'
});
Try following code.
$('#datetimepicker').datetimepicker({
timepicker:false,
format:'d-m-Y',
changeMonth: true,
changeYear: true,
yearStart : '2008',
yearEnd :'2018'
});
You can try yearEnd: 2018,yearStart: 2008.
I've read a lot of different answers to this, but I'm curious as to why my specific way of doing it (which I haven't found online) doesn't not render the desired results.
User selects deliverydate, after which pickupdate datepicker has a maxDate of 14 days from the deliverydate:
$( "#deliverydate" ).datepicker({
defaultDate: 1,
onClose: function( selectedDate ) {
$( "#pickupdate" ).datepicker( "option", "minDate", selectedDate, "defaultDate", selectedDate, "maxDate", (Date.parse(selectedDate) - Date.today())/1000/60/60/24 + 14 );
}
});
How I thought to run the calculation was calculate the number of days from today the selectedDate is and then add 14 (since maxDate can take an argument that's an integer representing the number of days from today).
Note I have Date.js
You can only use the datepicker("option", option, value) syntax for one single option. Since you are using multiple options for the $('#pickupdate') datepicker, you need to specify them as a JSON, as you did for $(#deliverydate). Like so:
$('#pickupdate').datepicker({
minDate: selectedDate,
defaultDate: selectedDate,
maxDate: ((Date.parse(selectedDate) - Date.today())/1000/60/60/24 + 14 )
});
See this JSFiddle for a working demonstration.
See also this Stack Overflow question about using jQuery Datepicker with multiple options.
Finally, you should consider changing to Moment.js. The last release of Date.js was 2007, so there hasn't been any major or minor releases to it for a long time.
OK after a ton of digging... ugh jQuery Datepicker is not doc'ed well.
Two important factoids:
1. Datepicker can only be initialized ONCE, thereafter in order to change the settings, you must use option
2. According to Datepicker, you should be able to provide multiple options in a map of option-value pairs, but nothing I do makes this work, and their docs looks just like single option, so ... whatever, I just set 3 options individually.
The way I got it to work is below:
$( "#deliverydate" ).datepicker({
defaultDate: 1, // 1 day from today
numberOfMonths: 1,
minDate: 0,
maxDate: <%= ENV["Days_in_advance"].to_i %>,
dateFormat: "M d, yy",
// despite the docs, it doesnt' look like you can set multiple options at once, so I'm doing it individually 3X below.
onClose: function( selectedDate ) {
deliverydate = Date.parse(selectedDate);
$( "#pickupdate" ).datepicker("option",
{ defaultDate: ((deliverydate - Date.today())/1000/60/60/24 + 1 ) });
// day after deliverydate
$( "#pickupdate" ).datepicker("option",
{ minDate: ((deliverydate - Date.today())/1000/60/60/24 ) });
// same day as deliverydate
$( "#pickupdate" ).datepicker("option",
{ maxDate: ((deliverydate - Date.today())/1000/60/60/24 + <%= ENV["Max_days_of_rental"].to_i %> )});
// upper limit on rental days
}
});
$( "#pickupdate" ).datepicker({
// this is triggered on DOM load and is overwritten the minute a deliverydate is selected per the onClose
defaultDate: 1, // 1 day from today
numberOfMonths: 1,
minDate: 0,
maxDate: <%= ENV["Max_days_of_rental"].to_i %>,
dateFormat: "M d, yy"
});
i have added function for datepicker. but my date picker is not open on the first click.
here is my jsp code..
To
here is my query functions..
function addDate(idName) {
$(idName).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
}function addTime(idName) {
$(idName).timepicker({`
ampm: true,
timeFormat: "hh:mmtt"
});
}
please help me.. thanks.
DatePickers and TimePickers are assigned to focus events automatically. You do not need to call $(object).datepicker() every time, just at initialization and it will open properly when focused.
A good approach is to assign the .datepicker class to every object you want to have the DatePicker assigned and, then, assign the DatePicker to all elements of that class.
$(document).ready(function() {
$(".datepicker").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
});
Do the same thing with TimePickers.
Try this bellow and i don know what language your using?
#Html.TextBoxFor(model=> model.Filters.EndTime,new { #class = "date" })
$('.date').datepicker({ dateFormat: "yy/mm/dd", maxDate: '+0d', minDate: '-600d'});
above code is written in asp.net mvc
You need to call
addDate(idName)
on document ready like this
$(function() {
addDate(idName)
});
I'm using the date range with jquerydate picker.
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("form").validationEngine();
$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-14:-75'
});
});
</script>
The problem is then that the drop down box starts at 1936, where as I would like it to start at the other end of the scale. Can anyone help
You can use the defaultDate option: http://jqueryui.com/demos/datepicker/#option-defaultDate
jQuery(document).ready(function() {
// binds form submission and fields to the validation engine
// jQuery("form").validationEngine();
var myDate = new Date("March 21, 1997");
$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-14:-75',
defaultDate: myDate
});
});
See on this jsfiddle
I have two jQueryUI datepickers on my page.
They're initialised as below:
jQuery("#departureDate").datepicker({
beforeShow: function() {
getDatesForCalendar("outbound");
},
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
hideIfNoPrevNext: true,
onSelect: function(dateText, inst) { jQuery('#returnDate').datepicker("show"); }
});
jQuery("#returnDate").datepicker({
beforeShow: function() {
getDatesForCalendar("return");
},
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
showOn: "focus",
hideIfNoPrevNext: true,
defaultDate: +1
});
Before they pop up they check which dates are available to them using getDatesForCalendar(), which contains no code that should hide or show the calendars.
My problem is that when the first calendar calls up the second (which is does onSelect), the second calendar flashes up for a second and then disappears. This is a FF/Chrome only issue, it doesn't appear to affect IE8.
I've tried a number of solutions including changing the tabindex (there is now none at all), disabling the show on focus functionality, and finally instead of manually calling datepicker("show") I've tried calling focus() on the field it's tied to. Nothing has worked!
Any advice would be greatly appreciated.
Many thanks,
Jack
Instead of showing the datepicker in the onSelect use the onClose event.
jQuery("#departureDate").datepicker({
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
hideIfNoPrevNext: true,
onClose:function()
{
jQuery('#returnDate').datepicker('show');
}
});
jQuery("#returnDate").datepicker({
numberOfMonths:3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
showOn: "focus",
hideIfNoPrevNext: true,
defaultDate: +1
});
Looks like you will have to roll back to jquery ui 1.7.3 (loaded under Manage Resources in jsfiddle)
http://jsfiddle.net/6haqv/3/
Possible bug in jquery ui 1.8
I wanted to pop up second datepicker only if a date is selected in first one. If I use onClose, the second datepicker will show up even if did not select any date.
As work around to this problem I tried following and it works.
var checkin = $('#dpd1').datepicker({
minDate:now,
numberOfMonths:2,
showOn: "button",
buttonImage: "img/calender.png",
buttonImageOnly: true,
onSelect: function( selectedDate ) {
var dateObject=new Date(selectedDate);
dateObject.setDate(dateObject.getDate()+1);
$( "#dpd2" ).datepicker( "option", "minDate", dateObject );
showSecond=true;
},
onClose: function( selectedDate ) {
if(showSecond===true){
$( "#dpd2" ).datepicker("show");
showSecond=false;
}
}
});
I just got the same bug in jQuery UI 1.11.0.
I found a workaround by calling a setTimeout in the onSelect datepicker method:
$('#arrival-date, #departure-date').datepicker({
showAnim: 'slideDown',
onSelect: function(dateText, inst){
if($('#arrival-date').val() != '' && $(this).is('#arrival-date'))
{
setTimeout(function() {
$('#departure-date').datepicker('show');
}, 100);
}
}
});
Im not sure is that solution is good, did you saw what happen if you click on the first calendar, but you dont select any day, just simple click outside, and then try again to open it?
I try it and you can open the first calendar the first time, the second time you cant, you need to open the second calendar, and then you can again click on the first calendar.