How to set time range for datebox - jquery-mobile

I am trying to set a time range (e.g. from 9am to 3pm only). So far, I have only been able to set the default time.
$('#time').trigger('datebox', {"method":"set", "value":"06:00 PM"});

Indeed, it is not supported in DateBox1 - it is however supported in DateBox2: http://dev.jtsage.com/jQM-DateBox2/demos/opt/limit.html (jquery 1.7.1+ is required for this version at this time) (and it is still pretty beta, but it's reasonably solid).

Sorry, it isn't supported. It looks like days and years are the only thing that support a min and max. This probably wouldn't be difficult to add to the code if you fork his repo.
You can view all options, documented and undocumented, by looking at the source on github https://github.com/jtsage/jquery-mobile-datebox/blob/master/js/jquery.mobile.datebox.js
options: {
// All widget options, including some internal runtime details
version: '1.0.1-2012022700', // jQMMajor.jQMMinor.DBoxMinor-YrMoDaySerial
theme: false,
defaultTheme: 'c',
pickPageTheme: 'b',
pickPageInputTheme: 'e',
pickPageButtonTheme: 'a',
pickPageHighButtonTheme: 'e',
pickPageOHighButtonTheme: 'e',
pickPageOAHighButtonTheme: 'e',
pickPageODHighButtonTheme: 'e',
pickPageTodayButtonTheme: 'e',
pickPageSlideButtonTheme: 'd',
pickPageFlipButtonTheme: 'b',
forceInheritTheme: false,
centerWindow: false,
calHighToday: true,
calHighPicked: true,
transition: 'pop',
noAnimation: false,
disableManualInput: false,
disabled: false,
wheelExists: false,
swipeEnabled: true,
zindex: '500',
debug: false,
clickEvent: 'vclick',
numberInputEnhance: true,
internalInputType: 'text',
resizeListener: true,
titleDialogLabel: false,
meridiemLetters: ['AM', 'PM'],
timeOutputOverride: false,
timeFormats: { '12': '%l:%M %p', '24': '%k:%M' },
durationFormat: 'DD ddd, hh:ii:ss',
timeOutput: false,
rolloverMode: { 'm': true, 'd': true, 'h': true, 'i': true, 's': true },
mode: 'datebox',
calShowDays: true,
calShowOnlyMonth: false,
useDialogForceTrue: false,
useDialogForceFalse: true,
fullScreen: false,
fullScreenAlways: false,
useDialog: false,
useModal: false,
useInline: false,
useInlineBlind: false,
useClearButton: false,
collapseButtons: false,
noButtonFocusMode: false,
focusMode: false,
noButton: false,
noSetButton: false,
openCallback: false,
openCallbackArgs: [],
closeCallback: false,
closeCallbackArgs: [],
open: false,
nestedBox: false,
lastDuration: false,
fieldsOrder: false,
fieldsOrderOverride: false,
durationOrder: ['d', 'h', 'i', 's'],
defaultDateFormat: '%Y-%m-%d',
dateFormat: false,
timeFormatOverride: false,
headerFormat: false,
dateOutput: false,
minuteStep: 1,
calTodayButton: false,
calWeekMode: false,
calWeekModeFirstDay: 1,
calWeekModeHighlight: true,
calStartDay: false,
defaultPickerValue: false,
defaultDate : false, //this is deprecated and will be removed in the future versions (ok, may be not)
minYear: false,
maxYear: false,
afterToday: false,
beforeToday: false,
maxDays: false,
minDays: false,
highDays: false,
highDates: false,
highDatesAlt: false,
blackDays: false,
blackDates: false,
enableDates: false,
fixDateArrays: false,
durationSteppers: {'d': 1, 'h': 1, 'i': 1, 's': 1},
useLang: 'en',
lang: {
'en' : {
setDateButtonLabel: 'Set Date',
setTimeButtonLabel: 'Set Time',
setDurationButtonLabel: 'Set Duration',
calTodayButtonLabel: 'Jump to Today',
titleDateDialogLabel: 'Set Date',
titleTimeDialogLabel: 'Set Time',
daysOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
daysOfWeekShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthsOfYear: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthsOfYearShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
durationLabel: ['Days', 'Hours', 'Minutes', 'Seconds'],
durationDays: ['Day', 'Days'],
timeFormat: 24,
headerFormat: '%A, %B %-d, %Y',
tooltip: 'Open Date Picker',
nextMonth: 'Next Month',
prevMonth: 'Previous Month',
dateFieldOrder: ['m', 'd', 'y'],
timeFieldOrder: ['h', 'i', 'a'],
slideFieldOrder: ['y', 'm', 'd'],
dateFormat: '%Y-%m-%d',
useArabicIndic: false,
isRTL: false,
calStartDay: 0,
clearButton: 'Clear'
}
}
}

Related

Outlook REST API returns events without start and end dates

When requesting GET https://outlook.office.com/api/v2.0/me/calendars/{calendar_id}/events the response (for some events) does not have a Start and End date.
The full structure for such events is as follows:
{
'OriginalStartTimeZone': None,
'End': {
'TimeZone': 'tzone://Microsoft/Utc',
'DateTime': '0001-01-01T00:00:00.0000000Z'
},
'HasAttachments': False,
'ResponseRequested': True,
'ShowAs': 'Free',
'Recurrence': None,
'Start': {
'TimeZone': 'tzone://Microsoft/Utc',
'DateTime': '0001-01-01T00:00:00.0000000Z'
},
'BodyPreview': '',
'AllowNewTimeProposals': True,
'Location': {...},
'Attendees': [...],
'TransactionId': None,
'Type': 'SingleInstance',
'ResponseStatus': {
'Response': 'NotResponded',
'Time': '0001-01-01T00:00:00Z'
},
'Body': {...},
'OnlineMeeting': None,
'IsRoomRequested': False,
'OnlineMeetingProvider': 'Unknown',
'IsCancelled': False,
'IsAllDay': False,
'ReminderMinutesBeforeStart': 0,
'Subject': '...',
'Categories': [],
'LastModifiedDateTime': '2020-03-11T18:31:15.548Z',
'AutoRoomBookingOptions': None,
'OriginalEndTimeZone': None,
'CreatedDateTime': '2020-03-11T18:34:34.259429Z',
'IsOnlineMeeting': False,
'#odata.id': '...',
'IsDraft': False,
'WebLink': '...',
'ChangeKey': '...',
'SeriesMasterId': None,
'IsOrganizer': True,
'iCalUId': None,
'AutoRoomBookingStatus': 'None',
'Locations': [],
'Id': '...',
'IsReminderOn': False,
'Calendar#odata.associationLink': '...',
'Calendar#odata.navigationLink': '...',
'Importance': 'Normal',
'Organizer': {...},
'#odata.etag': '...',
'Sensitivity': 'Normal',
'OnlineMeetingUrl': None
}
Is this normal behavior? If so, how can this be displayed?
How can I create such an event to reproduce it?

DataTables has not rendering image

i'm trying show image in datatable, but i have a troubles with rendering image, how i may fixed it?
i'm using Django
$(document).ready(function() {
var datatable = $("#asins_list").DataTable({
"bServerSide": true,
"sAjaxSource": links.ajax_get_asins_list,
"bProcessing": true,
"bLengthChange": true,
"bFilter": false,
'sDom': 'Bfrtip',
"bSortable": false,
"bSearch": false,
"autoWidth": true,
"ordering": false,
"bInfo": false,
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
"iDisplayLength": 10,
responsive: true,
"aoColumnDefs": [{
"targets": 0,
"data": "remark",
"render": function ( data, type, row, meta ) {
// return 'Download';
return '<a href="test.png"><img src="test.png" ' +
'><b>Competed</b></a>';
}
}],
});
You did not indicate which version you are using, so I assume its the latest (1.10.18).
In that case please note that aoColumnDefs no longer exists, it is now just ColumnDefs.

Highstock Stockchart with custom color for single grouped column

I implemented the following stockchart with grouped columns:
var seriesData = [];
Highcharts.setOptions({
lang: {
rangeSelectorFrom: "Von",
rangeSelectorTo: "Bis",
months: ["Jannuar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
shortMonths: ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
rangeSelectorZoom: '',
decimalPoint: "."
}
});
columnChartOptions = {
exporting: {
enabled: false
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
chart: {
type: 'column'
},
credits: {
href: " ",
text: " "
},
title: {
text: ''
},
yAxis: {
min: 0,
title: {
text: 'kWh'
},
lineWidth: 1,
opposite: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%B',
week: '%e. %b',
day: '%e. %b',
hour: '%H'
}
},
legend: {
enabled: false
},
tooltip: {
shared: true,
valueDecimals: 2
},
plotOptions: {
series: {
marker: {
enabled: true
}
},
column: {
grouping: false,
shadow: false,
borderWidth: 0,
groupPadding: 0,
color: '#688DC4'
}
},
rangeSelector: {
inputDateFormat: '%d.%m.%Y',
inputEditDateFormat: '%d.%m.%Y',
inputEnabled: true,
inputDateParser: function (value) {
value = value.split(/[\.]/);
return Date.UTC(
value[2],
value[1]-1,
value[0]
);
},
verticalAlign: 'top',
x: 0,
y: 0,
buttonPosition: {
align: 'left',
x: 0,
y: 0
},
buttonTheme: {
width: 50
},
allButtonsEnabled: true,
selected: 3,
buttonSpacing: 5,
buttons: [{
type: 'day',
count: 1,
text: 'Tag',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['hour', [1]]]
}
}, {
type: 'week',
count: 1,
text: 'Woche',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['day', [1]]]
}
}, {
type: 'month',
count: 1,
text: 'Monat',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['week', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Jahr',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['month', [1]]]
}
}]
},
series: []
};
Initialization of the chart:
myChart = new Highcharts.StockChart('consumptionGraph', columnChartOptions);
myChart.showLoading("Wird geladen...");
setChartData();
Setting seriesdata dynamicaly (actually with an async AJAX call, but for better understanding replaced with static array):
function setChartData() {
var consumerSeries = [
[Date.UTC(2018, 1, 1), 150], [Date.UTC(2018, 1, 11), 180], [Date.UTC(2018, 1, 12), 199],
[Date.UTC(2018, 7, 1), 150], [Date.UTC(2018, 7, 2), 130], [Date.UTC(2018, 7, 5), 280],
[Date.UTC(2018, 9, 1), 150], [Date.UTC(2018, 9, 2), 130], [Date.UTC(2018, 9, 5), 190],
[Date.UTC(2018, 12, 1), 150], [Date.UTC(2018, 12, 2), 130], [Date.UTC(2018, 12, 5), 250],
];
consumerSeriesObject = {
name: "Consumption",
data: consumerSeries,
showInNavigator: true,
color: '#688DC4',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['month', [1]]]
}
};
myChart.addSeries(consumerSeriesObject, true);
myChart.hideLoading();
}`
JS Fiddle
Now I want to change the color of every column which includes a xAxis value over and equal to 200. (column 2+4 of my Example).
Is there any way to do this?
Yes. update({color: newColor}) won't work for grouped points but you can directly modify their SVGs by calling css method on their graphic property:
chart: {
events: {
render: function() {
this.series[0].groupedData.forEach(function(groupedPoint) {
if (groupedPoint.y > 40) {
groupedPoint.graphic.css({
color: 'red'
});
}
});
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/bhtqoyj9/
render event fires after initial load of the chart (directly after the load event) and after each redraw (directly after the redraw event).

jqgrid load from database does not work filterToolbar

I'm working with Asp.net MVC4, jqgrid 4.4.4 and jquery 1.9
The jqGrid is loaded from a query to the database, but I can not filter the fields, when I put a value doesn't search, it shows me the same values, but when I define in jqgrid the value loadonce: true only in the first search page, How I can resolve this problem? Where I should be modify the code?
This is my code, jqgrid:
jQuery(document).ready(function () {
jQuery("#tbBuscaRec").jqGrid({
url: '#Url.Action("DatosBuscaPersona", "raTabPersonaReclamante")',
datatype: 'json',
mtype: 'POST',
postData: { Parametro: Param },
colNames: ['Id', 'IdPer', 'Doc', 'CI/NIT', 'Nombres', 'Apellido Paterno', 'Apellido Materno', 'Apellido Esposo'],
colModel:
[
{ name: 'ip_idpersona', index: 'ip_idpersona', formatter: 'number', hidden: true },
{ name: 'ip_idpersonadoc', index: 'ip_idpersonadoc', formatter: 'text', hidden: true },
{ name: 'ip_partipodoc', index: 'ip_partipodoc', align: 'left', width: '4', editable: true, edittype: 'text', editoptions: { readonly: true }, search: false },
{ name: 'ip_nrodoc', index: 'ip_nrodoc', sortable: true, align: 'left', width: '8', editable: true, edittype: 'text', editoptions: { readonly: true} },
{ name: 'ip_nombres', index: 'ip_nombres', sortable: true, align: 'left', width: '15', editable: true, edittype: 'text', editoptions: { readonly: true} },
{ name: 'ip_appaterno', index: 'ip_appaterno', sortable: true, align: 'left', width: '15', editable: true, edittype: 'text', editoptions: { readonly: true } },
{ name: 'ip_apmaterno', index: 'ip_apmaterno', sortable: true, align: 'left', width: '15', editable: true, edittype: 'text', editoptions: { readonly: true} },
{ name: 'ip_apesposo', index: 'ip_apesposo', sortable: false, align: 'left', width: '15', editable: true, edittype: 'text', editoptions: { readonly: true} }
],
pager: '#pg_tbBuscaRec',
rowNum: 100,
rowList: [100, 200, 300],
sortname: 'ip_nombres',
sortorder: 'asc',
rownumbers: true,
multiselect: false,
gridview: true,
height: 180,
width: 490,
ignoreCase: true,
// loadonce: true,
});
});
jQuery("#tbBuscaRec").jqGrid('navGrid', '#pg_tbBuscaRec', { view: false, edit: false, add: false, del: false }, {}, {}, {}, { multipleSearch: true, closeAfterSearch: true, closeOnEscape: true });
jQuery("#tbBuscaRec").jqGrid('filterToolbar');
jQuery("#tbBuscaRec").trigger("reloadGrid", [{ current: true}]);
By default the filtering will be handled by your Controller, and you will see these values being passed to the controller in the _search and filters.
The reason the loadonce: true is working on the first page is that it is doing the filtering on the client side.
I would suggest checking out Oleg's answer on filtering at the link below, it is what put me on the track to do server side filtering for my application.
ASP.NET MVC 2.0 Implementation of searching in jqgrid

JqGrid Edit & Delete button with each row

i m using jqgrid with mvc 3, I want to add Edit and Delete button with every row of JqGrid , i have achieved this thing by the help of this link. But it is for inline editing, i want to open a popup widows when click on edit button.
How can i achieve this thing.
Thanks
You should just use new editformbutton: true option which exists starting with version 4.1.0 of jqGrid:
formatter:'actions',
formatoptions: {
keys: true,
editformbutton: true
}
Please find the colmodel below for editing:
{
name: 'EditAction',
width: 60,
fixed: true,
search: false,
sortable: false,
resize: false,
formatter: 'actions',
formatoptions: {
keys: false,
editbutton: true,
delbutton: false,
editformbutton: false,
onSuccess: function(response) {
if (response.status == 200) {
}
},
extraparam: { oper: 'edit' },
url: '#Url.Action("ActionName", "Controller")'
}
},
jQuery("#grid").jqGrid({
datatype: "local",
data: second,
#url: '#Url.Action("orders", "Home")',
datatype: "json",#
colNames: ['name', 'description', 'url'],
colModel: [
{name: 'name',
index: 'name',
editable: true,
editrules: {required: true},
editoptions: {placeholder: 'Enter a Name'}
},
{name: 'description',
index: 'description',
editable: true,
editrules: {required: true},
editoptions: {placeholder: 'Enter description'}
},
{
name: 'url',
index: 'url',
editable: true,
editrules: {required: true},
editoptions: {placeholder: 'Enter url'}
}
],
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'model',
pager: '#pager',
editrow:true,
editurl: '#Url.Action("orders", "Home")',
viewrecords: true,
sortorder: "desc",
jsonReader: {
repeatitems: false,
id: "0"
},
searching: {
loadFilterDefaults: false,
closeOnEscape: true,
searchOperators: true,
searchOnEnter: true
},
caption: "Cars Grid",
height: '80%',
gridComplete: initGrid
});

Resources