I am working on kendo ui DatePicker,I want to set min date to yesterday.
Could anyone help me?
I have tried this
var minDate = date.setDate((new Date()).getDate() - 1);
but of no use.
here is my code.
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content"ng-controller="MyCtrl">
<div class="box-col">
<h4>Select date:</h4>
<input kendo-date-picker
ng-model="dateString"
k-options="monthSelectorOptions"
k-ng-model="dateObject"
/>
</div>
<style>
.box-col {
width: 400px;
}
</style>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
var date = new Date();
$scope.monthSelectorOptions = {
min: date
};
})
</script>
Its pretty easy to do so. Here is an example:
http://dojo.telerik.com/ArEMa
Fairly simple:
var date = new Date();
var yesterday = date.getDay() -1;
var minDate = date.setDate(yesterday);
$scope.monthSelectorOptions = {
min: new Date(minDate)
};
Edit: Apparently, the new Date(minDate) is the crutial part, because date.setDate() does not give you a UTC-formatted date-string, but new Date() does. Kendo Datepicker only takes UTC-formatted dates as parameter.
Related
i am a beginer in frontend and javascript hard for me :( I want to make count numbers with component scrollspy uikit 3 without jquery https://getuikit.com/docs/scrollspy
I made like this, but it's not working
<span id="number"></span>
<script>
UIkit.scrollspy('#number', 'inview', function () {
const countUp = new CountUp('number', 0, 1000 );
countUp.start();
});
</script>
I created a script for this.
var util = UIkit.util;
var el = util.$('#heading');
var textIndex = 0;
UIkit.scrollspy(el, {repeat: true, delay: 100});
util.on(el,'inview', function (){
function counter( start, end, duration) {
let current = start,
range = end - start,
increment = end > start ? 1 : -1,
step = Math.abs(Math.floor(duration / range)),
timer = setInterval(() => {
current += increment;
el.textContent = current;
if (current == end) {
clearInterval(timer);
}
}, step);
}
counter(0, 100, 3000);
});
util.on(el, 'outview', function(){
el.textContent = 0;
});
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit#3.6.22/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit#3.6.22/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit#3.6.22/dist/js/uikit-icons.min.js"></script>
<section class="uk-section uk-section-primary" uk-height-viewport="offset-top: true">
<div class="uk-container">
<div class="uk-text-center">
<h1 >SECTION 1</h1>
Source Code for Number Increment
</div>
<div class="uk-text-center uk-margin-medium-top">
<a class="uk-link-reset" href="#section" uk-scroll>Scroll</a>
</div>
</div>
</section>
<section class="uk-section uk-section-secondary" id="section">
<div class="uk-container">
<h1 class="uk-text-center" id="heading">0</h1>
</div>
</section>
You need to listen inview and outview event. Here is the method:
UIkit.util.on(element, 'event', function(){
//your code will be here here
});
With alpine.js 2 I try to make timer with definition in footer (which is set for all layout) of the app :
<div>
<div x-data="appFooterComponent()" x-init=" console.log('initTimer()::'); refreshTime();
setInterval(refreshTime, 1000) ; console.log('END initTimer::');">
<div >
...
<span style="background-color: yellow" x-text="refreshTime(#this)"></span>
</div>
</div>
</div>
<script>
// THAT DOES NOT WORK
// this.refreshTime()
// setInterval(refreshTime, 1000)
function appFooterComponent() {
return {
refreshTime() {
return moment(new Date()).format('DD MMMM, YYYY HH:mm:ss')
},
}
}
</script>
As result when any new page is opened I see how current datetime is set, but without interval and time is not refreshed any second.
In console I see output of x-init console commands, but not time interval...
How to fix it ?
Thanks!
Would the following work?
What you probably want to do with Alpine.js is have a time variable that you update (using setInterval), then you can read the formatted time using this.time and the relevant Moment.js expression.
<div>
<div x-data="appFooterComponent()" x-init="init()">
<div>
...
<span style="background-color: yellow" x-text="getTime()"></span>
</div>
</div>
</div>
<script>
function appFooterComponent() {
return {
time: new Date(),
init() {
setInterval(() => {
this.time = new Date();
}, 1000);
},
getTime() {
return moment(this.time).format('DD MMMM, YYYY HH:mm:ss')
},
}
}
</script>
I am trying to make a piece of code (sorry lost the link to original) but I am struggling and cannot get past the error message "The script completed but the returned value is not a supported return type". I have looked at changing this to a string, but to be honest I am at the limit of my ability to understand what I am trying to do. Any assistance greatly appreciated.
code.gs is:
function getMenu1() {
var t = HtmlService.createTemplateFromFile('myForm');
t.data = SpreadsheetApp
.openById('11_3xQkJdQ172_97LWUoOu22qUMBS-vSrr7TN9bqWicg')
.getSheetByName('PROJECTS')
.getRange('D:D')
.getValues();
return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
Logger.log('doGetMenu1 ran');
}
and myform.html is:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<body style="font-family: Arial, Helvetica, sans-serif">
<div>
<input class="left" type="text" name="cuStaff" id="cuStaff" style="width=150px" required>
<datalist id="cuStaff">
</datalist>
<input class="left" type="date" name="dateA" id="dateA" style="width:150px" required>
<input class="left" type="time" name="timeA" id="timeA" style="width:75px" required>
</div>
</body>
<select id="cuStaff">
<option> Choose a option </option>
</select >
<body onload = "addList()"></body>
<script>
function addList() {
console.log('addList ran!');
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(injectMyContent)
.getMenu1();
};
window.injectMyContent = function(argReturnedData) {
for(var i = 0; i < argReturnedData.length; i++) {
var opt = argReturnedData[i];
var document = myForm.html
var el = document.createElement("option");
var el = document
el.text = opt;
el.value = opt;
select.appendChild(el);
};
};
window.onFailure = function(err) {
alert('There was an error! ' + err.message);
};
</script >
</head>
</html>
JSFiddle here
Seems like the 2 functions are being mixed. Try:
function doGet() {
var t = HtmlService.createTemplateFromFile('myForm');
return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function getMenu1() {
var data = SpreadsheetApp
.openById('11_3xQkJdQ172_97LWUoOu22qUMBS-vSrr7TN9bqWicg')
.getSheetByName('PROJECTS')
.getRange('D:D')
.getValues();
Logger.log('getMenu1 ran')
return data;
}
I have 2 issues i need help with...
When using the range chart to select individual days the data table updates accordingly, but when i extend the range to again include all records i can't seem to select the last day?
UTC time issue, i seem to have to change the time to 5pm to have the days display properly if i don't the days seem to shift down a day along with their associated values. See line 85
to be clearer with regards to problem #2
If i use 2010-01-02T00:00:00Z it will map incorrectly to Jan 1st.
if i use 2010-01-02T05:00:00Z it works correctly mapping to jan 2.
I have this posted live on Plunker... see here:
http://plnkr.co/edit/3nPjiE08ZzRXgNmSeym5?p=preview
Any help would be greatly appreciated! Cheers Bruce
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chart</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://www.digitalliquid.com/tank/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://www.digitalliquid.com/tank/dc.css" />
<style>
#monthly-volume-chart g.y {
display: none;
}
#logo {
margin-right: 2em;
margin-top: 2em;
}
</style>
</head>
<body>
<!-- <div class="container-fluid"> -->
<div class="container">
<div class="row">
<div id="monthly-move-chart">
<strong>Risk History</strong>
<span class="reset" style="display: none;">range: <span class="filter"></span></span>
<a class="reset" href="javascript:moveChart.filterAll();volumeChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div id="monthly-volume-chart">
</div>
<p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p>
</div>
<div class="row">
<div>
<div class="dc-data-count">
<span class="filter-count"></span> selected out of <span class="total-count"></span> records | <a href="javascript:dc.filterAll();
dc.renderAll();">Reset All</a>
</div>
</div>
<table class="table table-hover dc-data-table">
</table>
</div>
<div class="clearfix"></div>
</div>
<script type="text/javascript" src="http://www.digitalliquid.com/tank/d3.js"></script>
<script type="text/javascript" src="http://www.digitalliquid.com/tank/crossfilter.js"></script>
<script type="text/javascript" src="http://www.digitalliquid.com/tank/dc.js"></script>
<script type="text/javascript" src="http://www.digitalliquid.com/tank/colorbrewer.js"></script>
<script type="text/javascript">
'use strict';
var moveChart = dc.lineChart('#monthly-move-chart');
var volumeChart = dc.barChart('#monthly-volume-chart');
var nasdaqCount = dc.dataCount('.dc-data-count');
var nasdaqTable = dc.dataTable('.dc-data-table');
String.prototype.replaceAt = function(index, character) {
return this.substr(0, index) + character + this.substr(index + character.length);
}
// Load Data /Fix date
d3.json('risk.json', function(data) {
var dateFormat = d3.time.format.utc("%Y-%m-%dT%H:%M:%SZ");
data.forEach(function(d) {
// i seem to have to change the time to 5pm to have the days display properly
//if i don't the days seem to shift down with their associated values??????
// comment out the line below to see what i mean
// change hour in date to 5 pm
d.date = d.date.replaceAt(12, "5");
d.dd = dateFormat.parse(d.date);
d.month = d3.time.month(d.dd);
d.day = d3.time.day(d.dd);
d.risk = +d.risk; // coerce to number
});
console.log(JSON.stringify(data));
// ### Create Crossfilter Dimensions and Groups******************
var ndx = crossfilter(data);
var totalReadings = ndx.size();
var all = ndx.groupAll();
// var brush = d3.svg.brush();
// Dimension by full date
var dateDimension = ndx.dimension(function(d) {
return d.dd;
});
// Dimension by risk
var riskdimension = ndx.dimension(function(d) {
return d.risk;
});
// Dimension by day
var daydim = ndx.dimension(function(d) {
return d.day;
});
var mygroup = daydim.group().reduce(
function(p, v) {
++p.days;
// p.total += (v.open + v.close) / 2;
// p.avg = Math.round(p.total / p.days);
// return v.risk;
p.risk = v.risk
return p;
},
function(p, v) {
--p.days;
// p.total -= (v.open + v.close) / 2;
// p.avg = p.days ? Math.round(p.total / p.days) : 0;
// return v.risk;
p.risk = v.risk
return p;
},
function() {
return {
risk: 0,
};
}
);
//### Define Chart Attributes
moveChart
.renderArea(true)
.width(960)
.height(200)
.transitionDuration(1000)
.margins({
top: 30,
right: 50,
bottom: 25,
left: 40
})
.dimension(daydim)
.group(mygroup, 'Risk')
.mouseZoomable(true)
.rangeChart(volumeChart)
.y(d3.scale.linear().domain([0, 100]))
.x(d3.time.scale().domain([data[0].dd, data[data.length - 1].dd]))
.round(d3.time.day.round)
.xUnits(d3.time.days)
.renderHorizontalGridLines(true)
// ##### Legend ----------------------------------------------------------
.legend(dc.legend().x(880).y(10).itemHeight(13).gap(5))
.brushOn(false)
.valueAccessor(function(d) {
return d.value.risk;
})
// #### Volume Chart ----------------------------------------------------------------------------------------------------------------------
volumeChart
.width(960)
.height(40)
.margins({
top: 0,
right: 50,
bottom: 20,
left: 40
})
.dimension(daydim)
.group(mygroup, 'Risk')
.centerBar(true)
.gap(1)
.x(d3.time.scale().domain([data[0].dd, data[data.length - 1].dd]))
.round(d3.time.day.round)
.alwaysUseRounding(true)
.xUnits(d3.time.days)
.valueAccessor(function(d) {
return d.value.risk;
});
//#### Data Count ***********************************
nasdaqCount /* dc.dataCount('.dc-data-count', 'chartGroup'); */
// dc.dataCount(".dc-data-count")
// dc.dataCount("#monthly-move-chart")
.dimension(ndx)
.group(all);
// .html({
// some: '<strong>%filter-count</strong> selected out of <strong>%total-count</strong> records' +
// ' | <a href=\'javascript:dc.filterAll(); dc.renderAll();\'\'>Reset All</a>',
// all: 'All records selected. Please click on the graph to apply filters.'
// });
//#### Data Table
nasdaqTable /* dc.dataTable('.dc-data-table', 'chartGroup') */
.dimension(dateDimension)
.group(function(d) {
var format = d3.format('02d');
return d.dd.getFullYear() + '/' + format((d.dd.getMonth() + 1));
})
.size(100)
.columns(['date', 'risk', ])
.sortBy(function(d) {
return d.dd;
})
// (_optional_) sort order, `default = d3.ascending`
.order(d3.ascending)
// (_optional_) custom renderlet to post-process chart using [D3](http://d3js.org)
.on('renderlet', function(table) {
table.selectAll('.dc-table-group').classed('info', true);
});
dc.renderAll();
});
</script>
</body>
</html>
By default all times will be interpreted in the local time zone.
If you want to group your data using UTC time, you should use the UTC versions of the d3 time interval utilities.
So, everywhere you use d3.time.days that should be d3.time.days.utc, etc.
We use these in the dc.js Jasmine tests to ensure the tests run consistently in any time zone.
It will probably take some iteration to shake out all the places that are assuming the local time zone. I have fixed a few more in my fork of your plunker:
http://plnkr.co/edit/qX5WvAeLxaO6kq6tqJ4C?p=preview
First, you probably also need to use d3.time.day.utc (note the singular form) in your dimension function, instead of reading the .dd field, which will use the local time zone:
// Dimension by day
var daydim = ndx.dimension(function(d) {
return d3.time.day.utc(d.dd);
});
(This may not matter in your case, if the data is not more granular than a day, but it will matter if you need to group multiple times within a day.)
Next, anything that prints the dates is going to screw them up again. So, the title function:
moveChart
.title(function(d) { return d.key.toUTCString() + ': ' + d.value; })
Next, the filter printer. Here you probably want to use d3 time formatting, I printed the details in order to debug the brushing issue mentioned below:
.filterPrinter(function(f) {
return f[0][0].toUTCString() + ' - ' + f[0][1].toUTCString()
});
Finally, even though the chart is showing the whole last day, you have actually set the end of the range to the beginning of the first day, so it can't include the last data point.
There is probably a bug in dc.js here (or some confusing features), but we'll ignore that and just add a second to the end of the range:
var endDate = new Date(data[data.length - 1].dd);
endDate.setSeconds(endDate.getSeconds()+1)
.x(d3.time.scale.utc().domain([data[0].dd, endDate]))
I have HTML code as below:
<script type="text/javascript">
$(document).ready(function(){
$("#useDatePicker").mouseout(function{
//$("#result").text() = $("#useDatePicker").text();
alert(1);
});
});
</script>
</head>
<body>
<form method="post" name="frm" id="myForm">
<input type="text" name="date" id="useDatePicker"/>
<input type="text" name="result" id="result" />
</form>
What I need:
when the user select date from date Picker, it will subtract with date now automatic and the result will be in <input type="text" name="result" id="result" />
Problem
I have no concept with it.
may be you can use onselect option of date picker of jquery ui
demo: fiddle
$('#useDatePicker').datepicker({
onSelect: function (date) {
var today = new Date();
var result = DateDiff(today, new Date(date));
$('#result').val(result);
}
});
function DateDiff(date1, date2) {
var diff = date1 - date2;
var num_years = diff / 31536000000;
var num_months = (diff % 31536000000) / 2628000000;
var num_days = ((diff % 31536000000) % 2628000000) / 86400000;
return Math.floor(num_years) + "years " + Math.floor(num_months) + "months " + Math.floor(num_days) + "days";
}