I am using a datepicker in titanium iOS to read date.
When I am trying to set a value to the date picker t wont work.It is always showing the maxDate.
What is the actual solution for this
//my sample code of picker is follows
var picker2 = Ti.UI.createPicker({
type: Ti.UI.PICKER_TYPE_DATE,
selectionIndicator: true,
minDate: new Date(moment().subtract(120, 'years')),
maxDate: new Date(moment().subtract(18, 'years')),
value: new Date(2014,3,12),
//value: navHistory == 'profilePage' && dateofbirth !=null ? dateofbirth : new Date(moment().subtract(18, 'years')),
top: Ti.Platform.displayCaps.platformHeight / 30,
});
The reason your current solution does not work is because your value is actually a date after your maxDate (hence it will set the value to maxDate). You need to use a date within minDate and maxDate as value for it to work.
For example:
var picker = Ti.UI.createPicker({
type: Ti.UI.PICKER_TYPE_DATE,
selectionIndicator: true,
minDate: new Date(moment().subtract(120, 'years')),
maxDate: new Date(moment().subtract(18, 'years')),
value: new Date(1990,3,12)
});
Related
I want to send my own operator in odata request and not use the aurelia slickgrid inbuilt "eq" operator.
This is my column definition
{
id: 'LockoutEndDateUtc', name: 'Status', field: 'LockoutEndDateUtc', minWidth: 85, maxWidth: 95,
type: FieldType.boolean,
sortable: true,
formatter: Formatters.multiple,
params: { formatters: [this.StatusFormatter, Formatters.checkmark] },
filterable: true,
filter: {
collection: [
{ value: 'le ' + (() => {const dt = new Date(); return dt.toISOString().split('.')[0] + "Z";})(), label: 'True' },
{ value: 'gt ' + (() => {const dt = new Date(); return dt.toISOString().split('.')[0] + "Z";})(), label: 'False' }
], //['', 'True', 'False'],
model: Filters.singleSelect,//multipleSelect//singleSelect,
}
}
This is the UI
This is how the request filter looks like..
$filter=(LockoutEndDateUtc%20eq%20le%202022-06-28T12%3A59%3A25Z)
If i remove %20eq from the above request, everything else works. So my question is how to i remove %20eq. Or how do i send my own gt, le in the request.
You can't really do that on a boolean filter (you could however do it on a date filter with operator) and I don't think I've added any ways to provide a custom filter search the way you want to do it, but since you're using OData, you have a bit more control and you could change the query string yourself. To be clear, it's not at all recommended to change the OData query string, it's a last solution trick and at your own risk, but for your use case it might be the only way to achieve what you want.
prepareGrid() {
this.gridOptions = {
// ...
backendServiceApi: {
service: new GridOdataService(),
process: (query) => this.getCustomerApiCall(query),
} as OdataServiceApi
};
}
}
getCustomerApiCall(query: string) {
let finalQuery = query;
// in your case, find the boolean value from the column and modify query
// your logic to modify the query string
// untested code, but it would probably look similar
if (query.includes('LockoutEndDateUtc%20eq%20true')) {
// calculate new date and replace boolean with new date
finalQuery = query.replace('LockoutEndDateUtc%20eq%20true', 'LockoutEndDateUtc%20le%202022-06-28T12%3A59%3A25Z');
}
return finalQuery;
}
Another possible solution but requires a bit more work.
If I'd be using a regular grid, without backend service and without access to the query string, I would probably add an external drop down outside of the grid and also add the date column and then control filters in the grid by using dynamic filtering. You can see a demo at Example 23, the principle is that you keep the column's real nature (date in your case) and filter it, if you want something like a "below today's date" then add an external way of filtering dynamically (a button or a drop down) and control the filter dynamically as shown below (from Example 23)
I have data with Date fields startDate and stopDate:
data: {
error: '',
config: {rate: 0.00, surcharge: 0.00, startDate: new Date(), stopDate: null, enabled: true},
configurations: []
},
Also I have input field:
<input id="startDate" type="date" v-model="config.startDate">
So while page creation I see warning in console:
vue.js:7629 The specified value "Tue Sep 17 2019 15:52:44 GMT+0700
(\u041A\u0440\u0430\u0441\u043D\u043E\u044F\u0440\u0441\u043A,
\u0441\u0442\u0430\u043D\u0434\u0430\u0440\u0442\u043D\u043E\u0435
\u0432\u0440\u0435\u043C\u044F)" does not conform to the required
format, "yyyy-MM-dd".
Also, input field has no date value just after page has loaded. Seems like initial Date value has not bound to input field.
What is the natural way to bind date value to input field?
thanks for your answers and best regards.
This is a working jsfiddle. I don't receive any error in console.log
HTML
<div id="date">
<p>
New Date: <input id="startDate" type="date" v-
model="config.startDate">
<span>{{config.startDate}}</span>
</p>
</div>
JS
var box = new Vue({
el:'#date',
data:{
config: {rate: 0.00, surcharge: 0.00, startDate: new Date(),
stopDate: null, enabled: true}}
});
https://jsfiddle.net/o6d1x9eb/
According VueJS documentation, v-model="config.startDate" is equals to v-bind:value="config.startDate" v-on:input="config.startDate = $event.target.value".
So, I have two ways:
Store in config variable of data value as String instead of Date and edit it by the input field. By the way, input field returns string value of date in yyyy-mm-dd format.
Use value as Date, filter (or function) to convert Date into String and function to convert String into Date.
So, the way I used is
for inpuut field:
<input id="startDate" type="date"
v-bind:value="config.startDate | inputDateFilter"
v-on:input="config.startDate = getDate($event.target.value)">
and for Vue instance:
filters: {
inputDateFilter: function (date) {
if (!date) {
return '';
}
date = new Date(date);
return date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2);
},
// . . .
methods: {
getDate(value) {
if (!value) {
return null;
}
return new Date(value);
},
// . . .
This is does what I want.
I've seen answers that use either, new Date() or moment() to declare minDate and been marked as the answer but in my case neither worked.
E.g. How to disable past dates from today in bootstrap datetimepicker?
The code is:
$('.datePicker').datetimepicker({
//format: "HH:ii P, dd M yyyy",
//format: 'YYYY-MM-DD',
//minDate: new Date(),
//minDate: moment(),
minuteStep: 1,
showMeridian: true,
todayBtn: true
});
Bootstrap v3.3.7 is being used and it looks like:
As you can see the dates prior to the 16th (today) aren't being disabled. Could this be due to my bootstrap version?
minDate is for eonasdan-datetimepicker, while tarruda's datetimepicker uses startDate:
Options
These are the default options for initializing the widget:
$.fn.datetimepicker.defaults = {
startDate: -Infinity, // set a minimum date
endDate: Infinity // set a maximum date
};
I feel should be easy but still does not work, "toDate.getValue();" does not return Ext.date object. I cannot format date.
Error: format is undefined.
Below is my form field.
var toDate = new Ext.form.DateField(
{
fieldLabel: "date"
value: new Date(), name: "abs-to-date",
width: 100,
allowBlank: false
}
And on submission of form, i want to format date.
var toDateTime = toDate.getValue();
console.log(toDate.getValue());
toDateTime.setHours( toHour.getValue(), toMinute.getValue(), 0 );
abs.to = toDateTime.format( Date.patterns.JSONdateTime ); <---------------------
There are 2 different date type in Extjs 4.
1) Date
2) Ext.Date
method "format" is available to Ext.date and toDateTime is object of Date.
following is right syntax.
abs.to = Ext.Date.format(toDateTime, Date.patterns.JSONdateTime );
You're missing a comma after 'fieldLabel'. Code should be:
var toDate = new Ext.form.DateField({
fieldLabel: "date", //<----------
value: new Date(),
name: "abs-to-date",
width: 100,
allowBlank: false
});
I have the following date picker
{
xtype: 'datefield',
id: 'FinalDespatchDate',
name: 'FinalDespatchDate',
fieldLabel: 'Part Despatch Date',
labelWidth: 150,
width: 370,
validateOnChange: false,
format: 'd/m/Y'
},
In my model i have
{
mapping:'FinalDespatchDate',
name:'FinalDespatchDate',
type: 'date',
dateFormat:'d/m/Y'
},
if in my model i don't include the dateFormat. The date binds to my date picker but it sends the date in an incorrect format. When i add dateFormat it sends the date in the correct format it just no longer binds to the datepicker. ie the above configuration display nothing in the date picker
Does your data come from server with properly formatted date value ('d/m/Y') in this (non-working) configuration?