How to disable past date in daterangepicker? - daterangepicker

I using two date selected daterangepicker. this working perfect but how to disable past date. below is my code
js/site/daterange/moment.min.js">
<script type="text/javascript" src="<?php echo base_url();?>js/site/daterange/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/site/daterangepicker.css" />
<script type="text/javascript">
$(function() {
$('input[name="checkin"],input[name="checkout"]').daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('input[name="checkin"],input[name="checkout"]').on('apply.daterangepicker', function(ev, picker) {
//$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
$('#checkin').val(picker.startDate.format('MM/DD/YYYY'));
$('#checkout').val(picker.endDate.format('MM/DD/YYYY'));
});
$('input[name="checkin"],input[name="checkout"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});

this is easy way to solve the problem
$('input[name="daterange"]').daterangepicker({
minDate:new Date()
});

I had the same issue. I checked http://www.daterangepicker.com/#options and seems to me minDate would do the job.
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){ dd='0'+dd }
if(mm<10){ mm='0'+mm }
var today = dd+'/'+mm+'/'+yyyy;
$('input[name="daterange"]').daterangepicker({
minDate:today
});

So as far as i can see from your code you want to disable dates that are in the past so there are multiple ways to do such a thing but the easiest of them in my opinion would be to get the current date on document load and set that as the start date for your date range picker.
http://www.daterangepicker.com/#options should give you the example explaining the startDate syntax to do the same and the code to find the current date in the said format can be show as below:
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){ dd='0'+dd }
if(mm<10){ mm='0'+mm }
var today = dd+'/'+mm+'/'+yyyy;
Here today stores the string form of the format you need and can be set to the startDate attribute.

Related

how to bind year and month dropdown in fullcalendar (jquery plugin)?

My requirement is to bind these two dropdown with fullcalendar and reflect the changes according.
I have already searched lot about binding the custom dropdown to the fullcalendar but not getting success yet!!
So any help is appreciated.
$(document).ready(function() {
var $months = $('#months');
var $calendar = $('#calendar');
$calendar.fullCalendar({
viewRender: function() {
buildMonthList();
}
});
$('#months').on('change', function() {
$calendar.fullCalendar('gotoDate', $(this).val());
});
buildMonthList();
function buildMonthList() {
$('#months').empty();
var month = $calendar.fullCalendar('getDate');
var initial = month.format('YYYY-MM');
month.add(-6, 'month');
for (var i = 0; i < 13; i++) {
var opt = document.createElement('option');
opt.value = month.format('YYYY-MM-01');
opt.text = month.format('MMM YYYY');
opt.selected = initial === month.format('YYYY-MM');
$months.append(opt);
month.add(1, 'month');
}
}
});
Please check this fiddle for month and year dropdown for fullcalendar.
https://jsfiddle.net/L6a5LL5b/

dc.js line chart - Date Value issue

Okay, so I created a basic line chart where x = months and y = values as per the below CSV:
dates,purpose,num
01/04/2015,Commute,1
01/05/2015,Commute,15
01/06/2015,Commute,48
01/07/2015,Commute,4
01/08/2015,Commute,4
01/09/2015,Commute,52
01/10/2015,Commute,163
01/11/2015,Commute,222
01/12/2015,Commute,126
01/01/2016,Commute,174
01/02/2016,Commute,11
01/03/2016,Commute,15
01/04/2015,Walk,0
01/05/2015,Walk,600
01/06/2015,Walk,13
01/07/2015,Walk,1
01/08/2015,Walk,1
01/09/2015,Walk,14
01/10/2015,Walk,44
01/11/2015,Walk,60
01/12/2015,Walk,34
01/01/2016,Walk,47
01/02/2016,Walk,3
01/03/2016,Walk,900
HTML is as follows:
<head>
<title>dc.js - Line Chart Example</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/dc.css"/>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/d3.js"></script>
<script type="text/javascript" src="../js/crossfilter.js"></script>
<script type="text/javascript" src="../js/dc.js"></script>
<script type="text/javascript">
var Chart5 = dc.lineChart("#test");
d3.csv("morley3.csv", function(data) {
var dateFormat = d3.time.format("%d/%m/%Y");
var numberFormat = d3.format(".2f");
data.forEach(function(d) {
d.dd = dateFormat.parse(d.dates);
d.month = d3.time.month(d.dd);
//d.day = d3.time.day(d.dd);
//d.year = d.dd.getFullYear();
//d.num = +d.num;
//d.purpose = d.purpose;
});
var facts = crossfilter(data);
var dateDimension = facts.dimension(function(d) {return d.month;});
var dateDimension2 = facts.dimension(function(d) { if (d.purpose == "Walk") {return d.month;}});
var numberByDate2 = dateDimension2.group().reduceSum(function(d) { return d.num; });
minDate = dateDimension2.bottom(1)[0];
maxDate = dateDimension2.top(1)[0];
Chart5
.renderArea(true)
.width(900)
.height(300)
.renderArea(false)
.brushOn(false)
.dimension(dateDimension2)
.group(numberByDate2)
.x(d3.time.scale().domain([minDate, maxDate]))
// .xUnits(d3.time.day)
renderHorizontalGridLines(true)
.elasticX(true)
.elasticY(true)
.legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
.valueAccessor(function (d) {return d.value;}) // What does this do?
.yAxisLabel("")
.xAxis();
dc.renderAll();
});
</script>
</body>
</html>
I've asked to show just "Walk" and the result is showing the months ok in the correct order.
The issue I'm having is that the first month is adding 835 to the result.
This is the sum of all "num" where "purpose" = "Commute".
See pic here: http://tinypic.com/r/qx9kih/8
Any ideas where I'm going wrong?
Dimension accessor functions must return naturally ordered values, and yours does not. If the values aren't naturally ordered, group calculations start randomly including incorrect records. Try changing your dimension to:
var dateDimension2 = facts.dimension(function(d) { return d.month; });
var numberByDate2 = dateDimension2.group().reduceSum(function(d) {
if (d.purpose == "Walk") { return d.num } else { return 0; };
});
In other words, do your filtering in the sum accessor function rather than the dimension accessor function.

Kendo Datetimepicker How to prevent change event?

I am using a kendo datetimepicker. When user opens the calender and select any date I need to check for some other dates, ie need to run validations if the date is wrong then prevent the new date from filling the date picker and keep the old value, otherwise allow datepicker to change value. I tried with event.preventDeafult , but unfortunatly it is not working..
Is there any way to acheceive this?
Here is the fiddle enter link description here
Any help is appreciated.
Example fiddle here
$("#datePicker").kendoDatePicker({
change:function(event){ alert(1);
// some validations here
event.preventDeafult(); }
});
Go through this answer. May any lines help you to solve your problem. You can simply assign like this.
$("#datepicker").kendoDatePicker({
change: function () {
// some validations here
var i = 0;
var prev = "9/12/2014";
var date = kendo.toString(this.value(), 'd');
if (i == 0) {
$("#datepicker").data("kendoDatePicker").value(prev);
}
},
close: onClose,
open: onOpen
});
Updated Answer :
var date;
$(function () {
date = $("#datepicker").data("kendoDatePicker").value();
$("#datepicker").kendoDatePicker({
change: function () {
// some validations here
var i = 0;
var prev = date;
if (i == 0) {
$("#datepicker").data("kendoDatePicker").value(prev);
}
},
close: onClose,
open: onOpen,
});
})
I've used read only in the past to do this.
var endDate = $("#endDate").data("kendoDatePicker");
endDate.readonly();

changing rally basic dropdown menus after display

I have a rally.sdk.ui.basic.Dropdown menu in a Rally App that I would like to change based on user input. So I will call display() on the dropdown menu, and then later I want to change the contents of that menu.
Has anybody done this? When I try, it crashes. I've also tried calling destroy() on the dropdown menu and then calling display() on a new menu that I allocate, but that crashes as well with an obscure dojo error.
Any suggestions on how to change dropdown menus on the fly?
I've included a very stripped down example below of trying to destroy and then re-display the menu:
<html>
<head>
<title>Incoming Defects by Severity</title>
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta name="Name" content="Defects by Severity" />
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.29/sdk.js"></script>
<script type="text/javascript">
function DefectChart() {
this.display = function() {
var defectVersionDropdown;
var count = 1;
function makeDefectChart(results){
initDefectVersionDropdown();
};
function renderPage() {
var queryConfig = [];
var startDate = '2011-06-06';
var endDate = '2012-02-02';
var queryArray = ['CreatedDate >= "' + startDate + '"', 'CreatedDate <= "' + endDate + '"'];
var versionFilter = defectVersionDropdown ? defectVersionDropdown.getDisplayedValue() : 'ALL';
if (versionFilter != 'ALL') {
queryArray.push('FoundInBuild contains "' + versionFilter + '"');
}
// console.log(queryArray);
queryConfig.push({
type : 'Defects',
key : 'defects',
query: rally.sdk.util.Query.and(queryArray),
fetch: 'Severity,State,LastUpdateDate,CreationDate,OpenedDate,AcceptedDate,LastUpdateDate,ClosedDate,Environment,FoundInBuild'
});
rallyDataSource.findAll(queryConfig, makeDefectChart);
}
function defectVersionChange(sender, eventArgs) {
var version = eventArgs.value;
renderPage();
}
function initDefectVersionDropdown() {
if (defectVersionDropdown != null) {
defectVersionDropdown.destroy();
defectVersionDropdown = null;
}
if (defectVersionDropdown == null) {
console.log('initDefectVersionDropdown');
count++;
var menuItems = [{label: "ALL", value: "ALL"}];
for (var i=0; i < count; i++) {
menuItems.push({label: count, value: count});
}
var config = {
label: "Found In Version:",
items: menuItems
};
defectVersionDropdown = new rally.sdk.ui.basic.Dropdown(config);
defectVersionDropdown.addEventListener("onChange", defectVersionChange);
defectVersionDropdown.display("defectVersionDiv");
}
}
var workspaceOid = '__WORKSPACE_OID__'; if (workspaceOid.toString().match(/__/)) { workspaceOid = XXX; }
var projectOid = '__PROJECT_OID__'; if (projectOid.toString().match(/__/)) { projectOid = XXX; }
rallyDataSource = new rally.sdk.data.RallyDataSource( workspaceOid,
projectOid,
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
initDefectVersionDropdown();
renderPage();
}
}
function getDataAndShow() {
var defectChart = new DefectChart();
defectChart.display();
}
function loadRally() {
rally.addOnLoad(getDataAndShow);
}
loadRally();
</script>
</head>
<body>
<div id="defectVersionDiv"></div>
</body>
</html>
Destroying the old one creating and displaying a new one is the correct way to do this. This is a common pattern when developing apps using the App SDK. If you provide a code snipped along with the dojo error you are getting the community can probably be of better assistance.

datepicker JQuery Validations and Format

I am using the following for datepicker in Jquery to format the date display in dd/mm/yy format and also I want the user not to select future date.Only one thing is working at a time.
<script type="text/javascript" language ="javascript" >
$(function () {
var date = new Date();
var currentDate = date.getDate();
var currentMonth = date.getMonth();
var currentYear = date.getFullYear();
$(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
$(".datepicker").datepicker({ maxDate: new Date(currentYear, currentMonth, currentDate) });
});
</script>
How do make, both the dateformat and disable the future dates to work simultaneously. I am missing single bit, I don't know how to club this two validations or requirements togather.
Any answers Please?
Thank you.
I had a similar requirement for my code with a hire date. Here's how I did it:
$('#hireDate').datepicker({
dateFormat: 'dd/mm/yy',
maxDate: new Date(currentYear, currentMonth, currentDay)
});
The user can still enter a future date manually and weasel around your date picker. We had this problem on a production system.
If you want to additionally validate the date using the validation plugin, try this:
/**
* Requires Datepicker and Validator
*
* Params:
* 0...dateformat. see datepicker
* 1...date. Value "0" is "today"
* 2...(optional). date to display. will be automatically filled if 0 and 1 are set.
* usage:
* myfield: { maxDate: ['m/d/yy', 0] }
*/
jQuery.validator.addMethod("maxDate",
function(value, element, params) {
if (!params[0])
throw 'params missing dateFormat';
if (typeof(params[1]) == 'undefined' )
throw 'params missing maxDate';
var dateFormat = params[0];
var maxDate = params[1];
if (maxDate == 0) {
maxDate = new Date();
maxDate.setHours(0); // make it 00:00:0
maxDate.setMinutes(0);
maxDate.setSeconds(0);
maxDate.setMilliseconds(0);
}
if (typeof(params[2]) == 'undefined' )
params[2] = $.datepicker.formatDate(dateFormat, maxDate);
try {
var valueAsDate = $.datepicker.parseDate( dateFormat, value )
return (valueAsDate < maxDate);
} catch (x) {
return false;
}
},'Must be greater than {2}.');
$("#myform").validate({
rules: {
datepicker : {
maxDate ['m/d/yy', 0]
}
}
});
HTML:
<input name="datepicker" class="datepicker" type="text"/>

Resources