效果图
- 日期选择器
- 年月选择器
- 年选择器
代码
<select id="date" onchange="dateShow(this)">
<option value="date">日</option>
<option value="month">月</option>
<option value="year">年</option>
</select>
<span id="LayuiShowDateSpan">
<input id="LayuiShowDate" type="text" class="layui-input"></input>
</span>
<script>
var laydate;
layui.use('laydate', function() {
laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem : '#LayuiShowDate' //指定元素
,
btns : [ 'now', 'confirm' ],
theme : 'molv',
calendar : true,
max : 0,
min : '2015-01-01',
value : new Date,
isInitValue : true,
trigger : 'click'
});
});
function dateShow(node) {
var date = $(node).val();
$('#LayuiShowDateSpan')
.html(
"<input id='LayuiShowDate' type='text' class='layui-input'></input>");
console.log(date);
laydate.render({
elem : '#LayuiShowDate' //指定元素
,
btns : [ 'now', 'confirm' ],
theme : 'molv',
calendar : true,
max : 0,
min : '2015-01-01',
value : new Date,
isInitValue : true,
trigger : 'click',
type : date
});
}
</script>