So I know there are plenty of threads and I've gone through the official documentation and tried the options laid out here, but this Datepicker is my mortal enemy and it simply never does what I, in any way, seek to do:
Currently (and for whatever reason) only future dates can be picked. I, on the other hand, want only dates that are longer than 21 years in the past to be pickable. Along with everything in the past. In fact, just having any dates in the past enabled would already help.
This is what I have at the moment - and to my surprise the DateFormat works - and in general Dates get saved.
$('.datepicker').datepicker({
format: 'dd/mm/yyyy'
endDate: '+0d',
autoclose: true
});
Working with this gem.
With every project no matter how complex or simple, this is the only problem I am having. Always, and ever :).
$('.datepicker').datepicker({
format: 'dd/mm/yyyy'
startDate: '-Infinity',
endDate: '-21y',
autoclose: true
});
Related
I've implemented the ngCordova $cordovaCalendar plugin http://ngcordova.com/docs/plugins/calendar/1 inside an ionic application (not important) and I'm making use of the .listEventsInRange() method which functions as expected on Android. I realise that this method doesn't work on iOS and the only available method is .findEvent(). However I need the same functionality on both platforms for a suggestive style search.
I've tried the findAllEventsInNamedCalendar() method but this only returns events that happen in the future and I'm after events within a range past, present and/or future.
My question is how do you find a list of events from an iOS device given a date range? It seems a little silly to lookup an event "exactly" if you don't know what you're looking for...seems a little stab around in the dark-ish.
I guess the question is two-fold: Does anyone have a working example of cordova calendar plugin listing events using iOS? Does anyone have an example of how to use findEvent()
Cheers for any help!
I found that the official docs didnt work for me on my ios device (iphone 6)
I eventually went here: http://ngcordova.com/docs/plugins/calendar/
note that the docs dont tell you that find event takes an object NOT a list of params.
I created 2 apts on the calendar. one 9-10am and on 5-6 pm. I then used the code below to find apts between 2 dates (play with values of d and d1)
var d = new Date(2015, 5, 10, 9,30,0,0,0);
var d1 = new Date(2015, 5, 10, 10,30,0,0,0);
$cordovaCalendar.findEvent({
title: '',
location: '',
notes: '',
startDate: d,
endDate: d1
}).then(function (result) {
console.log('results', JSON.stringify(result, null, '\t'));
console.log(new Date());
console.log(d, d1);
}, function (err) {
console.error('err', err);
});
Hope it helps
I'm trying to replace the default booking.com affiliate calendar by a clean jQuery instance. Replicating (and improving) the initial UI / UX is quite straightforward. I'm stuck when it comes to matching the parameters needed by booking.com.
As many others posted here, I need my friendly date for visitors AND another output that will be passed on to booking.com. I've used AltField, no probs here. The complexity (for me) is that booking requires "year month" and "day" as 2 separate parameters.
I tried setting up multiple altfields, I tried parsing/substringing my altfield, but all in vain.
Could you please give me some directions ?
$(".full_date").datepicker({
showOn: 'button',
buttonText: 'Here',
dateFormat: 'D, dd M yy',
altFormat: "yy-mm_dd",
altField: "checkin_year_month",
onClose: function (dateText, picker) {
dateArr = dateText.split('_');
full_date.siblings('.checkin_year_month').val(dateArr[0]);
full_date.siblings('.checkin_day').val(dateArr[1]);
}
});
I've also setup a jsFiddle if that helps !
Thanks
Greg
In case you have't solved this yet.
your problem is on this line :
dateArr = dateText.split('_');
What would be better is this :
var dateObject = $(this).datepicker("getDate");
This will return you a Date object that you can work with :
dateObject.getMonth()
Here is a EXAMPLE
Our project using JSF1.2, Icefaces 1.8.2, jQuery UI component datepicker (veresion 1.8.14). Problem with IE7 (Firefox is fine). Problem will happen with following sequence: Select a date (for example, couple days befor doday). Note we have set year range from 1991 to 2012. Our business logic is print a document use that date (in code, called dateOfStudy) as title, once done, in the JSF back bean, I clear the calendar inputext date field to null. Now click datepicker icon again, the year corrtly shows 2011, select any previous month (for example go back to Auguest, 2011), problme happend right here: the year will change to 1991, can not keep at 2011.
The problem will not happen if I do not touch that date field (don't do clear, keep the old date). The problem will still appear even I just change the date font to other color via CSS (seems whenever I touch that field, datepicker will messed up). The problem will not happen if you click today once, or close datepicker, open again.
Seems the datepick need some initializtion after I cleared date?
I attached some code. I have trid method/option like setDate, onChangeMonthYear, beforShowDay, can not solve. Any help is appreciated !!
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function() {
jq("[id$=fmv]").live('click', function() {
jq(this).datepicker( {
showOn : 'focus',
changeMonth : true,
changeYear : true,
dateFormat : 'mm/dd/yy',
yearRange : '-20:+1',
showButtonPanel : true,
closeText : 'Close'
}).focus();
});
});
</script>
<ice:inputText id="fmv"
style="background-image:url ('../../../jquery/images/calendar1.png');
background-repeat:no-repeat;background-position:right;"
value="#{pItem.dateOfStudy}"
validator="#{pItem.validate}"
partialSubmit="true"
name="fmv"
valueChangeListener="#{pItem.dateChangeListener}">
</ice:inputText>
When backbean clear or change input text in calendar inputText, I think that causes a focus event, and calendar confused under IE7. The reason I am using showOn focus is the code is in a table AJAX display area, so use calendar show on image button not work since the button image will not show when AJAX update comes back (the jQuery calendar will not get called), which force me to use showOn focus. I finally solved this year change problem by adding the following refresh calendar line after the final .focus():
jq(this).datepicker("setDate",jq("[id$=fmv]").datepicker("getDate"));
things working fine now. I am not sure how to make this call only when backbean clean the calendar date, but performance seems ok.
I'm trying to render sliders instead of select components.
Each page has several select components marked with class='jqselect' and all of them will have decreasing year values (some years may be missing).
Eg. a select may have values [2010, 2009, 2006, 2005, 2004].
I have tried binding it both following the examples in the jQuery UI doc (but ignoring the missing years) and using selectToUISlider by filamentgroup (http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support//). None of them work.
Here is what I've done so far:
Binding selects with following slider container divs:
$('#content div.jqslider').slider({
animate: true,
min: $(this).prev().children().last().val(),
max: $(this).prev().children().first().val(),
slide: function(event, ui) {
var select = $(this).prev();
select.val($(this).slider('option', 'value'));
console.log($(this).slider('option', 'value')); //debug
}
});
This renders the slider, but console logs values from 0 to 100 and selects obviously does not change with the event.
Using selectToUISlider:
$('#content select.jqselect').selectToUISlider();
This does not even render the slider, throwing an error 'b is undefined' in jquery-min.js (line 30, v1.4.2). If I pass the identifier of only one of the sliders, it is rendered but very buggy.
Please, I'm stucked in the by two days and any help is much appreciated.
Regards,
Arthur
Thanks for those who have visited.
After 2 days trying I could have it working using selectToUISlider.
Simple stuff, but got me plenty of work and trial/errors.
selects = $('#content select.jqselect');
$.each(selects, function(key, value) {
$('#' + $(selects[key]).attr('id')).selectToUISlider().hide();
});
If anyone know of a better of more optimized way of doing this, please comment, and you will be very welcome.
Regards.
How can I change the selected date of jquery Date picker dynamically on the fly?
I have say created a inline date picker.
Then after some time, I want to reflect a different date there without recreating the datepicker from the scratch.
I tried the setDate method, but did not work, and there is not much documentation in the doc.
There is another (extended?) plugin here, but I want to use the plugin which is shipped with jquery.ui.all.js.
What version of jQuery-UI are you using? I've tested the following with 1.6r6, 1.7 and 1.7.1 and it works:
//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );
Check that the date you are trying to set it to lies within the allowed date range if the minDate or maxDate options are set.
This example shows of how to use default value in the dropdown calendar and value in the text box. It also shows how to set default value to previous date.
selectedDate is another variable that holds current selected date of the calendar control
var date = new Date();
date.setDate(date.getDate() - 1);
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
defaultDate: date,
onSelect: function () {
selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
}
});
$("#datepicker").datepicker("setDate", date);
Noted that for DatePicker by Keith Wood (http://keith-wood.name/datepickRef.html) the following works - note that the setting of the default date is last:
$('#datepicker').datepick({
minDate: 0,
maxDate: '+145D',
multiSelect: 7,
renderer: $.datepick.themeRollerRenderer,
***defaultDate: new Date('1 January 2008')***
});
$('.date-pick').datePicker().val(new Date()).trigger('change')
finally, that what i look for the last few hours! I need initiate changes, not just setup date in text field!
For some reason, in some cases I couldn't make the setDate work.
A workaround I found is to simply update the value attribute of the given input.
Of course the datepicker itself won't be updated but if what you just look for is to display the date, it works fine.
var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input
This is a old thread but I just want to give some information how I have used. If you want to set today date you can simply apply it like below.
$("#datepickerid").datepicker("setDate", "0");
If you want to set some days before/after the current date then use the symbol -/+ symbol of how many days you want like below.
$("#datepickerid").datepicker("setDate", "-7");
$("#datepickerid").datepicker("setDate", "+5");
This works for me:
$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));
please Find below one it helps me a lot to set data function
$('#datepicker').datepicker({dateFormat: 'yy-mm-dd'}).datepicker('setDate', '2010-07-25');
setDate only seems to be an issue with an inline datepicker used in jquery UI, the specific error is InternalError: too much recursion.
In Html you can add your input field with a date picker like this
<input class="form-control date-picker fromDates" id="myDate" type="text">
and then in java script, initialize your datepicker and set your value to the date like this,
$('.fromDates').datepicker({
maxDate: '0',
dateFormat: "dd/mm/yy",
changeYear: true,
changeMonth: true,
yearRange: "-100:+0"
});
var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );
(In here fromdate attribute shows the previous dates of the current date)
var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...
I had a lot of trouble with the setDate method as well. seems to only work in v1. What does seem to work however is using the dpSetSelected method:
$("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());
good luck!
or you can simply have
$('.date-pick').datePicker().val(new Date()).trigger('change')