jQWidgets Forums

Tagged: calendar, date, filter, short names

This topic contains 2 replies, has 2 voices, and was last updated by gwjwin 11 years, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Calendar in Date Filter use the first 2-letter of the full day names Posts

March 28, 2014 at 5:51 am Calendar in Date Filter use the first 2-letter of the full day names #52116

gwjwin

Participant

Hello,

If I try to localize the string in Date Filter Chooser, The Calendar shows the first 2-letter of the full day names, not the namesShort setting. For example, if I using Japanese localize:

     
     var days = {
         // full day names
         names: ["日曜日", "月曜日", "火曜日", "火曜日", "水曜日", "金曜日", "土曜日"],
         // abbreviated day names
         namesAbbr: ["AA", "BB", "CC", "DD", "EE", "FF", "GG"],
         // shortest day names
         namesShort: ["日", "月", "火", "火", "水", "金", "土"]
     };

The Calendar doesn’t show “日”,”月”… , but “日曜”,”月曜”,… I have to change the full names, otherwise the fisrt 2-letter is too large to fit in a row, makes “Today”, “clear” button disappear. http://jsfiddle.net/gwjwin/tK2F7/
But the full names have its own purpose, if I change them, maybe makes incorrect otherwhere.
Is there a way to let Date Filter Chooser shows short names?
Thanks

March 28, 2014 at 6:45 am Calendar in Date Filter use the first 2-letter of the full day names #52117

Peter Stoev

Keymaster

Hi gwjwin,

You can use the “createfilterwidget” column callback function for modifying the filter widget.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example illustrates the Grid filtering feature. Enter some data into the Filter Row.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date'},
                    { name: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Name', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: 215 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                  {
                      text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 410, cellsalign: 'right', cellsformat: 'd',
                      createfilterwidget: function (column, element, widget) {
                          widget.jqxDateTimeInput({ dayNameFormat: "full", dropDownHeight: 550, dropDownWidth: 550 });
                      }
                  },
                  { text: 'Qty.', datafield: 'quantity', filtertype: 'number',  cellsalign: 'right' }
                ]
            });
            $('#clearfilteringbutton').jqxButton({ height: 25});
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton" type="button" />
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

March 28, 2014 at 7:25 am Calendar in Date Filter use the first 2-letter of the full day names #52119

gwjwin

Participant

Thanks Peter, It works. BTW using dayNameFormat:"shortest" .

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.