From 7170e8b89a50ea7ad655cf876e2bd17738e4d50b Mon Sep 17 00:00:00 2001
From: longbill <longbill.cn@gmail.com>
Date: Mon, 15 Feb 2016 16:04:07 +0800
Subject: [PATCH 1/5] add custom
---
custom.html | 49 +++++++++++++++++++++++++++++++++++++++
jquery.daterangepicker.js | 32 ++++++++++++++++++++++++-
package.json | 19 +++++++++++++++
3 files changed, 99 insertions(+), 1 deletion(-)
create mode 100644 custom.html
create mode 100644 package.json
diff --git a/custom.html b/custom.html
new file mode 100644
index 0000000..4e0faa5
--- /dev/null
+++ b/custom.html
@@ -0,0 +1,49 @@
+<!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: <input name="range" type="text" id="date-range" size="50" value="2016-02-02 to 2016-03-24"> <br>
+ <input type="submit" value="submit">
+</form>
+<script>
+$(function()
+{
+ $('#date-range').dateRangePicker(
+ {
+ // the valueFormat option is the value format that will be post to your server
+ // if you set the default date range value to the input dom, use this format
+ valueFormat: 'YYYY-MM-DD',
+
+ // the format option should be set to the displaying format
+ format: 'MMMM Do YYYY'
+ });
+});
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/jquery.daterangepicker.js b/jquery.daterangepicker.js
index 83faf76..0257090 100755
--- a/jquery.daterangepicker.js
+++ b/jquery.daterangepicker.js
@@ -576,7 +576,8 @@
return moment(date).format('w');
},
customOpenAnimation: null,
- customCloseAnimation: null
+ customCloseAnimation: null,
+ valueFormat: null
},opt);
opt.start = false;
@@ -608,6 +609,35 @@
var selfDom = $(self).get(0);
var domChangeTimer;
+
+ if (opt.valueFormat)
+ {
+ var valueDom = $(this).clone().removeAttr('id').css('display','none').get(0);
+ if ($(this).val())
+ {
+ var dates = $(this).val().split(opt.separator);
+ if (dates.length == 2)
+ {
+ var d1 = moment(dates[0], opt.valueFormat);
+ var d2 = moment(dates[1], opt.valueFormat);
+ var r1 = d1.format(opt.format);
+ var r2 = d2.format(opt.format);
+ $(this).val(r1+opt.separator+r2);
+ }
+ }
+ $(selfDom).removeAttr('name');
+ $(this).after(valueDom);
+ var oldSetValue = opt.setValue;
+ opt.setValue = function(s)
+ {
+ oldSetValue.call(selfDom, s);
+ var r1 = moment(new Date(opt.start)).format(opt.valueFormat);
+ var r2 = moment(new Date(opt.end)).format(opt.valueFormat);
+ $(valueDom).val(r1+opt.separator+r2);
+ };
+ }
+
+
$(this).unbind('.datepicker').bind('click.datepicker',function(evt)
{
var isOpen = box.is(':visible');
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d49dc0b
--- /dev/null
+++ b/package.json
@@ -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"
+}
From 7623d6aa374c0fde67644c73e9257348841dc470 Mon Sep 17 00:00:00 2001
From: longbill <longbill.cn@gmail.com>
Date: Sun, 21 Feb 2016 00:46:17 +0800
Subject: [PATCH 2/5] work with two inputs
---
custom.html | 20 +++---
jquery.daterangepicker.js | 128 +++++++++++++++++++++++++++++---------
2 files changed, 110 insertions(+), 38 deletions(-)
diff --git a/custom.html b/custom.html
index 4e0faa5..c95f4df 100644
--- a/custom.html
+++ b/custom.html
@@ -28,22 +28,28 @@
<body>
plese check the source code of this page to see instructions.
<form action="custom.html" method="get">
- date range: <input name="range" type="text" id="date-range" size="50" value="2016-02-02 to 2016-03-24"> <br>
+ 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>
+ <br>
<input type="submit" value="submit">
</form>
<script>
$(function()
{
- $('#date-range').dateRangePicker(
+ $('#two-inputs').customDateRangePicker(
{
- // the valueFormat option is the value format that will be post to your server
- // if you set the default date range value to the input dom, use this format
- valueFormat: 'YYYY-MM-DD',
+ //the value format
+ format: 'YYYY-MM-DD',
- // the format option should be set to the displaying format
- format: 'MMMM Do YYYY'
+ //the display format
+ displayFormat: 'MMMM Do YYYY'
});
});
+
</script>
</body>
</html>
\ No newline at end of file
diff --git a/jquery.daterangepicker.js b/jquery.daterangepicker.js
index 0257090..784ff9d 100755
--- a/jquery.daterangepicker.js
+++ b/jquery.daterangepicker.js
@@ -513,6 +513,102 @@
}
};
+ $.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()
+ {
+ var offset = $(self).offset();
+ $(overlay).css(
+ {
+ position: 'absolute',
+ left: offset.left,
+ top: offset.top,
+ 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 = {};
@@ -576,8 +672,7 @@
return moment(date).format('w');
},
customOpenAnimation: null,
- customCloseAnimation: null,
- valueFormat: null
+ customCloseAnimation: null
},opt);
opt.start = false;
@@ -609,35 +704,6 @@
var selfDom = $(self).get(0);
var domChangeTimer;
-
- if (opt.valueFormat)
- {
- var valueDom = $(this).clone().removeAttr('id').css('display','none').get(0);
- if ($(this).val())
- {
- var dates = $(this).val().split(opt.separator);
- if (dates.length == 2)
- {
- var d1 = moment(dates[0], opt.valueFormat);
- var d2 = moment(dates[1], opt.valueFormat);
- var r1 = d1.format(opt.format);
- var r2 = d2.format(opt.format);
- $(this).val(r1+opt.separator+r2);
- }
- }
- $(selfDom).removeAttr('name');
- $(this).after(valueDom);
- var oldSetValue = opt.setValue;
- opt.setValue = function(s)
- {
- oldSetValue.call(selfDom, s);
- var r1 = moment(new Date(opt.start)).format(opt.valueFormat);
- var r2 = moment(new Date(opt.end)).format(opt.valueFormat);
- $(valueDom).val(r1+opt.separator+r2);
- };
- }
-
-
$(this).unbind('.datepicker').bind('click.datepicker',function(evt)
{
var isOpen = box.is(':visible');
From 5530ff02de60896311ac7d347b3809dd7c7a3a43 Mon Sep 17 00:00:00 2001
From: longbill <longbill.cn@gmail.com>
Date: Sun, 21 Feb 2016 00:52:35 +0800
Subject: [PATCH 3/5] enable autoWidth
---
custom.html | 5 ++++-
daterangepicker.css | 17 +++++++++--------
jquery.daterangepicker.js | 22 +++++++++++++++-------
3 files changed, 28 insertions(+), 16 deletions(-)
diff --git a/custom.html b/custom.html
index c95f4df..c311b01 100644
--- a/custom.html
+++ b/custom.html
@@ -46,7 +46,10 @@
format: 'YYYY-MM-DD',
//the display format
- displayFormat: 'MMMM Do YYYY'
+ displayFormat: 'MMMM Do YYYY',
+
+ autoWidth: false,
+ singleMonth: false
});
});
diff --git a/daterangepicker.css b/daterangepicker.css
index fc7076f..46656ef 100755
--- a/daterangepicker.css
+++ b/daterangepicker.css
@@ -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
{
diff --git a/jquery.daterangepicker.js b/jquery.daterangepicker.js
index 784ff9d..9e454ac 100755
--- a/jquery.daterangepicker.js
+++ b/jquery.daterangepicker.js
@@ -672,7 +672,8 @@
return moment(date).format('w');
},
customOpenAnimation: null,
- customCloseAnimation: null
+ customCloseAnimation: null,
+ autoWidth: true
},opt);
opt.start = false;
@@ -1190,12 +1191,19 @@
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);
+ }
+ else
+ {
+ box.find('.month-wrapper').width(415);
+ }
}
function renderTime (name, date) {
From 47d9f77747ae19cebcf85c46bde0cb09d7e27d22 Mon Sep 17 00:00:00 2001
From: longbill <longbill.cn@gmail.com>
Date: Sun, 21 Feb 2016 00:59:29 +0800
Subject: [PATCH 4/5] fix issue
---
jquery.daterangepicker.js | 4 ----
1 file changed, 4 deletions(-)
diff --git a/jquery.daterangepicker.js b/jquery.daterangepicker.js
index 9e454ac..5cd58de 100755
--- a/jquery.daterangepicker.js
+++ b/jquery.daterangepicker.js
@@ -1200,10 +1200,6 @@
var w3 = box.find('.month2').width();
box.find('.month-wrapper').width(w1 + w2 + w3);
}
- else
- {
- box.find('.month-wrapper').width(415);
- }
}
function renderTime (name, date) {
From c13298a820c3dcda63f86ba13e5fe7cbe026083e Mon Sep 17 00:00:00 2001
From: longbill <longbill.cn@gmail.com>
Date: Mon, 29 Feb 2016 12:12:42 +0800
Subject: [PATCH 5/5] fix position bug
---
custom.html | 18 ++++++++++++++++++
jquery.daterangepicker.js | 5 ++---
2 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/custom.html b/custom.html
index c311b01..fe60967 100644
--- a/custom.html
+++ b/custom.html
@@ -34,6 +34,12 @@
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>
@@ -51,6 +57,18 @@
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>
diff --git a/jquery.daterangepicker.js b/jquery.daterangepicker.js
index 5cd58de..c0e27de 100755
--- a/jquery.daterangepicker.js
+++ b/jquery.daterangepicker.js
@@ -577,12 +577,11 @@
function calcPosition()
{
- var offset = $(self).offset();
$(overlay).css(
{
position: 'absolute',
- left: offset.left,
- top: offset.top,
+ left: self.offsetLeft,
+ top: self.offsetTop,
zIndex:0
});
}