How to set up brush extent in d3 js while using time scale?

How to set up brush extent in d3 js while using time scale?

I have a problem with brushing using brush.extent([val1, val2])
Regarding documentation: https://github.com/mbostock/d3/wiki/SVG-Controls
when I set up brush.extent like this:
var xScale = d3.scale.linear()
.domain(data)
.range([0, 500]);
var brush = d3.svg.brush()
.x(xScale)
.on('brushstart', function() {
this.brushStart();
})
.on('brushend', function() {
this.brushEnd();
})
.extent([100, 300]);
It will display brushed area from 100 to 200 on xAxis (brush is visible
and on right position).
Unfortunately when I'm using d3.time.scale() it doesn't work at all:
var xScale = d3.time.scale()
.domain(data)
.range([0, 500]);
var brush = d3.svg.brush()
.x(xScale)
.on('brushstart', function() {
this.brushStart();
})
.on('brushend', function() {
this.brushEnd();
})
.extent([100, 300]);
// or
// .extent(['2013-08-01T00:00:00Z', '2013-08-10T23:59:59Z']);
// or
// .extent(['2013-08-01 00:00:00', '2013-08-10 23:59:59']);
// or even
// .extent([new Date(2013, 8, 1, 00, 00, 00), new Date(2013, 8, 10,
23, 59, 59)]);
It does not display brushed area.
How to set brushed area when I'm using d3.tim.scale()?
Of course data contain date ranges which can fit brushed are even with
margins.
Mariusz