Html:
<div class="layui-col-md4">
<label class="layui-form-label" translate="operation_time"></label>
<div class="layui-input-block" id="monthDate">
<input type="text" class="layui-input" id="operationTime" name="operationTime" ng-model="data_model.operationTime" autocomplete="off" placeholder="yyyy-MM-dd" readonly="readonly">
</div>
</div>
在事件触发后根据不同的情况渲染调用不同的渲染方式
事件触发:
// 删除重建input元素,因为laydate.render只能渲染一次
var cloneTime = $("#operationTime").clone(); //由于id的唯一性,最好克隆class名称
cloneTime.removeAttr("lay-key"); //注意这里要给克隆的元素添加
$("#operationTime").remove(); //删除原本的input元素
$("#monthDate").append(cloneTime);
$scope.setDateTime();
两种渲染方式:
$scope.setDateTime = function () {
if($scope.data_model.statisticalId == "month"){
initDateTime();
var data = $scope.data_model.operationTime;
$scope.data_model.operationTime = data.substr(0,7);
layui.use('form', function () {
var form = layui.form;
var laydate = layui.laydate;
form.render();
//常规用法
laydate.render({
elem: '#operationTime',
value: $scope.data_model.operationTime,
format: 'yyyy-MM',
type: 'month',
max: -1,
btns: ['confirm'],
// 点击年不关闭,点击月份,控件关闭,无需点击确认
change: function (value, date, endDate) { //监听日期被切换
lay('#operationTime').val(value);
$scope.data_model.operationTime = value;
$('.laydate-month-list').on('click','li',function () {//利用的事件委托
$('.layui-laydate').remove()
})
}
});
});
};
if($scope.data_model.statisticalId == "day" || $scope.data_model.statisticalId == ""){
initDateTime();
layui.use('form', function () {
var form = layui.form;
var laydate = layui.laydate;
form.render();
//常规用法
laydate.render({
elem: '#operationTime',
value: $scope.data_model.operationTime,
format: 'yyyy-MM-dd',
max: -1,
btns: ['confirm'],
done: function (value) {
console.log("hello: "+ value);
$scope.data_model.operationTime = value;
}
});
});
};