I am attempting to combine this article and this article where I have a date and time pickers in each row. I have this working for existing rows, but they don't work on added rows.
I found the jQuery .live function which seems to be what I am looking for, but I am confused on how it works. Here is my working jQuery code:
$(".datepicker").datepicker({
showAnim: '',
dateFormat: 'm/d/yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: '../../js/txtdropdown/txtdropdown-btn.png',
buttonText: 'Select a date'
});
$(".timedropdown").timedropdown();
I have tried to change them to:
$(".datepicker").live("datepicker", function() {
$(this).datepicker({
showAnim: '',
dateFormat: 'm/d/yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: '../../js/txtdropdown/txtdropdown-btn.png',
buttonText: 'Select a date'
});
});
$(".timedropdown").live("timedropdown", function() {
$(this).timedropdown();
});
But that not only doesn't work, but it also removes them from the existing rows that previously worked.
What am I doing wrong?
I found this question that gave me the solution:
$(".datepicker").live("click", function() {
$(this).datepicker({
showAnim: '',
dateFormat: 'm/d/yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: '../../js/txtdropdown/txtdropdown-btn.png',
buttonText: 'Select a date'
});
});
$(".timedropdown").live("click", function() {
$(this).timedropdown();
});
Related
I'm trying implement Date range picker to ember view.
App.DaterangepickerView = Ember.View.extend({
tagName: "input",
attributeBindings: ["start", "end"],
start: null,
end: null,
didInsertElement: function() {
var self = this;
this.$().daterangepicker(
{
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: '2013-12-31'
},
function(start, end) {
console.log("Date-range-picker:");
self.set('startdate',start.format('DD-MM-YYYY'));
self.set('end',end.format('DD-MM-YYYY'));
console.log("start: " + self.get('start'));
console.log("end: " + self.get('end'));
}
)
},
});
template:
<script type="text/x-handlebars" data-template-name="daterangepicker">
{{view App.DaterangepickerView startBinding="start" endBinding="end"}}
start date: {{start}}
end date: {{end}}
</script>
controller:
App.DatatableController = Ember.ArrayController.extend({
start: "2013-08-07",
end: "2013-08-09",
});
startBinding and endBinding are probably wrong parameters of ember.view, but I don't know how to correctly write by contentBinding. Picker is shows and set a correct information to console, but I need set controller from there. Did you do something similar?
You need to use start intead of startdate.
Update this code from:
self.set('start',start.format('DD-MM-YYYY'));
To
self.set('startdate',start.format('DD-MM-YYYY'));
so your start binding will work.
It's a good idea to pass the current start and end dates to daterangepicker, so when you show the picker it will have the selected value:
this.$().daterangepicker(
{
startDate: this.get('start'),
endDate: this.get('end')
}
The final result is the following:
App.DaterangepickerView = Ember.View.extend({
tagName: "input",
attributeBindings: ["start", "end"],
start: null,
end: null,
format: 'YYYY-MM-DD',
didInsertElement: function() {
var self = this;
var format = this.get('format');
this.$().daterangepicker(
{
format: format,
startDate: this.get('start'),
endDate: this.get('end')
},
function(start, end) {
self.set('start',start.format(format));
self.set('end',end.format(format));
}
)
},
});
And this is a sample fiddle with this working http://jsfiddle.net/marciojunior/UTV3U/
I hope it helps
First off: There are a bunch of questions about this exact thing all over the place. I have spent the better part of a day reading through them all and clearly I am still failing to understand this.
I am getting my store data from a httprequest (rather than standard ajax call) and this is working and adding my data to the store. But whatever I try, this data will not populate the list. Currently my code looks like:
Model:
Ext.define('estarCamera.model.Event', {
extend: 'Ext.data.Model',
config: {
fields: [
'Id',
'Title',
'Content',
'Image',
'Location',
'Latitude',
'Longitude',
'Radius',
'Starts',
'Expires',
'Prestart'
]
}
});
Store:
Ext.define('estarCamera.store.Events', {
extend: 'Ext.data.Store',
config: {
model: 'estarCamera.model.Event',
storeId: 'EventStore'
}
});
Data is populating the store:
var jsonResponse = JSON.parse(xhr.responseText);
if(jsonResponse.status == "Success"){
//Success
var eventsJsn = JSON.parse(jsonResponse.message);
$.each(eventsJsn, function(){
$.each(this, function(k,v){
//Events root element
$.each(this, function(k,v){
//Each 'Event' element
var eStore = Ext.getStore('EventStore');
eStore.add({
Id: this.ID,
Title: decodeURIComponent(this.Title),
Content: decodeURIComponent(this.Content),
Image: this.Image,
Location: this.Location,
Latitude: this.Latitude,
Longitude: this.Longitude,
Radius: this.Radius,
Starts: this.Starts,
Expires: this.Expires,
Prestart: this.Prestart
});
eStore.sync();
})
});
});
Ideally this will then populate:
Ext.define('estarCamera.view.Events', {
extend: 'Ext.Panel',
xtype: 'events',
requires: [
'estarCamera.store.Events',
'Ext.form.FieldSet',
'Ext.List'
],
config: {
title:'Events',
iconCls: 'star',
layout: 'vbox',
items:[
{
docked: 'top',
xtype: 'toolbar',
title: 'Active Events'
},
{
xtype: 'container',
layout: 'fit',
flex: 10,
items:[{
xtype:'list',
title: 'Events',
width: '100%',
height: '100%',
store: 'Events',
styleHtmlContent: true,
itemTpl: new Ext.XTemplate(
'<div class="outerEvent">',
'<h1>title{Title}</h1>',
'<p>{Content}</p>',
'</div>'
)
}]
}]
}
});
Does anyone know why this is happening?
OK, feeling a bit fooling now .. eventually (after an embarrassingly long time) found that this was because my list was trying to reference 'Events' which is the name of my store and how I thought it was supposed to work. Changed this to 'EventStore' (the storeid of my store) and it worked perfectly.
I have a problem with my datepicker. When I focus the text field it shows properly, but when I click anywhere else in the screen (to make it dissapear), then if I focus again the text field without previously selecting another element, the datepicker doesn't show.
Here is the code:
$(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
changeDay: true,
showButtonPanel: true,
dateFormat: 'dd MM yy',
onClose: function (dateText, inst) {
var day = $("#datepicker").datepicker('getDate').getDate();
var month = $("#datepicker").datepicker('getDate').getMonth() + 1;
var year = $("#datepicker").datepicker('getDate').getFullYear();
$(this).datepicker('setDate', new Date(year, month, day));
}
});
});
The problem is in your onClose function. When you call $("#datepicker").datepicker('getDate').getdate(), you run the possibility of calling getDate() on null.
The following should fix the problem, hope it works for you =)
$(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
changeDay: true,
showButtonPanel: true,
dateFormat: 'dd MM yy',
onClose: function (dateText, inst) {
var getdate = $('#datepicker').datepicker('getDate');
if(getdate) {
var day = getdate.getDate();
var month = getdate.getMonth() + 1;
var year = getdate.getFullYear();
$('#datepicker').datepicker('setDate', new Date(year, month, day));
}
}
});
});
Edit: here's the jsfiddle if you need a working proof of concept: http://jsfiddle.net/jcolicchio/fpS2Q/
var birthDate;
$(function() {
var currentDate = new Date();
$("#BirthDate").datepicker({
dateFormat: "mm/dd/yy",
showOn: "button",
buttonImage: "../Images/cal.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
maxDate: currentDate,
yearRange: "-90:+10",
onSelect: function(dateText, inst) { birthDate = dateText;}
});
});
$(function() {
var currentDate = new Date();
$("#MaritalStatusDate").datepicker({
dateFormat: "mm/dd/yy",
showOn: "button",
buttonImage: "../Images/cal.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
minDate: birthDate,
maxDate: currentDate,
yearRange: "-90:+10"
});
});
In the above code I am trying to disable $("#MaritalStatusDate") dates based on the date selected in $("#BirthDate"). I am using the onSelect event in BirthDate to identify the selected date and I'm storing the value in a variable which is globally declared. Using the variable I have set the minDate in $("#MaritalStatusDate"). But the dates are not getting disabled based on minDate value. Do I need to change the date format while assigning the value to the variable? Can anyone please help me in doing this?
You can simply set the minDate for $('#MaritalStatusDate') in onSelect event.
$("#BirthDate").datepicker({
...
onSelect: function(dateText, inst) {
$('#MaritalStatusDate').datepicker('option', 'minDate', dateText);
}
});
See this in action: http://jsfiddle.net/william/2q7TN/.
I cannot figure out how I can retrieve a given Data item in a store (id-number) to send it to the "setActiveItem" method in a listener:
So I have a store - model:
Ext.regModel('PictureItem', {
fields: ['id', 'titel', 'url']
});
var pictureItems = new Ext.data.Store({
model: 'PictureItem',
data: [
{id:1, titel:'page 1', url:'http://placekitten.com/1024/768'},
{id:2, titel:'page 2', url:'http://placekitten.com/1024/768'},
{id:3, titel:'page 3', url:'http://placekitten.com/1024/768'},
]
});
Here is my menuList called "leftList":
var leftList = new Ext.List({
dock: 'left',
id:'list1',
width: 135,
overlay: true,
itemTpl: '{titel}',
singleSelect: true,
defaults: {
cls: 'pic'
},
store: pictureItems,
listeners:{
selectionchange: function (model, records) {
if (records[0]) {
Ext.getCmp('karte').setActiveItem(!!!Here the number of the selected Item
or respondend "id" in the data store!!!);
}
}
}
});
and the carousel....
var carousel = new Ext.Carousel({
id: 'karte',
defaults: {
cls: 'card'
},
items: [{
scroll: 'vertical',
title: 'Tab 1',
html: '<img class="orientation" alt="" src="img_winkel/titel_v.jpg">'
},
If I call
Ext.getCmp('karte').setActiveItem(2);
it works with the called card - but how can I get the number from the id of the selected item in the menu List /store????
By the way: what does mean:
if (records[0]) {
why [0]?
I FOUND THE ANSWER FOR MYSELF - IT'S EASY:
Ext.getCmp('karte').setActiveItem(records[0].get('id'), {type: 'slide', direction: 'left'});
The secret to get the record-entry is ".get()":
records[0].get('arrayfield')
So now I can change the activeItem in the carousel easely...