I am trying to set the date to date picker but not able to set the date.
bellow is my chunk of sencha touch code.
this.scheduledDatePicker = Ext.create('Ext.field.DatePicker', {
//label: 'To',
//labelAlign: 'right',
//cls: 'form-block',
value: new Date(),
flex: 2.6,
});
and I am setting value after page load or get values from the database as using below code. I tried this many was as you can see commented code. but cant able to set this value.
var date= Ext.Date.format(Ext.Date.parse(this.rec.get('bookingDateTime'), "Y-m-d H:i:s"), "d/m/Y");
//var date= Ext.Date.parse(this.rec.get('bookingDateTime'));
//var date= this.rec.get('bookingDateTime');
this.scheduledDatePicker.setValue(date);
can anyone tell me why my code is not working or any solution for this issue?
A datefield accepts a javascript date, however it seems you don't provide one.
You should check what this.rec.get('bookingDateTime') returns, and how to modify that field in such a way that you get a javascript date.
I expect that you already have a model, where you could specify that field to be of type date with a certain date format:
Ext.define('MyModel', {
fields: [{
name: 'bookingDateTime',
type: 'date',
dateFormat: 'Y-m-d H:i:s' // specify format that is received from the server
}]
});
Then ExtJS will do the conversion for you and you could just use setValue without any parsing:
this.scheduledDatePicker.setValue(this.rec.get('bookingDateTime'));
If you don't have a model already, you can still read the string from bookingDateTime and parse it now and then and put it into the picker:
var date= Ext.Date.parse(this.rec.get('bookingDateTime'), "Y-m-d H:i:s");
console.log(date); // <- if date is null, format is not specified correctly.
this.scheduledDatePicker.setValue(date);
In both cases, console logging the interim result can help pinpoint down the issue: most of the time, the "parsed date" is null, because the format string does not match the date format received from the server.
Related
I'm using React running Tabulator 0.18.1. I have a timestamp formatted in ISO 8601 (ex. 2022-05-08T03:24:19.991+00:00) that I'd like to be converted into mm/dd/yyyy.
This is what I'm doing to set up the column data and formatter:
var columns = [
{
title: "Last Seen", field: "attributes.lastSeen", width: 200, formatter: "datetime", formatterParams: {
inputFormat: "iso",
outputFormat: "mm/dd/yyyy",
invalidPlaceholder: "(invalid date)",
timezone: "America/Los_Angeles",
}
}
]
My problem is that Tabulator prints (invalid date) in the table, instead of the converted date. I have luxon 2.3.2 installed, and am getting no errors regarding that, just the invalid date. I'm actually not getting any errors in the console at all, so I'm having trouble diagnosing this. I've tried looking for other possible inputFormats that might work, but I've yet to find anything.
Any recommendations on how to get this ISO time converted to mm/dd/yyyy? Hopefully I covered everything, but if any additional detail is need, just ask. Thank you all very much!
I'm assuming that the type of lastSeen is ISO string in your input data.
Working Demo: https://codesandbox.io/s/valid-date-from-iso-f06hc2?file=/components/Home.js
I used a fake data for the above demo which you can find in data.js inside components folder.
Hope it helps!
There is date type field, for example:
{
label: 'Created at',
field: 'creationDateF',
type: 'date',
inputFormat: 'DD-MM-YYYY HH:mm:ss', //e.g. 07-09-2017 19:16:25
outputFormat: 'DD-MM-YYYY HH:mm:ss'
}
How should I set this if my input format looks like:
2019-02-26T02:11:56.308466-08:00
? Excepted output is for example Feb. 21, 2019, 2:44 a.m. I can handle this but I don't know how to set up input format.
I hope you found the answer since those 2 years but for people still looking here is the correct format syntax to use:
dateInputFormat: 'yyyy-MM-dd\'T\'HH:mm:ss.SSSSSSXXX',
or
dateInputFormat: 'yyyy-MM-dd\'T\'HH:mm:ss.SSSSSSxxx',
depending if the indicator "Z" is used when time offset is 0 (first case) or not (second case)
vue-good-table uses 'date-fns' for converting Date. you can find its code here.
I've tried similar code:
var dateFns = require("date-fns")
var v='2019-02-26T02:11:56.308466-08:00';
var dateInputFormat='MMM. DD, YYYY, hh:mm a.';// you can write every thing as format string here
var dateOutputFormat='MMM. DD, YYYY, hh:mm a.';
const date = dateFns.parse(v, dateInputFormat, new Date());
Con dateFns.format(date, dateOutputFormat);
it worked correctly. test your self here
since your input format is ISO compatible, you should not worry about input format. It works Even if you put wrong input Format in definition part...
note: java script date just have 3 digit after second part so your input count as 2019-02-26T02:11:56.308-08:00 and 0.000466 will be omitted..
note: The displayed value is converted to your local time zone.
1st attempt, did this:
{{ leads.pgDate | date:'MM/dd/yyyy' }}
I've also tried:
" | date:"MM/dd/yyyy": 'UTC' "
2nd attempt, went to leadsCtr.js and found
$scope.leadsGridOptions = {
columnDefs: [
{
field: 'expected',
displayName: 'Expected Close Date', width: 150, type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\''
}
]
}
Added 'type:''date'' and changed cellFilter from \'sort\'
Observations:
displayName: 'Expected Close Date' BUT
the date header in HTML is 'Date of Purchase' - that's why the 2nd attempt didn't work. Also, cellFilter is being overridden, that addition didn't alter anything either.
{{leads.pgDate.toString()}}
adding toString didn't change anything- Maybe date is a string?!
New Problem:
Cannot find the object that ng-repeat is using to populate the fields to see if the date really is a string and I can parse it.
Questions:
If date is coming in as String, will the angular filter not work? Is there anyway to override {{inside the HTML}} ?
Answer:
Used Jimbrooism's suggestion. The wrapper is converting the value back into a date format and the filter works.
Try This
{{convertDate(leads.pgDate) | date:'dd/MMM/yyyy'}}
//JS
$scope.convertDate = function convertDate(date){
return new Date(date);
};
if you getting date as a string yyyy-mm-dd then convert this into java script date obj.
After convert it into date obj it is easy to convert into any format.
for mm-dd-yyyy format see this link
How to get current formatted date dd/mm/yyyy in Javascript and append it to an input
I suggest to use moment and angular moment for date related stuff.
In the controller:
$scope.date = moment(<date>, 'YYYY/MM/DD');
In the view:
<p data-ng-bind="date | amDateFormat : 'MM/DD/YYYY'"></p>
I have a date field which contains data coming in from the database as 2015/07/31 13:01:53.180z.
Datetime is stored in UTC on database.
My code looks like this:
var startDateTime = Ext.util.Format.date(StartDateTime, 'm/d/y g:i:s A');
But the output I get is the conversion of UTC to IST(Indian).I checked on Chrome,Mozilla and IE.
I got same output all the time
Does ExtJs does this? Because I haven't wrriten any method for conversion.
I use ExtJs 4.1.1
I would appreciate any help on this.
Timezone is appended in the string->JS Date conversion.
To parse the date from database without timezone conversion you should use the Ext.Date.parse explicitly, not automatically through model field type 'date' or simply JS constructor new Date().
For example:
var db_date = '2015/07/31 13:01:53.180z',
js_date = Ext.Date.parse(db_date.substring(0,db_date.length-5), 'Y/m/d H:i:s'),
date_to_show = Ext.util.Format.date(js_date, 'm/d/y g:i:s A');
Obviously "substring" must be replaced by something better, for example you could format db date (cutting timezone part) in the web service serialization.
If you achieve to clean the date string in the web service you can also add "dateFormat" attribute to model fields to parse date correctly into models.
I'm using jquery-ui datepicker on a User DOB field in a Rails 3.2 app.
I'm trying to achieve the following:
restrict the range of dates that can be selected, max = today, min = 100 years ago.
initialize the datepicker with the date currently stored in the database (if any).
display the selected date in a particular format in the dob text field.
My form looks like this:
<%= form_for #user do |f| %>
<%= f.text_field :dob, :class=>'date-selector-dob', :value => (#user.dob.blank? ? '' : #user.dob.to_s(:long)) %>
<% end %>
where .to_s(:long) is the display format I'm after.
With the following javascript the datepicker works, the text field is properly formatted, but no max/ min date is set, and no initialization with the stored date occurs.
$(function (){ // enabledate picker
$('.date-selector-dob').datepicker();
});
I added to this functions that I though would set min/max range and initialize, as follows:
$(function (){ // enable date picker
$('.date-selector-dob').datepicker({minDate: new Date('-100Y'), maxDate: new Date('-1D')}); // enable datepicker and set range
$('.date-selector-dob').datepicker('setDate', new Date($('.date-selector-dob').attr('value'))); // initialize datepicker with stored value
});
This is initializing the date picker correctly, but is not setting a min/max range. Is my approach incorrect?
In addition, the extended function resets my formatting string, and data is not displayed according to .to_s(:long). Using the basic function above, this formatting string is properly applied. What would cause this?
I'm pulling my hair out with this! I'd really appreciate it if someone can help me see whatever is it I've missed, and understand what I'm doing wrong. Thanks!
JavaScript's Date doesn't know what -100Y or -1D mean so your minDate and maxDate settings aren't going to be anything that the datepicker will understand.
From the fine manual:
minDate
Set a minimum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'), or null for no limit.
So you want this:
$('.date-selector-dob').datepicker({
minDate: '-100y',
maxDate: '-1d'
});
Demo: http://jsfiddle.net/ambiguous/RQgCW/
If you want the datepicker to use a certain format for the date, use the dateFormat option:
The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the formatDate function.
Also, you should be able to skip this:
$('.date-selector-dob').datepicker('setDate', new Date($('.date-selector-dob').attr('value')))
and just set the <input>'s value attribute to the date (preferably in ISO 8601 format), then the datepicker should be able to take it from there on its own.
At the time of initialize datepicker object we need to pass all our conditions as a hash. In your example you datepicker initialized for second time, that's the problem for not getting date range.
$(function (){
$('.date-selector-dob').datepicker({
dateFormat: 'M dd, yyyy',
minDate: '-1y',
maxDate: '+1m',
});
});
You can set the date by following way, for this you need to specify correct date format(already specified in initializer param as 'dateFormat')
$('#popupDatepicker').val("Feb 13, 2012");