I've got a jquery ui datepicker on my page. It's linked to a span not an input. It's currently tweeked to select a week at a time. I've also got two buttons on my page 'Previous Week' and 'Next Week'. I want the buttons to control what's selected by the datepicker. (ie jump forward / backward by one week when pressed).
I'm not sure how to grab the datepicker so I can mess with it (or what I actually mess with - is there a real 'object' there, or is it a just a load of css / html component like 'ui-datepicker-current-day' etc).
there is a real object you can hold a reference to.
example:
var datePicker = $("#id").datepicker({firstDay: 1});
to know what you can do with it, check:
http://jqueryui.com/demos/datepicker/
Related
I have two columns in this demo
Setting Type (which has drop-down list)
Editor (it contains the value of column)
I want to change the the Editor column when drop-down list value is changed (from Setting Type column). Example, if a user selects date from drop-down list, the Editor column field should change to date picker.
Can anyone help me to solve this problem? I've been stuck with this for a week. Appreciate your help. Here's a demo: DEMO IN DOJO
One option is to switch to incell edit mode (https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable) so that when the editor for the settingDefaultValue is created, the value of settingType is set.
The second option is to bind to the change event of the typeEditor and re-create the editor for settingDefaultValue. Currently, I don't think the grid.refresh() will even be fired, since the grid has a row open for edition. In the typeEditor change event, e.sender will give you the kendoDropDownList, and something like e.sender.element.closest("tr").find("td:nth-child(2)") will give you the container to put the editor in.
One more remark: use either data-bind="value:YourFieldHere", or a change handler with options.model.set("YourFieldHere", this.value()), but you don't need to do both - setting the YourFieldHere is literally what the value binding does.
So what I am trying to accomplish is what most Hotel or Airport sites have in general, after you've chosen a date for your arrival when clicking on the next calendar it automatically updates the calendar dates to the same month in which you chose your arrival.
See: http://hotelsaxchicago.com
I currently have jQuery UI and it's calendar plugin for a casino/hotel site: http://staging.comanchenationcasinos.com
Is there away to do something similar on here? How can I detect what's already in the input field without actually clicking the submit button.
At the same time, how can I trigger the calendar if someone clicks on the icon instead?
Thanks ahead of time.
What I usually do for the calendar link next to the input is something like
$('body').on('click', '.calendar_icon', function(){
$(this).prev('input[type="text"]').focus();
return false;
});
That will drop the focus onto the text input sitting previously in the markup.
Regarding the date resetting, try something like this:
Assuming you have the first input with the id of first_date and the second as second_date...
$('body').on('change', '#first_date', function(){
var this_date = $(this).val();
$('#second_date').datepicker("setDate", new Date(this_date) );
});
Worth noting, you could also attach the two date pickers with data-next-datepicker="#something" to make it really specific if you'd rather not use #second_date. I'd go that route if you had a series of dates on the page.
I'm using this datepicker plugin to display a popup datepicker.
It's working fine, but I'm having trouble assigning it the correct styles.
I have 2 of them, the first not being an issue.
I have the following JS:
$(".datepicker1").pickadate({
min: 1,
onClose: function() {
var picker = $input.pickadate("picker");
picker.set("select", this.component.item.select.pick);
picker.open();
}
});
What it does is simple: The moment a user selects a date on the first picker, the second one is displayed, with the previously selected date displayed(In order to let the user know what the range of dates will be that he/she selects).
Everything works just fine, but I don't want the default blue square background for the selected date. I want something like this as opposed to what I currently have, which is just a different background-color.
Does anyone know how I can achieve this?
Without being able to see the markup or css, my first inclination with these is to add a CSS triangle either to the element, or to the elements :before pseudo class.
As for making the CSS triangle, go here:
http://apps.eky.hk/css-triangle-generator/
You have to find the class
.picker__day--highlighted:hover, .picker--focused .picker__day--highlighted
in the default.date.css file. Then, you can easily modify "everything" concerning the today hightlight shape
I have a calendar picker working using jqueryUI but wanted to try to convert it to the native date picker.
i'd like to be able to have the following:
start with the "< input id="nativedate" type="date"/>" element being hidden from the view.
when the main page element is clicked, have the < input > element show, with the calendar opened
when the user selecs a date on the calendar, the element is hidden.
Right now when i get to step 2, the < input > item is showing but with the calendar hidden,
so the user must click to have the element appear and then click again to have the calendar show and then a third click to select the date.
EDIT: I've tried the following:
$('#nativedate').click(function(){
console.log('click logged');
})
and then in another method:
$(#nativedate).trigger('click');
which works in terms of my event handler i've set up, but it does not open the calendar
Some Questions:
i) Is the browser's native datetime element is Opening or your calender is opening on input decleration ?
ii) If the your item is not showing after some time then try some javascript to force it to keep open nearby that specific input tag?
These May Help
Disable native datepicker in Google Chrome
Remove background arrow from date input in Google Chrome v20
or Try Google Search
or You can edit the browsers native DateTime Picker using CSS.
I have a sencha touch form where one of the fields has an xtype of 'datefpickerfield'
This operates exactly as it should. (i.e. tap the field, date picker pops up, you select the date, it closes and populates the field)
Based on another event in the form (change of a select field) I would like to update the datepicker field in code.
I have managed to do all of this, except being able to find suitable code that actually updates the field. I can update a text field without issue, but not a datepicker field.
What am I doing wrong?
Sorry, I do not have a proper code sample to post, but if anyone could just point me in the right direction here, I would be most grateful.
This is what I have used to update a text field which works, but doesn't for a datepicker field:
var nDate = '13/08/2011';
Ext.getCmp('SampleTextField').setValue(nDate);
datepicker needs a Date object, not a string
As per value of a datepickerfield is an object with properties for each component (ie. day, month and year), you can programmatically do the following:
Ext.getCmp('SampleTextField').setValue({day: 1, month: 1, year: 2001});
Also, try to avoid getCmp. It very time consuming.
HTH.
Milton.