Update Datepicker in Sencha Touch Form - javascript

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.

Related

Kendo UI inline editing with dynamically change editor

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.

jQuery date[time] picker - how to save time range (+ modify date format)?

I am using the datetime picker library and it works nicely.
But now, I am I need to save a time range. When I click to the widget, I am able to save a date and time in this format:
2015/03/15 10:15
This works well. But I would need to add a time range and save the date+time in this format:
2015/03/15 10:15 - 12:00
How to do that? I already changed the MySQL column from datetime to string. Now I am facing the problem how to enter the value to the input. When I chose the date+time, then in the input will occur something like this:
2015/03/15 10:15
Then I click to the input and want to manually add this text: - 12:00. But when I type this text to the input and the click out of the input, the - 12:00 text will disappear and in the input stays only following: 2015/03/15 10:15.
How to solve this problem? Any thoughts?
Thank you.
I think there might be a slight problem in your design.
Ideally, if you need a datetime range (somewhat simliar to what you have on airline and hotel booking sites), you ought to have 2 datetime pickers. One for the start of the range and one for the end of the range. Even with the database. There would be one column for start date and another for end date.
In your case, you need the time range, so you could probably add the time using the DateTime.AddMinutes()

jQuery calendar match date from previous input

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.

Knockout with Jquery UI datepicker date display

Please see this link for details http://jsfiddle.net/pakpatel/5p6Uz/4/
Can we do the range in Datepicker, If first date choose [ 10/12/2012 ] then second date shouldn't be before 10/12/2012, Customer can select date after ex.[10/13/2012] in datepicker.
Could anyone explain me how to implement. Thanks in advance.
By using the previous row's data as the new min, it makes it challenging.
Working demo is at http://jsfiddle.net/photo_tom/5p6Uz/24/
There were two things that were required.
Added a computed observable to pass the previous row's choosedate value to the current row.
Added a new minDate binding to set the mindate option on the date picker.
This is not a completed fiddle. It doesn't properly handle adds or deletes. This is because the ko.computables need to be rebuilt.
EDIT:
Updated to handle add / delete methods. Interesting problem, trying to transfer information between two different rows in the table. Good challenge.
Soution at http://jsfiddle.net/5p6Uz/34/.

Change jquery ui datepicker programmatically

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/

Categories