Using this http://www.daterangepicker.com/
How can I choose the minimum selection for each month? For example I'm using this code;
$('.date-picker input').daterangepicker({
"minSpan": {
"days": 5
},
showDropdowns: true,
locale: {
format: 'DD/MM/YYYY'
}
});
I want this code like this;
$('.date-picker input').daterangepicker({
if(this.month==5){
"minSpan": {
"days": 5
},
}
showDropdowns: true,
locale: {
format: 'DD/MM/YYYY'
}
});
The pull request fixing this was not implemented yet, so you will have to change the source file by yourself. Install Date Range Picker via npm
bootstrap-daterangepicker
Link the js-file in your html (if you are working with html)
<script type="text/javascript" src="node_modules/bootstrap-daterangepicker/daterangepicker.js"></script>
Go to the daterangepicker.js file and add the missing code:
https://github.com/dangrossman/daterangepicker/pull/2173/files
Then your js code must work
$('.date-picker input').daterangepicker({
"minSpan": {
"days": 5
},
Related
Having an optional field on a content type in Contentful, I tried to get Gatsby-Plugin-Contentful-Optional-Fields working.
The optional field is an image, that I render with the new Gatsby-Image-Plugin. After configuring the plugin in my gatsby-config.js, I still get the following error:
There was an error in your GraphQL query:
Cannot query field "description" on type "Node".
Spent hours to solve it, with no success unfortunately. Im fairly new to developing, so for someone else, maybe just an obvious mistake. Any help is highly appreciated.
The plugin configuration in my gatsby-config.js:
{
resolve: "gatsby-plugin-contentful-optional-fields",
options: {
optionalFields: {
ContentfulNews: {
image: "Node",
},
},
},
},
My Query:
query {
allContentfulNews(sort: { fields: date, order: DESC }) {
edges {
node {
id
heading
date(formatString: "DD.MM.YYYY")
text {
childMarkdownRemark {
html
}
}
image {
gatsbyImageData(
layout: FULL_WIDTH
placeholder: BLURRED
formats: [AUTO, WEBP]
quality: 100
width: 1500
)
description
}
}
}
}
}
I'm having trouble with a datetime field in gatsby.
Originally I just used the string widget in netlify cms but markdown couldn't seem to decide what is a number and what's a string:
Which means gatsby sees conflicting field types:
warn There are conflicting field types in your data.
MarkdownRemark.frontmatter.startTime:
- type: number
value: 1080
- type: string
value: '07:00'
MarkdownRemark.frontmatter.endTime:
- type: number
value: 1140
- type: string
value: '08:00'
So I explicitly define them with the createTypes action as per gatsby's suggestion:
schema.buildObjectType({
name: 'Frontmatter',
fields: {
startTime: {
type: 'Date',
// resolve(parent){
// console.log(parent.startTime);
// },
extensions: {
dateformat: {
formatString: "HH:mm",
},
},
},
endTime: {
type: 'Date',
extensions: {
dateformat: {
formatString: "HH:mm",
},
}
},
},
}),
But that produces either 00:00 or "Invalid date"
I use the netlify timepicker to set the values:
- { label: "Start Time", name: startTime, widget: datetime, date_format: false, time_format: HH:mm, format: HH:mm}
- { label: "End Time", name: endTime, widget: datetime, date_format: false, time_format: HH:mm, format: HH:mm}
Is there a way I can force markdown to see strings instead of numbers? Or to see a datetime? Or get netlify cms to always save it as a string?
I have also had this problem and have discovered that the version of the YAML parser used by Gatsby (currently js-yaml#3.14.1) is parsing strings as base60 where possible. Which I believe is not compliant with the YAML 1.2 spec.
This issue has since been fixed in version 4 but unfortunately the libraries that Gatsby uses still depend on version 3. gatsby-transformer-remark#4.3.0 -> gray-matter#4.0.3 -> js-yaml#3.14.1
An attempt to force upgrade using npm-force-resolutions did not work but
fortunately gray-matter allow engines to be swapped using the options. Also gatsby-transformer-remark allows the gray-matter options to be configured within gatsby-config.js.
So I have managed to workaround the issue by installing js-yaml#4.1.0 and overriding the engine like so:
package.json
{
...
"dependencies": {
+ "js-yaml": "4.1.0",
gatsby-config.js
+ const yaml = require('js-yaml');
...
{
resolve: "gatsby-transformer-remark",
options: {
+ engines: {
+ yaml: {
+ parse: yaml.load.bind(yaml),
+ stringify: yaml.dump.bind(yaml)
+ }
},
Is is possible to for the KendoUI Chart (Area) to have multiple data labels or even a concatenation of two? I need to display both a value and a percentage for each data point. Is this something that would need to be handled on the data source side or is it on the view?
Thanks for any help.
You can use templates to format both labels and tooltips; see labels.template and tooltip.template.
The key is to reference the Property you want using dataItem ex:
dataItem.TotalDollars
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
The answer above wont really help unless you have a strong understanding of the Kendo UI framework. I was having a similar issue and before I found my answer I found this question. I circled back because the answer is simple and some simple example code is really simple. Lets save everyone some clicks.
DATA RESPONSE FROM REMOTE DATA (copy and past for local binding):
[
{
"ProgramName":"Amarr Garage Doors",
"PercentageShare":50.12,
"TotalDollars":5440.000000
},
{
"ProgramName":"Monarch Egress Thermal Hinge C",
"PercentageShare":4.64,
"TotalDollars":504.000000
},
{
"ProgramName":"Monarch Egress Window Wells",
"PercentageShare":15.73,
"TotalDollars":1707.000000
},
{
"ProgramName":"Monarch Premier V Egress Windo",
"PercentageShare":16.25,
"TotalDollars":1764.000000
},
{
"ProgramName":"Organized Living Shelftech Ven",
"PercentageShare":13.27,
"TotalDollars":1440.000000
}
]
**Chart Generation Code: **
function createChart() {
$("#SubmissionSummaryByProgramChart").kendoChart({
title: {
text: "Breakdown by Program"
},
legend: {
position: "right"
},
dataSource: {
transport: {
read: {
url: "GetFooData",
dataType: "json",
data: {
Year : 2014,
Quarter : 1,
}
}
}
},
series: [{
type: "pie",
field: "PercentageShare",
categoryField: "ProgramName"
}],
tooltip: {
visible: true,
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
}
});
};
$(document).ready(createChart);
I am working with kendo ui controls.my functionality is to filter the grid based on date-time and drop down selection. This is working on chrome but not in FF and IE.
var gridResult = $('#Grid').data("kendoGrid");
var condition = {
logic: "and",
filters: [
{ field: "Category", operator: "equals", value: $("#nw").val() },
{ field: "Device", operator: "equals", value: $("#pro").val() },
{ field: "Orig", operator: "equals", value: $("#work").val() },
{ field: "Term", operator: "equals", value: $("#network").val() }
]
};
if (mindate !== null) {
condition.filters.push({ field: "Time", operator: "ge", value: new Date(mindate) });
}
if (maxdate !== null) {
maxdate = new Date(maxdate);
maxdate.setHours(23, 59, 59, 999);
condition.filters.push({ field: "Time", operator: "lt", value: maxdate });
}
gridResult.dataSource.filter(condition);
return false;
});
$('#fromdatetimepicker').attr('readonly', false);
$('#todatetimepicker').attr('readonly', false);
}
When i debug in firefox i didn't find aby bug can any one look at the code and please tell me where i am wrong?
I've been testing your code and I can't find any problems with it, besides that you have an extra ) at the end but that's probably because the function is cut from a larger section of code.
There are however several things that might be causing this problem and there's a lot of code missing so I can't say for sure. Some browsers try to help you out by ignoring errors you make. This can make it work in Chrome but not in FF and IE. The best way to deal with this is to go through the code and add validations that confirm the values every time the Filter method is call. Here are my suggestions for you:
When debugging in Internet Explorer, use IE 11 and use the F12 debugging tool.
You check that mindate and maxdate are not null, but if they're undefined or contain an empty value, they'll pass that test and will be added to the filters even though they're not set.
You don't have any check that mindate and maxdate are valid dates and that you successfully are able to create the JavaScript date variable, before adding it to the filter. This could be a source of error, depending on the other code in your script.
You use the values from $("#network").val() etc directly in your filter without validating them, and that could cause problems in the future. But this is not causing this error.
Edit: Encoding
You need to make sure the encoding of your webpage is correct. Please make sure these two lines exist in the head section of the html code. If you use ASP.NET MVC you can add these two files to the Views\Shared\_Layout.cshtml file. If you use ASP.NET Forms you can add them in your Masterfile. If you use PHP you just put them in the head section.
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
I'm using the latest version of kendoui and whenever I use the "is not equal to" or "does not contain" filter I get the following error:
Uncaught TypeError: Cannot read property 'length' of undefined
I'm using a server side datasource, all the other filters seem to work without issue.
Also, how do I specify a datetimepicker for a date column?
I've looked at the documentation and tried using:
filterable: {
ui: "datetimepicker"
}
But it never shows the datetimepicker.
Here is the code:
var dataSourceArguments = {
pageSize:10,
serverPaging:true,
serverFiltering:true,
serverSorting:true,
transport:{
read:{
url:$("#grid_order").attr('data-url'),
dataType:"json"
}
},
schema:{
total:"count",
data:'fields'
},
sort:{'field':'order_date', dir:'desc'}
};
var ds2 = new kendo.data.DataSource(dataSourceArguments);
$("#grid_order").kendoGrid({
dataSource:ds2,
groupable:true,
scrollable:true,
sortable:true,
pageable:true,
columns:[
{
field:'order_date',
title:'Order Date',
width:150,
filterable: {
ui: "datetimepicker"
}
},
{
field:"reference",
title:'Reference',
width:120,
encoded:false
},
{
field:"client__company",
title:'Client',
encoded:false
},
{
field:"grand_total",
title:'Total',
width:100
},
{
field:'status',
title:'Status',
width:120,
encoded:false
},
{
field:'actions',
width:200,
title:'Actions',
filterable:false,
encoded:false,
sortable:false
}
],
filterable:true
});
UPDATE: I managed to get the datepicker working however whenever I choose the date, and click filter it filters but the date I've chosen dissapears from the field.
Add the order_date to the scheme from the data source, and the data type of the field to date.
See http://docs.kendoui.com/api/framework/datasource