I have a problem with sencha touch datepicker field. I want to set default (current date) in datepicker field but I am not able to find a way to do that. I am using sencha architect and there is no property exist to set default date in datepickerfield.
I am using the following code in value property of datepickerfield:
{
year: (new Date()).getFullYear(),
day: 1,
month: 5
}
But application stop working when using above code to display date.
Please tell me how to achieve this.
Checkout the 'value' property
http://docs.sencha.com/touch/2.2.1/#!/api/Ext.picker.Date-cfg-value
You'll want to add an initialize function to whatever class contains your datepicker.
Select that class.
Then add an initialize function from the config
panel.
Then add the following code to the initialize function:
var picker = this.down('datepicker');
picker.setConfig({
value: new Date()
});
this.callParent();
Of course if you have multiple datepickers you'll want to give it an item id and use this.down('#thedatepicker');
This can be done in the config of the container itself as follows:
xtype: 'datepickerfield',
value: new Date(),
picker: {
yearFrom: 2015,
yearTo: 2030
}
Related
I am using vuejs-datepicker and I set datepicker (calendar) to today date by default like this:
<datepicker v-model="theDate" format="yyyy-MM-dd"></datepicker>
<!--shows yesterday date in calendar instead of today. "format" needed to get right format.-->
...
data() {
return {
myDate: null
}
},
...
created() {
this.myDate = this.$moment().format("YYYY-MM-DD")
console.log(this.myDate) //gives me today date in right format but no shows the same
}
...
This must be very basic and simple thing. But I don't really get why it is showing yesterday date and how to fix it.
Update: this describes my issue: https://github.com/charliekassel/vuejs-datepicker/issues/23
Finally, I found one solution here https://github.com/charliekassel/vuejs-datepicker/issues/158.
I need a bootstrap datepicker where the start date and enddate must be customizable like start date is 01-01-1950 and end date is todate-18 years. Secondly wanted to show the dropdown year and month on the calendar topbar to use easily rather than the default bootstrap calendar.
For your reference have attached an image which 'm using now without bootstrap.
Any idea/link is appreciated.
you can not put dropdown but can achieve same functionality by another way with new bootstrap version.
check out this link http://www.malot.fr/bootstrap-datetimepicker/
<script>
$(document).ready(function() {
$('#date_deb').daterangepicker({locale: {format: 'DD/MM/YYYY'},
showDropdowns: true,
minDate: '01/01/2016',
singleDatePicker: true,
singleClasses: "picker_2"
}, function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});
});
</script>
Environment: Dojo.1.8.4
If the DateTextBox does not contain a valid date, I wish to start the calendar popup at a date in the past (it's a date of birth entry box). What is the best way of achieving this?
<div maxlength="12"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props="required: true, constraints:{min:'1880-01-01',
max: new Date()}, popupClass: 'dojox.widget.Calendar'">
</div>
I want to be able to put a 'startDate' parameter or similar in the above such that the constructor for the popup will pick it up and use it.
It looks as though the dojox.widget._CalendarBase sets the date to the current date in its constructor. (actually seems to set it in both the constructor and the declaration).
NOTE: If you are using the dijit/Calendar dropdown default then use the dropDownDefaultValue property as #vogomatix says in the other answer.
The following is if you are using the dojox/widget/Calendar for the dropdown.
By default the popup is set to the current value of the textbox and if null, it will use the current date.
You can do
1) set the value of the text box to what you want the default to be
OR
2) use aspects to set the value in the calendar when it is opened.
require([
'dojo/dom',
'dojo/aspect',
'dijit/form/DateTextBox',
'dojox/widget/Calendar'
], function(dom, aspect, DateTextBox, Calendar){
var dt = new DateTextBox({ popupClass: Calendar }, dom.byId('dtText'));
aspect.after(dt, 'openDropDown', function() {
// only default if there is no value
if(dt.get('value') == null) {
// Do not set the text box when changing value,
// so temporarily override the onchange function
var oldOnChange = dt.dropDown.onChange;
dt.dropDown.onChange = function(){};
dt.dropDown.set('value', new Date(1980, 7, 4)); // default to August 4th, 1980
dt.dropDown.onChange = oldOnChange;
}
});
});
See it in action:
http://jsfiddle.net/cswing/kQYhQ/
One solution is to set dropDownDefaultValue, which works with the standard calendar.
var dt = new DateTextBox({dropDownDefaultValue: new Date( 1950,1,1)},
dom.byId('dtText'));
dropDownDefaultValue gets passed to the calender in the form of currentFocus by the popup. Unfortunately dojox.widget.Calendar does not recognise currentFocus and the way round that is to either extend the class to do so, or to use the aspect method above.
This is how to extend the dojox.widget.Calendar in order to accept the currentFocus passed by the popup. Like the aspect method above, it temporarily disables onChange in order to prevent the value being placed in the parent DateTextBox
define([
"dojo/_base/declare",
"dojox/widget/Calendar"
], function(declare, calendar){
return declare("my.dijit.Calendar", [calendar], {
postCreate: function() {
this.inherited(arguments);
var oldOnChange = this.onChange;
this.onChange = function(){};
this.set('value', this.parseInitialValue( this.currentFocus));
this.onChange = oldOnChange;
}
});
});
i'm using the latest sencha touch release, but found a problem with the datepicker.
This works as expected:
var view=new Ext.field.DatePicker({label:"Test"});
But if I do it in this way:
var view = new Ext.field.DatePicker({
label: "Test",
picker: {
yearTo: "2020"
}
});
Nothing happens if I click on the datepicker-field. After some time the site even "crashs".
I'm using Chrome 26.0.1410.64 m for testing.
Is there maybe a bug within ST 2.2?
Using the new keyword is not the proper way to create a component in Sencha Touch 2.x
Use Ext.create:
var view = Ext.create('Ext.field.DatePicker', {
label: "Test",
picker: {
yearTo: 2020 // without the quotes
}
});
Hope this helps
I'm using Sencha Touch in one of my mobile projects. As one of the components of it I'm using the Picker. I know that the picker values are being got from the "data" attribute which is an array containing object like so:
[{"text":"One","value":1},{"text":"Two","value":2},{"text":"Three","value":3}]
However what I need to do is - fill the picker with values from an array which is being generated dynamically from a store. Could anybody help me with this, please?
Thanks.
Use Ext.Picker.Slot which allows you to add a Ext.data.Store to it. The store will enable you to get data from server and the Picker slots will be populated.
This is what given in Sencha docs:
A general picker class. Ext.picker.Slots are used to organize multiple
scrollable slots into a single picker. slots is the only necessary configuration.
The slots configuration with a few key values:
name: The name of the slot (will be the key when using
getValues in this Ext.picker.Picker)
title: The title of this slot (if useTitles is set to true)
data/store: The data or store to use for this slot.
Remember, Ext.picker.Slot class extends from Ext.dataview.DataView.
{
xtype:'picker',
width:'100%',
height:'100%',
id:'chooseLocationRoomListPicker',
baseCls:'pickerCls',
cancelButton: false,
doneButton: false,
toolbar:false,
slots : [{
name:'chooseLocationRoomListPickerList',
store: Ext.getStore('roomStore'),
displayField: 'level',
valueField: 'id',
align:'center',
value:'202'
}]
}