1.bootstrap datepicker 使用
<div class="row form-group">
<label class="control-label col-md-2">Log Date</label>
<div class="col-md-3">
<div class="input-group input-medium date-picker input-daterange" data-date-format="yyyy-mm-dd">
<input id="ModifyDateStart" name="ModifyDateStart" class="form-control" style="font-size: 13px;" type="text" value="">
<span class="input-group-addon">~</span>
<input id="ModifyDateEnd" name="ModifyDateEnd" class="form-control" style="font-size: 13px;" type="text" value="">
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".date-picker").datepicker({
language: "zh-EN",
//autoclose: true,//选中之后自动隐藏日期选择框
//clearBtn: true,//清除按钮
format: "yyyy-mm-dd"//日期格式
});
});
</script>
2.bootstrap datetimepicker的使用
<label class="control-label col-md-2">Access Time</label>
<div class="col-md-4">
<div class="input-group input-medium">
<input id="AccessTimeStart" name="AccessTimeStart" class="form-control" style="font-size: 13px;" type="text" value="">
<span class="input-group-addon">~</span>
<input id="AccessTimeEnd" name="AccessTimeEnd" class="form-control" style="font-size: 13px;" type="text" value="">
</div>
</div>
<script type="text/javascript">
$(function () {
setTwoDateTimePicker('#AccessTimeStart', '#AccessTimeEnd');
bandDatapicker();
});
function bandDatapicker() {
debugger;
batchSetDateTimePicker(".date-picker", "YYYY-MM-DD HH:mm", null, moment());
};
//将两个输入框设置为日期时间段控件
function setTwoDateTimePicker(beginId, endId, dateFormat) {
var newDateFormat = dateFormat || 'YYYY-MM-DD HH:mm';
$(beginId).datetimepicker({
format: newDateFormat,
});
$(endId).datetimepicker({
format: newDateFormat,
useCurrent: false
});
$(beginId).on("dp.change", function (e) {
var value = e.date ? convertToMoment(e.date, newDateFormat) : false;
$(endId).data("DateTimePicker").minDate(value);
});
$(endId).on("dp.change", function (e) {
var value = e.date ? convertToMoment(e.date, newDateFormat) : false;
$(beginId).data("DateTimePicker").maxDate(value);
});
}
//批量将输入框设置为日期时间控件,批量的时候必须遍历单独设置,否则最大最小值会无效
function batchSetDateTimePicker(id, dateFormat, minDate, maxDate, changeFunc) {
$(id).each(function (index, element) {
value = $(element).val();
setDateTimePicker(element, dateFormat, minDate, maxDate, value, changeFunc);
});
}
//将输入框设置为日期时间控件
function setDateTimePicker(id, dateFormat, minDate, maxDate, defaultValue, changeFunc) {
var newDateFormat = dateFormat || 'YYYY-MM-DD';
$(id).datetimepicker({
format: newDateFormat,
// useCurrent: false
});
if (minDate) {
var value = convertToMoment(minDate, newDateFormat);
$(id).data("DateTimePicker").minDate(value);
}
if (maxDate) {
var value = convertToMoment(maxDate, newDateFormat);
$(id).data("DateTimePicker").maxDate(value);
}
//赋初始值,否则当设置了最大最小值时可能会将当天日期赋给输入框
if (defaultValue) {
var value = convertToMoment(defaultValue, newDateFormat);
$(id).data("DateTimePicker").date(value);
} else {
$(id).data("DateTimePicker").date(null);
}
if (changeFunc) {
$(id).on("dp.change", changeFunc);
}
}
//将日期时间字符串或者moment对象按照指定格式转换为新的moment对象
function convertToMoment(datetime, dateFormat) {
if (!datetime) { return null; }
if (moment.isMoment(datetime)) {
return moment(datetime.format(dateFormat), dateFormat);
} else {
return moment(datetime, dateFormat);
}
}
</script>