Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Small mechanism to flip end and last dates during selection #402

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Small mechanism to flip end and last dates during selection #402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7170e8b
add custom
longbill Feb 15, 2016
7623d6a
work with two inputs
longbill Feb 20, 2016
5530ff0
enable autoWidth
longbill Feb 20, 2016
47d9f77
fix issue
longbill Feb 20, 2016
c13298a
fix position bug
longbill Feb 29, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 76 additions & 0 deletions custom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Date Picker Demo</title>
<link rel="stylesheet" href="daterangepicker.css" />
<script src="jquery-1.11.2.min.js"></script>
<script src="moment.min.js"></script>
<script src="jquery.daterangepicker.js"></script>
<style>
#wrapper
{
width:800px;
margin:0 auto;
color:#333;
font-family:Tahoma;
line-height:1.5;
font-size:14px;
}
.demo { margin:30px 0;}
.date-picker-wrapper .month-wrapper table .day.lalala { background-color:orange; }
.options { display:none; border-left:6px solid #8ae; padding:10px; font-size:12px; line-height:1.4; background-color:#eee; border-radius:4px;}
.date-picker-wrapper.date-range-picker19 .day.first-date-selected { background-color: red !important; }
.date-picker-wrapper.date-range-picker19 .day.last-date-selected { background-color: orange !important; }
</style>
</head>
<body>
plese check the source code of this page to see instructions.
<form action="custom.html" method="get">
date range:
<span id="two-inputs">
<input name="date-from" type="text" size="50" value="2016-02-02">
to
<input name="date-to" type="text" size="50" value="2016-02-21">
</span>

<div id="two-inputs-2" style="position:absolute; right:0; top:0;">
<input name="date-from2" type="text" size="50" value="2016-02-02">
to
<input name="date-to2" type="text" size="50" value="2016-02-21">
</div>
<br>
<input type="submit" value="submit">
</form>
<script>
$(function()
{
$('#two-inputs').customDateRangePicker(
{
//the value format
format: 'YYYY-MM-DD',

//the display format
displayFormat: 'MMMM Do YYYY',

autoWidth: false,
singleMonth: false
});

$('#two-inputs-2').customDateRangePicker(
{
//the value format
format: 'YYYY-MM-DD',

//the display format
displayFormat: 'MMMM Do YYYY',

autoWidth: false,
singleMonth: false
});
});

</script>
</body>
</html>
17 changes: 9 additions & 8 deletions daterangepicker.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,15 @@
text-transform: uppercase;
}
.date-picker-wrapper .month-wrapper
{
border:1px solid #bfbfbf;
border-radius:3px;
background-color:#fff;
padding:5px;
cursor:default;
position:relative;
_overflow:hidden;
{
border:1px solid #bfbfbf;
border-radius:3px;
background-color:#fff;
padding:5px;
cursor:default;
position:relative;
_overflow:hidden;
width: 415px;
}
.date-picker-wrapper .month-wrapper table
{
Expand Down
113 changes: 106 additions & 7 deletions jquery.daterangepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -513,6 +513,101 @@
}
};

$.fn.customDateRangePicker = function(options)
{
if (!options) options = {};
options = $.extend(true,
{
displayFormat: 'YYYY-MM-DD',
autoClose: false,
format: 'YYYY-MM-DD',
separator: ' to ',
language: 'auto',
startOfWeek: 'sunday',// or monday
startDate: false,
endDate: false,
time: { enabled: false },
minDays: 0,
maxDays: 0,
showShortcuts: false,
shortcuts:{},
customShortcuts : [],
inline:false,
container:'body',
alwaysOpen:false,
singleDate:false,
lookBehind: false,
batchMode: false,
duration: 200,
stickyMonths: false,
dayDivAttrs: [],
dayTdAttrs: [],
selectForward: false,
selectBackward: false,
applyBtnClass: '',
singleMonth: 'auto',
showTopbar: true,
swapTime: false,
showWeekNumbers: false
},options);

var container = this;
$(container).find('input').each(function()
{
var style = window.getComputedStyle(this);
var overlay = $('<span></span>').attr('style', style.cssText).appendTo(this.offsetParent);

$(this).css(
{
position: 'relative',
zIndex:1,
opacity: 0
}).bind('updated', function()
{
transformDisplayValue();
});
var self = this;
transformDisplayValue();
function transformDisplayValue()
{
var d = $(self).val();
var v = d ? moment(d, options.format).format(options.displayFormat) : '';
$(overlay).html( v );
}

function calcPosition()
{
$(overlay).css(
{
position: 'absolute',
left: self.offsetLeft,
top: self.offsetTop,
zIndex:0
});
}
calcPosition();
$(window).bind('resize', calcPosition);
});

options.getValue = function()
{
var d1 = $(container).find('input').eq(0).val();
var d2 = $(container).find('input').eq(1).val();
if ( d1 && d2 )
return d1 + ' to ' + d2;
else
return '';
};

options.setValue = function(s,s1,s2)
{
$(container).find('input').eq(0).val(s1).trigger('updated');
$(container).find('input').eq(1).val(s2).trigger('updated');
};

return $(container).dateRangePicker(options);
};

$.fn.dateRangePicker = function(opt)
{
if (!opt) opt = {};
Expand Down Expand Up @@ -576,7 +671,8 @@
return moment(date).format('w');
},
customOpenAnimation: null,
customCloseAnimation: null
customCloseAnimation: null,
autoWidth: true
},opt);

opt.start = false;
Expand Down Expand Up @@ -1094,12 +1190,15 @@

function updateCalendarWidth()
{
var gapMargin = box.find('.gap').css('margin-left');
if (gapMargin) gapMargin = parseInt(gapMargin);
var w1 = box.find('.month1').width();
var w2 = box.find('.gap').width() + ( gapMargin ? gapMargin*2 : 0 );
var w3 = box.find('.month2').width();
box.find('.month-wrapper').width(w1 + w2 + w3);
if (opt.autoWidth)
{
var gapMargin = box.find('.gap').css('margin-left');
if (gapMargin) gapMargin = parseInt(gapMargin);
var w1 = box.find('.month1').width();
var w2 = box.find('.gap').width() + ( gapMargin ? gapMargin*2 : 0 );
var w3 = box.find('.month2').width();
box.find('.month-wrapper').width(w1 + w2 + w3);
}
}

function renderTime (name, date) {
Expand Down
19 changes: 19 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "jquery-date-range-picker",
"version": "0.1.0",
"description": "jQuery Date Range Picker is a jQuery plugin that allows user to select a date range.",
"main": "jquery.daterangepicker.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/longbill/jquery-date-range-picker.git"
},
"author": "Chunlong",
"license": "MIT",
"bugs": {
"url": "https://github.com/longbill/jquery-date-range-picker/issues"
},
"homepage": "https://github.com/longbill/jquery-date-range-picker"
}