I have a datefield xtype mentioned in my grid's date column editor, once I select any date from the picker, as long as I don't click outside or press Enter, the date is displayed in the default format i.e. 'd/m/Y' (meaning dd/mm/YYYY). But as soon as I click outside of the cell or press enter it changes to an entire date containing the timestamp as well. How do I not let this happen? I want to keep it in d/m/Y format and don't want time or day to be displayed.
Here is an example of what it becomes once I press enter.
Tue May 28 2013 00:00:00 GMT +0530 (India Standard Time)
I want it to be
28/05/2013 or Tue 28/05/2013
How to do this?
My configuration for the column is given below
editor: {
xtype: 'datefield',
anchor: '100%',
format: 'd/m/Y',
submitFormat: 'd/m/Y',
minValue: new Date()
}
1 Define the date field in your model -
{name: 'date', type: 'date', dateFormat: 'Y/m/d'}
2 Use the following in columns config of the grid, in which you are using the date picker -
{header: 'Date', xtype:'datecolumn', width: 200, dataIndex:'date', editor:{xtype: 'datefield', format:'Y/m/d', allowBlank:'fasle'}}
Please refer below code and let me know whether it works!
editor: {
xtype: 'datefield',
anchor: '100%',
format: 'd/m/Y',
submitFormat: 'd/m/Y',
minValue: new Date(),
listeners : {
render : function(datefield) {
// code to convert GMT String to date object
datefield.setValue(new Date());
}
}
}
Thanks
When you use a date field, it sets a date type on the model.
Use a renderer on the grid cell (assumes the field is of type date):
{
xtype: 'datecolumn',
dataIndex: 'myDate',
text: 'Date',
format: 'Y-m-d'
}
Related
How can I add a negative date to the timeline?
My current code is:
let items = new vis.DataSet([
{id: 1, content: 'today', start: '2018-11-02'}
])
new vis.Timeline(document.getElementById('timeline'), items, {})
To add an event to the timeline, I just add it to items:
items.add({id: 2 content: 'tomorrow', start: '2018-11-03'})
If I zoom the timeline out I see that it shows dates before year 1. How can I add an event to a negative date, without needing to drag the event?
I dont know if it works on your lay out, but i use timestamps (if you import timestamps from php you should add 3 0's to the end as php use seconds and js use miliseconds )
but that works for me.
alternative what happens if you add this
items.add({id: 3 content: 'past', start: '2018-10-03'})
would that not show the item before current time ?
I got it!
new Date(-2018, 11, 26)
This will produce a negative date.
I want to set the background color of the active date. The default value is blue and I want to set it green. Any idea how I can achieve that?
I use the datepicker below:
Library
This is my code:
html:
<ng-datepicker [options]=option [(ngModel)]="date"></ng-datepicker>
ts:
this.option = {
minYear: 1970,
maxYear: 2050,
displayFormat: 'MM.DD.YYYY',
barTitleFormat: 'MMMM YYYY',
dayNamesFormat: 'dd',
firstCalendarDay: 1, // 0 - Sunday, 1 - Monday
locale: deLocale,
//minDate: new Date(Date.now()), // Minimal selectable date
//maxDate: new Date(Date.now()), // Maximal selectable date
barTitleIfEmpty: 'Wähle ein Datum aus',
placeholder: 'Wähle ein Datum aus', // HTML input placeholder attribute (default: '')
addStyle: {
}, // Optional, value to pass to [ngStyle] on the input field
fieldId: 'my-date-picker', // ID to assign to the input field. Defaults to datepicker-<counter>
useEmptyBarTitle: false, // Defaults to true. If set to false then barTitleIfEmpty will be disregarded and a date will always be shown
};
Adding the following to your component's CSS would make the current day have a green background
span.day-unit.is-today.is-selected {
background-color: green !important;
}
I am using fullcalendar and I have trouble to give the 2 view buttons I use in the header a unique name. Both Timelineday and agendaDay view give me the default value "Day" and that is confusing.
If I use buttonText property as mentioned here: http://fullcalendar.io/docs/text/buttonText/ to change the buttons, I can only rename both buttons at the same time and not just one.
Who knows the solution?
To assign a custom name to a button you place your buttons on the header and then with that name you assign them with buttonText.
header: {
left: "month,agendaWeek,agendaDay today prev,next",
center: "title"
},
buttonText: {
agendaWeek: "Custom Agenda Week Title"
}
When using isRTL : true
shouldn't the week and day view - hours column - display on the right side ?
i'm using it like that
$(document).ready(function () {
flag = !1;
$("#Xcalendar").fullCalendar({
theme: !0,
isRTL : true,
header: { left: "next,prev today", center: "title", right: "month,agendaWeek,agendaDay" },
I'm using version 1.5
I have tested in my calendar and the month view is displayed Rigt to Left but the week and day view are displayed in the default way LTR...
I am using the 1.6 version, so i guess its suposed to be like that...
Hi I was just wondering if there's a way to make the "title, start, end" invisible on the calendar for an event. Reason so is I would like to implement the qtip to show these information when they hover over the event. I'm using the most updated version of fullcalendar which is from this file: "fullcalendar-1.4.6.zip" with C# as serverside and jQuery as clientside. Thank you all for looking.
I have a very similar requirement (show tooltip on hover) and i had to remove the start and end time from the event's header. I have done it as below. The magic gets done by the timeFormat: {....} option block ():
timeFormat: {
// for agendaWeek and agendaDay do not display time in title
// time already displayed in the views
agenda: '',
// for all other views (19:00 - 20:30)
'': 'H:mm{ - H:mm}'
},
Note that I am using agenda views, and I remove the time components only for the week and the day views.
NOTE: As per my requirements, I did not have to remove the event-title. Question to you.... what would you display as the event header, if not the time AND the title? Would an empty header look a bit odd? Anyways.... let me know if you have any further issues.
Sample screen shot link: alt text http://img441.imageshack.us/img441/9587/calendarview.jpg.
A sample snippet of what options I had used:
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
timeFormat: {
// for agendaWeek and agendaDay do not display time in title
// time already displayed in the view
agenda: '',
// for all other views (19:00 - 20:30)
'': 'H:mm{ - H:mm}'
},
columnFormat: {
month: 'dddd', // Monday
week: 'dddd, MMM dS', // Monday, July 13th
day: 'dddd, MMM dS' // Monday, July 13th
},
axisFormat: 'H:mm',
allDaySlot: false,
slotMinutes: 30,
defaultEventMinutes: 22,
editable: false,
aspectRatio: 2,
});
});