I'm using date range picker component for choosing date ranges. Does it support I18n?
How can I edit the calendar language into Traditional Chinese?
Here is an example snippet of configuration code:
// Set the date range picker
$('input[name="daterange-last-30-days"]').daterangepicker({
// Predefined Ranges
startDate: moment().subtract('days', 30),
endDate: moment(),
"applyClass": "btn-success",
"cancelClass": "btn-danger",
locale: {
format: 'YYYY/MM/DD',
// Language Setting
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
daysShort: ["日", "一", "二", "三", "四", "五", "六"]
}
});
Any advice or guidance would be greatly appreciated.
you can use this jquery plugin for chinese language support with date range picker.
check that link if it helps...
Related
I have a KendoGrid with a filterable European format date column with date operators for eq, gt, lt, gte, lte and I am trying to set it dynamically from JavaScript
columns:
{ field: "myDate", sortable: true, filterable: { ui: function(element) { element.kendoDatePicker({ format: "dd/MM/yyyy" }); } }, title: "my dte", width: "150px", minResizableWidth: "25", format: "{0:dd/MM/yyyy}" }
when I am trying to set the filter date dynamically like this:
filter.filters[0].value = '12/05/2019'
the dates are getting reversed to 05/12/2019 and if I try with dates where the first part which is supposed to be the day is bigger than 12 (ex: 13/12/2019), the filters are showing up empty.
The thing is that even if I reverse the date that I am passing with something like:
e=d.substr(0,5).split("/").reverse().join("/")+d.substr(5)
the filters WILL be shown in the filters fields, but they are not working.
DEMO link with instruction to reproduce: https://dojo.telerik.com/OGUgiGex
In your link, when the filter change you set the value of filters with a string like this :
"value":"10/15/2016" and "value":"12/19/2022"
You should use a Date like this :
"value":new Date("2019-10-15") and "value":new Date("2022-12-19")
You can use another way to construct the Date, the main point is to use Date instead of string in your filter setting.
I am using Kendo DatePicker inside KendoGrid using editor template (DD/MM/YYYY format), after changing the date via datepicker i see that its saving the data into grid modal with yyyy-MM-ddThh:mm:ss.SSS format instead of DD/MM/YYYY. I am getting String from server in required DD/MM/YYYY format and display wise is also good only exception is during change of date via DatePicker.
How can i convert the date into required DD/MM/YYYY format while selecting date via datepicker?
function dateEditor(container, options) {
$('<input name="'+options.field+'"data-text-field="'+options.field+'"data-value-field="'+options.field+'" data-bind="value:'+options.field+'" data-format="'+options.format+'"/>')
.appendTo(container)
.kendoDatePicker({
format: "MM/dd/yyyy",
parseFormats: ["MM/dd/yyyy", "MM/d/yyyy", "M/dd/yyyy", "M/d/yyyy"],
change: function() {
// If i try to override with MM/DD/YYYY format using below code and trigger
//change event it goes into a infinite loop, so cant use this.
//this.value(moment(this.value()).format('MM/DD/YYYY'))
//this.trigger('change');
}
});
}
Please note that that requirement is not to use parameterMap as i am sending the data to server via below call so it picks the data directly from Grid without translating.
JSON.stringify($('#grid').data("kendoGrid").dataSource.data())
Let me know if Jsfiddle can help the experts here ?
I'm searching for the possibility to change date format of kendo ui scheduler components' navigation bar. In the basic exmaple (click here) you can see the selected time range right next to "Today" button. I don't have so much space left in my website and therefore want to change date format to eg. "18.08.2014 - 24.08.2014".
Unfortunately I don't see any option to configure this in the official api reference...
Did I just overlook something or is it not possible to change settings for that?
Thanks for your help.
Philip
I ran into the same problem, I noticed with Chrome dev tools there is a span with class="k-lg-date-format" wich displays the date as you see it now, and a span with class="k-sm-date-format" that could display the date with the shorter MM/dd/yyyy format, but his display property is set to none. I created another stylesheet to change the display property of the first to none and the second to inline. Had to use !importan because it was overloaded by kendo stylesheet.
.k-sm-date-format {
display: inline !important;
}
.k-lg-date-format {
display: none !important;
}
It's configurable:
views: [
{
type: CustomAgenda,
title: "List",
selected: true,
selectedDateFormat: "{0:dddd dd MMMM yyyy} - {1:dddd dd MMMM yyyy}",
selectedShortDateFormat: "{0:dd/MM/yyyy} - {1:dd/MM/yyyy}"
}, {
type: "day",
selectedDateFormat: "{0:dddd dd MMMM yyyy}",
selectedShortDateFormat: "{0:dd/MM/yyyy}"
}, {
type: "month",
selectedDateFormat: "{0:MMMM yyyy}",
selectedShortDateFormat: "{0:MMMM yyyy}"
}
]
The short format is for crossing the low width responsive break point.
https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/views.selecteddateformat
I am using the Datepicker jquery plugin to select the date. When I select the date using the Datepicker, it is displaying using the the format "yy-mm-dd"
However, when I donot select the date, the date is displayed in the "dd/mm/yy"
I tried to change the dateformat in jquery-ui.js from
//dateFormat: "mm/dd/yy", // See format options on parseDate
dateFormat: "yy-mm-dd", // See format options on parseDate
Any idea, how to change the dateformat for display as well ?
2 possibilities:
1) Haven't initialized the dateFormat in your datepicker. So try
$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });
2) Might be handled by other methods(not sure)
Could any one please help me to restrict Sencha Touch datepicker not displaying / allowing future dates in the desired datepicker field.
Please
It can be implemented as follows,
{
xtype : 'datepickerfield',
label : 'date',
picker : {
yearFrom : 2000
}
}
I usually use an override for changes like this. Otherwise you need to change it for all date pickers across the app.
Ext.define('App.override.picker.Date', {
override: 'Ext.picker.Date',
config: {
yearFrom: 1970,
yearTo: 2070, // you can use a fixed number or: new Date().getFullYear() + 10,
monthText: 'Month',
dayText: 'Day',
yearText: 'Year',
slotOrder: ['month', 'day', 'year'],
doneButton: true
}
});
You can use the following configurations to restrict year input.
Ext.create('Ext.picker.Date', {
yearFrom: 2000,
yearTo : 2015,
//or you can use
minValue: new Date(1980,1,20),
maxValue: new Date()
});
Also check the setYearTo() and updateYearTo() methods.
The component doesn't allow to restrict actual month and day input but you can validate it afterwards.