I am using Bootstrap Datepicker in Angular 4, I want to set current date as default in Text Box, here is my code:
// COMPONENT CODE
$('#submission_date').datepicker({
autoclose: false,
format: 'yyyy-mm-dd'
})
HTML code:
<input type="text" formControlName="submission_date" ngModel="{{getAssignment.submission_date | date: 'yyyy-MM-dd'}}" id="submission_date">
NOTE: I am using Reactive Form.
You can use NgModel or formControlName.
For ngModel use :
const getAssignment.submission_date: NgbDateStruct = { year: 1789, month: 7, day: 14 }; // July, 14 1789
Or for formControlName use :
this.submission_date.setValue({ year: 1789, month: 7, day: 14 });
Related
I have used bootstrap thai date picker. when i select my year range it show beyond.
the below image shows the year range from 2560-2569, but my date picker years starts from 2553.i duno where i went wrong.
$("#datepicker").datepicker({
format:'dd/mm/yyyy',
endDate: '+0d',
autoclose: true,
todayHighlight:false
});
can i know what option will make this to work
Make sure your using the current version 1.6.4 as found at the following link
https://uxsolutions.github.io/bootstrap-datepicker/
And I didn't need to specify highlight today as false.
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
endDate: "+0d",
autoclose: true,
startDate: '+543y'
});
Hope this helps!
I'm using FC 2.0 and was searching for an option to localize 'AM' 'PM' text on the axis, which is being set with the option:
axisFormat: 'h(:mm) A',
is there a way to overwrite these values like we do for monthNames, dayNames etc?
Thanks in advance!
Edit:
This is how I'm localizing some other elements of full calendar:
('#calendar-wrapper').fullCalendar({
header: {
left: 'agendaDay,agendaWeek,month, today',
center: 'prev,title,next',
right: 'publish_info'
},
titleFormat: {
month: 'MMM YYYY',
agendaDay: 'dddd, MMM D YYYY',
agendaWeek: 'MMM D, YYYY',
},
columnFormat: {
week: 'ddd D'
},
axisFormat: 'h(:mm) A',
buttonText: {
day: I18n.t('day_button'),
week: I18n.t('week_button'),
month: I18n.t('month_button'),
today: I18n.t('today')
},
lang: I18n.locale,
monthNames: I18n.t('date.month_names'),
monthNamesShort: I18n.t('date.abbr_month_names'),
dayNames: I18n.t('date.day_names'),
dayNamesShort: I18n.t('date.abbr_day_names'),
...
// rest of the code..
The I18n.t('day_button') will contain the day text for selected language.
Likewise I'd like to set something like I18n.t('am') and I18n.t('pm') to show the localized AM PM text on the axis.
Thanks
I needed to override moments i18n meridiem function.
moment.lang(I18n.locale, {
meridiem : function (hours, minutes, isLower) {
return hours < 12 ? I18n.t('date.am') : I18n.t('date.pm');
}
});
// I18n.locale is the current user's local
// and specified calendar locale to
// lang: I18n.locale
// date.pm, date.pm are placed in rails yaml files and will be loaded for selected language
Thanks
I am using fullcalendar scheduler and trying to set timeformat on the timeline to be in 24:00 format not in 12am or pm format.
The default timeline view has 12am/pm format and the threeday timeline has an extra row on top for the day http://fullcalendar.io/scheduler/ .
I think that the columnformat could be the key here. but unfortunately when i use slotLabelFormat:'H:mm' to get the timeline show 24:00 format, the columns displaying the date disappear on the 3 day view.
Is this a bug or am i doing something wrong?
This is how it works correctly:
views: {
timelineThreeDays: {
type: 'timeline',
slotLabelFormat: [
'ddd D/M',
'H:mm'
],
columnFormat: 'ddd D.M',
duration: { days: 3 }
}
},
I would like to have a DateTime column in my Kendo UI grid. I've searched on forums, but I didn't find a solution for this problem.
My field for the TimeStamp column is defined such as:
TimeStamp: { type: "date" },
The records are showing data according to the format specified in the template. But I would like to be able to filter my data source with greater precision. However, currently my filter is only able to filter by date. Is there a way to filter by DateTime instead of filtering only by date?
I was informed that this is not possible currently with Kendo UI. I know this is bad news, but this is the answer to my question.
you can achieve it to use template on kendo grid column, create one more property and pass that property in template in kendo grid column.
like
timeStamp: { type: "date" },
timeStamp1: { type: "String" },
pass timestamp1 in template like
{
title: "Last Login",
width: 80,
template: '<span>#= timeStamp1#</span>',
field: "timeStamp",
type: "date"
},
its work fine according your requirement and sorting will work fine like database sorting.
Its Posible:
DeliveredDate: {
type: "datetime",
editable: false,
nullable: false
}
And the template is:
{
field: "DeliveredDate",
title: "Delivered Date",
template: '#= kendo.toString(data.DeliveredDate,"dd/MM/yyyy") === null ? "--/--/----" : kendo.toString(data.DeliveredDate,"dd/MM/yyyy HH:mm") + " Hrs" #',
width: 60,
groupable: false,
sortable: true,
filterable: true
}
The easiest Way to us the TimeStamp format data from your Database for KendoGrid.
In your HTML file, use the data from DB as shown.
<kendo-grid [data]="gridData">
<kendo-grid-column class="CreatedAt" field="CreatedAt" title="title"
[width]="120" [headerStyle]="{'background-color': '#36455a','color': '#fff'}"
[style]="{'background-color': '#36455a','color': '#fff'}">
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.CreatedAt | date:"yyyy/MM/dd HH:mm:ss"}}
</ng-template>
</kendo-grid-column>
</kendo-grid>
PS: gridData is my var that stores Data from DB. and CreatedAt is one of the fields.
how to define custom week range in Full Calendar. For example currently it is given 7 days week like 'Sun','Mon','Tue','Wed','Thu','Fri','Sat'. but i want to display 14 days week like 'SunA','MonA','TueA','WedA','ThuA','FriA','SatB','SunB','MonB','TueB','WedB','ThuB','FriB','SatB'.Is there any property by which i can set my week range days 14 without altering FullCalendar.js??
Apparently this is now possible with Custom Views:
http://fullcalendar.io/docs/views/Custom_Views/
If you'd like to take one of the existing view types, like "basic" or "agenda", but display it with a custom duration, like 4-days instead of the stock 1-week or 1-day, do something like the following:
$('#calendar').fullCalendar({
header: {
center: 'month,agendaFourDay' // buttons for switching between views
},
views: {
agendaFourDay: {
type: 'agenda',
duration: { days: 4 },
buttonText: '4 day'
}
}
});
sounds like this is the issue you'd want to follow (not yet implemented):
http://code.google.com/p/fullcalendar/issues/detail?id=692