I'm using the ng-pick-datetime picker for my application. I want the selected time to show in 24hr (15:00 instead of 3:00 pm). When the picker opens the time is displayed in the picker correctly, but once selected it changes it to 12hr time format. Is there a way to set the selected time to show in 24 hour time instead of 12 hour?
Here is a link to the picker I'm using:
ng-pick-datetime
Put hour12: false to custom format, and just working see code below:
export const MY_NATIVE_FORMATS = {
fullPickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: false},
datePickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour12: false},
timePickerInput: {hour: 'numeric', minute: 'numeric', hour12: false},
monthYearLabel: {year: 'numeric', month: 'short'},
dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
monthYearA11yLabel: {year: 'numeric', month: 'long'},
};
#NgModule({
providers: [
{provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS},
]
})
I know this was posted too long, but here is my solution. It's more of a hack as I found that it's not possible to change the format directly.
So I created another input field which will show the time in 24-hour format, while the original input which will have the functionality to open the time picker will not be visible.
HTML:
<div class="position-relative time-parent">
<input type="text" class="form-control original-time-field"
placeholder="Eg: 06:55 (24-Hour)"
name="timeOriginal"
[(ngModel)]="timeOrig"
[readonly]="true" />
<input type="text" class="form-control picker-time-field"
name="depTime" #depTime="ngModel"
[(ngModel)]="timeObj"
[owlDateTime]="dtdp"
[owlDateTimeTrigger]="dtdp"
(dateTimeChange)="onTimeChange($event)"
[readonly]="true"
required />
<owl-date-time #dtdp [pickerType]="'timer'" [hour12Timer]="false"></owl-date-time>
</div>
CSS(Note: below is SASS) :
.time-parent {
.original-time-field,
.picker-time-field {
position: absolute;
top: 0;
left: 0;
}
.original-time-field {
z-index: 2;
}
.picker-time-field {
z-index: 3;
opacity: 0;
}
}
JS :
onTimeChange(evnt) {
this.timeOrig = evnt.value.getHours() + ':' + evnt.value.getMinutes();
}
This worked fine for me, as this gives you flexibility to show time as you like.
Related
Tabulator does not accept header color change
Through the css below, I'm trying to change the header color of all my columns, but I'm not getting this adjustment
tried to do it this way but it's not going.
I use vue3 + vite + tabulator 5.4
<style scoped>
.tabulator {
font-size: 12px;
width: 100%;
}
.tabulator .tabulator-header,
.tabulator-col .headerBackgroundColor {
background-color: #acacac;
}
</style>
this is my tabulator
tabulator.value = new Tabulator('#tabulator', {
data: dataRelatorio.value,
layout: 'fitColumns',
autoResize: true,
pagination: 'local',
paginationSize: 20,
rowHeight: 25,
paginationSizeSelector: [10, 20, 30, 50, 100, 200, 500, 1000],
movableColumns: true,
paginationCounter: 'rows',
responsiveLayout: 'hide',
placeholder: 'No record found',
locale: 'pt-BR',
langs: {
'pt-BR': {
pagination: {
page_title: 'Show page',
first: 'First',
first_title: 'First page',
last: 'Next',
last_title: 'Next page',
prev: 'Previous',
prev_title: 'Previous page',
next: 'Next',
next_title: 'Next Page',
all: 'All',
},
},
},
columns: columns,
rowFormatter: function (row) {
//console.log(row.getData());
if (row.getData().in_delayed === 'delayed') {
const children = row.getElement().childNodes;
children.forEach((child) => {
child.style.backgroundColor = '#FFFACD';
});
}
},
});
This should work:
<style>
.tabulator .tabulator-header .tabulator-col {
background-color: #acacac;
}
</style>
Notes:
I didn't use the scoped directive on <style> tag.
you can have more than one <style> tag in a component, some scoped and some regular. The regular ones are "normal" CSS, they apply to the entire DOM.
you can also apply the above styles inside a scoped style tag. The selector would most likely be .tabulator :deep(.tabulator-header .tabulator-col), but I can't know for sure until you provide a runnable minimal example, so I could inspect it.
I am trying to use WeekCalendar from react-native-calendars package. I am able to view the WeekCalendar and scroll it. However, I want that on horizontal scroll - the currentDate should be updated to date in that current week and should be updated on the UI. How do I go about this?
I was able to find a solution for onclick but I want on scrolling the current date should be a date from that current week.
<WeekCalendar
firstDay={1}
current={selectedDateOfTheWeek}
onDayPress={(day, localDay) => {
changeSelectedDateFromCalendar(day.dateString, false);
}}
hideExtraDays={false}
pastScrollRange={24}
futureScrollRange={24}
markedDates={{
[selectedDateOfTheWeek]: {
selected: true,
selectedColor: "#8660ce"
}
}}
/>
selectedDateOfTheWeek stores the date in 'YYYY-MM-DD' format. I am using Redux to manage the state.
wrap your week calendar with <CalendarProvide and use onDateChanged event
<CalendarProvider
date={this.state.selectedDate.dateString}
onDateChanged={this.onDateChanged}
markedDates={{
...this.state.markedDates,
[this.state.selectedDate.dateString]: {
selected: true,
},
}}
>
<WeekCalendar
testID={testIDs.weekCalendar.CONTAINER}
hideDayNames={true}
firstDay={1}
dayComponent={this.renderDateWeek}
theme={calendarThemes}
calendarWidth={screenWidth}
allowShadow={false}
markedDates={{
...this.state.markedDates,
[this.state.selectedDate.dateString]: {
selected: true,
},
}}
pastScrollRange={(new Date().getFullYear() - 1900) * 12}
futureScrollRange={(2099 - new Date().getFullYear()) * 12}
style={[styles.calendar, { paddingBottom: 20, paddingLeft: 0, paddingRight: 0 }]}
onDayPress={(date) => this.changeDate(date.dateString)}
/>
</CalendarProvider>
will post my question here since the vue.js forum seems dead and can't get slack confirmation email.
I recently started coding with .vue and have a question.
After I select a time using timepicker, I would like to have the hour and minute into a variable. (one or multiple, not sure yet)
Right now I get this "Sun Dec 31 1899 07:25:00 GMT-0500 (EST)"
I thought I could do
console.log(this.hour);
console.log(this.minute);
console.log(this.hour + ":" + this.minute);
the code his here
https://play.nativescript.org/?template=play-vue&id=pFJlwX&v=4
<template>
<Page>
<ActionBar title="Time Picker" />
<ScrollView>
<StackLayout class="home-panel">
<TimePicker v-model="yourTimeValue" #timeChange="onHour" :hour="8" :minute="currentMinute" minuteInterval="5" />
<TextField v-model="textFieldValue" hint="Enter text..." #returnPress=" onHour" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
data() {
return {
currentMinute: new Date().getMinutes(),
textFieldValue: ""
};
},
methods: {
// when you release your finger from the timepicker, you end up in this function
onHour: function(args) {
console.log(this.yourTimeValue); // returns something like this Sun Dec 31 1899 07:25:00 GMT-0500 (EST)
console.log(this.textFieldValue); // this return the text you wrote in the text field
}
}
};
</script>
<style scoped>
.home-panel {
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label {
margin-bottom: 15;
}
</style>
Thank you
v-model can hold only one value so it's Date which includes the Time (hour & minutes).
You can always parse the hour and minutes from the date object,
console.log(this.yourTimeValue.getHours() + ":" + this.yourTimeValue.getMinutes());
Im trying to use the react-big-calendar package. http://intljusticemission.github.io/react-big-calendar/examples/index.html
I have the calendar displaying on the page. The pagination is working and I have no errors in my console. However none of my events are showing. Do I have a syntax / format error somewhere?
import React from 'react';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
BigCalendar.momentLocalizer(moment); // or globalizeLocalizer
const Calendar = props => {
const dummyEvents = [
{
allDay: false,
end: new Date('December 10, 2017 11:13:00'),
start: new Date('December 09, 2017 11:13:00'),
title: 'hi',
},
{
allDay: true,
end: new Date('December 09, 2017 11:13:00'),
start: new Date('December 09, 2017 11:13:00'),
title: 'All Day Event',
},
];
return (
<div>
<BigCalendar
events={dummyEvents}
startAccessor="startDate"
endAccessor="endDate"
/>
</div>
)
}
Must add height for calendar container element.
If you do not add height for calendar container, calendar won't be visible.
Must read the doc for react-big-calendar: https://github.com/intljusticemission/react-big-calendar
.rbc-calendar {
min-height: 500px ;
}
<div className="rbc-calendar">
<BigCalendar
events={dummyEvents}
startAccessor="startDate"
endAccessor="endDate"
/>
</div>
You need to set a height or min height on the calendar:
.rbc-calendar {
min-height: 600px;
}
const dummyEvents = [
{
allDay: false,
end: new Date('December 09, 2017 20:00:00'),
start: new Date('December 09, 2017 06:00:00'),
title: 'hi',
}
]
When you create the BigCalendar component you specify
startAccessor="startDate"
endAccessor="endDate"
This tells BigCalendar to look for startDate= and endDate= instead of start= and end= in your event objects. Change your event array to this and it should work fine:
const dummyEvents = [
{
allDay: false,
endDate: new Date('December 10, 2017 11:13:00'),
startDate: new Date('December 09, 2017 11:13:00'),
title: 'hi',
},
{
allDay: true,
endDate: new Date('December 09, 2017 11:13:00'),
startDate: new Date('December 09, 2017 11:13:00'),
title: 'All Day Event',
},
];
You've set start and end key in dummydata but you're accessing startDate and endDate.
<BigCalendar
events={dummyEvents}
startAccessor='start'
endAccessor='end' />
Here is a screen: draw error.
My problem is that the single events are drawed over 2 days.
If I click on week mode the events are drawed, on day mode not.
If I click on previous/ next the calendar return "Cannot read property 'event' of undefined" and the existing events disappear.
When I click on empty day, fullcalendar sometimes return "Cannot set property 'el' of undefined".
Here is some source.
Include:
- jQuery.js
- bootstrap.js /css
- moment.js
- fullcalendar.js /css
<div id='calendar'></div>
<script>
$(window).load(function() {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
locale: 'de',
selectable: true,
selectHelper: true,
editable: true,
allDaySlot: false,
allDayDefault: false,
eventOverlap: false,
events: "./kalender/events.php",
});
});
</script>
events.php return an json array.
[{"start":"2017-02-03T12:00:00+0100","id":7,"titel":"test","nachricht":"nachricht","overlap":false,"color":"rgb(255,0,0)"},{"start":"2017-02-05T12:00:00+0100","id":8,"titel":"Bf1 Key","nachricht":"test","overlap":false,"color":"rgb(255,0,0)"},{"start":"2017-02-10T00:00:00+0100","id":9,"titel":"asd","nachricht":"asdasd","overlap":false,"color":"rgb(255,0,0)"},{"start":"2017-02-17T00:00:00+0100","id":10,"titel":"sdf","nachricht":"sdf","overlap":false,"color":"rgb(255,0,0)"}]
Thanks.