Format Date and Time into DTG - javascript

I have a row where users enter in various type of data in the date in there are different formats that I want to standardize. For example
12/21/2014 1900
This is one possible format I would like for the <td> to change it into DTG format which is
DD-HHMMZ-MMM-YY
Day, Hours in 24 format, Minutes, instead of p.m./a.m. I need Z for zulu, Month and year
How do I have this change once the user enters the data? I was looking at the onchange for javascript but I am not completely sure.

I'm assuming what you're asking is how to force the input to update after the user enters the date information. I'm assuming you know how you're going to format the date based on the given input.
This example shows you how to use jquery's .change() to update the input after something is entered. http://jsfiddle.net/Z5B25/
The basic code looks like:
$('.date').change(function(){
$(this).val('Computed/formatted Date');
});
Though this is not specific to your usage.

Related

How to format user input time format in JavaScript?

I have user input field that accepts time value. Here is example of that value: 03:45:15.0 I would like to format this value with JavaScript to format the time like this: 03:35:15 PM. Is there a way to complete this with Vanilla JS?
Thank you.

is there a way i can group data by "Month" on tabulator js while having a full date?

I'm using tabulator js library. I know there is a group option where i can group through certain fields i have in my data. I have a field date of the format MM/DD/YYYY. I want to group the data in the table by month only not the full date. How can i achieve that? I have tried splitting the string date from my date on '/' and then taking the first part of it as the month. An error on .split('/') appeared plus if it were to work, I did not know how to continue from there. Any ideas of how to achieve this?
You will need moment.js and then you can do something like:
groupBy: function(data){
return moment(data.dob, "MM/DD/YYYY").startOf("month").format("MMM-YYYY");}
Where you specify the input data format("MM/DD/YYYY"), then normalize those dates to the start of the month(startOf("month") and then return as abbreviated month name with year(format("MMM-YYYY")). You could change ```.format("MMM-YYYY") to what suits.
For demo see fiddle

Time series in panda

How do I convert a date index into Time-based indexing?
so that i can later generate a month, weekday and a year
I tried this code
df['TRANS_DATE'] = pd.to_datetime(df['TRANS_DATE'], format='%m/%d/%Y %H:%M:%S')
but after I change it to Index the date revert back to show as object
What happens if you leave out the format option (letting it run to Default)? Also, it would be best if you show your original data.
Additional information -
https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.to_datetime.html

Having trouble wrapping my head around how to handle dates

I'm working on a scheduling system for music venues. The basic idea is that there's an "Create new schedule" page, on which there is a DatePicker calendar (using AngularUI Bootstrap). The user selects a Date, then adds performers into timeslots. The built object looks something like this:
{
date: 2017-6-22 00:00:00.000-5:00
venue: VenueID
performances: [
{
performer: performerID,
time: 2017-06-22 22:00:23.231-5:00
},{
perfomer: performer2ID,
time: 2017-06-22 23:00:42.523-5:00
}
]
}
There's a couple of problems here. For the original date selection, I set the time (using myDate.setHours(0,0,0,0)) to midnight because the time doesn't really matter, I only care about the actual date. Likewise for the timeslots, their date doesn't matter (since they belong to the schedule for that day), so I only care about the time. Then in another project, we have a node/mongo app that saves these schedules, and returns them to a page in the angular project that lets you select a schedule for editing/etc. It selects which ones to return by grabbing all the schedules for a specific venue, and doing "if (schedule.date >= new Date().setHours(0,0,0,0)) { add schedule to return list }"
Anyway, on to the actual problem. The angular app does all of the date calculations client side. What I mean is, I'm in CST. If I select a Date on the calendar and save a schedule for that date, then someone in EST selects the same day on the calendar and saves a schedule, they have different dates in the database. For example, when I make the schedule, the date in the DB is "2017-06-22 00:00:00.000-5:00". When the EST friend makes a schedule on the same date, it gets saved as "2017-06-22 00:00:00.000-4:00".
In the "Select a schedule to view/edit" page, I do something like this:
<select ng-model="schedule" ng-options="s.date|date:'fullDate' for s in schedules" ng-show="schedules.length>=1"></select>
Of course this doesn't work because when my EST friend looks at the list, he sees the correct date. But when I look at one that he created, the date is one day off because "2017-06-22 00:00:00.000-4:00" converted to local timezone is "2017-06-21 23:00:00.000-5:00".
I guess TL;DR is I'm not sure how to handle it since the venue and anyone creating/editing the schedules may not share the same time zone. I want all of the dates/times to show up in the timezone of the venue (which I have the address for. I guess I could geolocate to find timezone?). I'm just not sure how to go about it.
The DatePicker gives you a date object. Instead of storing the entire value string just grab the day month and year Date(value).getYear() + '-' + Date(value).getMonth() + '-' + Date(value).getDate(). As for the times do the same as the dates. Store those values in the DB and then when you get them back you will have to convert them back to a date object so that the date picker can understand them.
Ultimately with this solution your just trying to store dates without the timezones. Make sure to state in your app that the times are for those areas.
You have to distinguish between the format the date/time is transported, saved vs. how the date will be shown to the user.
For transportation and saving use UTC in a format that is easy computable (eg. ISO8601).
For visualization to the user convert this value to the timezone and desired user format by using some helper library.

Bootstrap datepicker setStartDate not working properly?

I am using Bootstrap datepicker and on selecting different values from a list its startdate is changing. It is working fine if I set the startdate 2013 from 2008 but it doesn't work if a select start date 2008 and currently its 2013.
What could be the reason here?
$('#datepicker').datepicker('setStartDate', updatedDate);
This line I am executing whenever I select different startDate.
Really need to know what updatedDate value is.
However, if you read the docs for the dtepicker the value passed in must be a string that is understandable by format
https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#setstartdate
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#startdate
Date or String. Default: Beginning of time
The earliest date that may be selected; all earlier dates will be
disabled.
Date should be in local timezone. String must be parsable with format.
So what you pass in as the format option must match the format of your start date. If you do not set the format optin, the default is "mm/dd/yyyy"
Without seeing code, I can only hypothesize; try calling [...].datepicker('update', 'date_string'); on the object to force an update on the control.

Categories

Resources