我想在一个月内选择整行。
让我解释一下我的任务。
例如:2017年8月星期二开始,我想在文本框中显示星期二到星期六的日期。
如果用户选择2017年8月28日,则意味着我想在文本框中仅显示周日至周四的日期。同样,我希望每个月都能获得结果。
我在这里创造了小提琴 Click here to see the fiddle
var firstDate = moment(value, "DD-MM-YYYY").day(0).format("DD-MM-YYYY");
var lastDate = moment(value, "DD-MM-YYYY").day(6).format("DD-MM-YYYY");
我不知道该怎么做。任何人都可以告诉我这是否有可能实现这一目标,并提供一些实现这一目标的技巧。
谢谢
vinoth
答案 0 :(得分:1)
试用此代码
比较first date of row
与month first date
&& last date of row
与month last date
。
$('#weeklyDatePicker').on('dp.change', function (e) {
var _year=e.date.year(),
_month=e.date.month(),
_date=e.date.date(),
_day=e.date.day(),
monthFirstDate = new Date(_year, _month, 1),
monthLastDate = new Date(_year, _month + 1, 0),
firstDate = new Date(_year, _month, _date - _day),
lastDate = new Date(_year, _month, _date - _day + 6),
fromDate=(firstDate<=monthFirstDate)?monthFirstDate:firstDate,
toDate=(lastDate>=monthLastDate)?monthLastDate:lastDate,
fromDateFormated=moment(fromDate).format("DD-MM-YYYY"),
toDateFormated=moment(toDate).format("DD-MM-YYYY");
$("#weeklyDatePicker").val(fromDateFormated);
$("#weeklyDatePickerend").val(toDateFormated);
});
$(document).ready(function(){
$("#weeklyDatePicker").datetimepicker({
format: 'DD-MM-YYYY',
});
$('#weeklyDatePicker').on('dp.change', function (e) {
var _year=e.date.year(),
_month=e.date.month(),
_date=e.date.date(),
_day=e.date.day(),
monthFirstDate = new Date(_year, _month, 1),
monthLastDate = new Date(_year, _month + 1, 0),
firstDate = new Date(_year, _month, _date - _day),
lastDate = new Date(_year, _month, _date - _day + 6),
fromDate=(firstDate<=monthFirstDate)?monthFirstDate:firstDate,
toDate=(lastDate>=monthLastDate)?monthLastDate:lastDate,
fromDateFormated=moment(fromDate).format("DD-MM-YYYY"),
toDateFormated=moment(toDate).format("DD-MM-YYYY");
$("#weeklyDatePicker").val(fromDateFormated);
$("#weeklyDatePickerend").val(toDateFormated);
});
});
&#13;
.bootstrap-datetimepicker-widget tr:hover {
background-color: #0d75b3;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6 form-group">
<div class="input-group" id="DateDemo">
From Date:<input type='text' id='weeklyDatePicker' placeholder="Select Week" />
<br>
To Date:<input type='text' id='weeklyDatePickerend' placeholder="Select Week" />
</div>
</div>
</div>
</div>
&#13;