<div id="fdatetime" class="page out" data-title="日期时间">
	<div class="page-content" id="fdatetime_content">
		<div class="datetime-items">	
			<div id="fdatetime-header"></div>
			<div id="fdatetime-form"></div>
			<div id="fdatetime-date"></div>
			<div id="fdatetime-time"></div>
			<div id="fdatetime-datetime"></div>
			<div id="fdatetime-datetime-readonly"></div>
			<div id="fdatetime-fbutton"></div>
		</div>
	</div>
</div>
<script>
require(["NavHeader", "Form", "FDateTime", "FButton", "mUtil"], function(NavHeader, Form, FDateTime, FButton, mUtil) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";
	if(!hasClsPicker) {
		new NavHeader({
			el: "fdatetime-header",
			option: {
				title:"表单-日期时间", 
				smallTitle:"fdatetime"
			}
		}).render();
		new FButton({
			el: "fdatetime-fbutton",
			container: "#fdatetime",
			option: {
				form : "fdatetime-form",
				btns : [
					{
						text : "重置",
						action : "reset"
					},
					{
						text : "提交",
						action : "submit",
						callback : function(billid) {
							console.log(billid);
						},
						remindMsg : "操作成功"
					}
				],
				fixed : true
			}
		}).render();
	}
	new Form({
		el: "fdatetime-form",
		option: {
			submit : {
				action : "/mobilemode/mobile/demo/plugin/Form/formAction.jsp",//提交地址
				validate : function(){
					//表单提交前验证脚本
				}
			}
		}
	}).render();
	
	new FDateTime({
		el: "fdatetime-date",
		option: {
			form : "fdatetime-form",
			field : {
				label : "日期",//显示名
				name : "f2",//字段名
				type : "date",//字段类型
			},
			yearOffest : {//年份偏移
				prev: 1,
				next: 1
			},
			required: true
		}
	}).render().then(function(){
		if (!hasClsPicker) return;

		_u.vetically(".datetime-items");

		clsPicker.golalSetting({
			container: ".datetime-items",
			type: "Datetime"
		});

		new clsPicker({
			selector: ".wev-field",
			text: ".wev-field",
			lineYSkew: -80,
			skew: [4,0],
			position: "bottom right"
		});
		new clsPicker({
			selector: ".wev-field>div:nth-child(1)",
			text: ".wev-field>div:nth-child(1)",
			lineYSkew: -30,
			skew: [6,2],
			position: "bottom right"
		});
		new clsPicker({
			selector: ".wev-field>div:nth-child(2)",
			text: ".wev-field>div:nth-child(2)",
			lineYSkew: -100,
			skew: [8,2],
			position: "bottom right"
		});
	});
	
	new FDateTime({
		el: "fdatetime-time",
		option: {
			form : "fdatetime-form",
			field : {
				label : "时间",//显示名
				name : "f3",//字段名
				type : "time",//字段类型
			}
		}
	}).render();
	
	new FDateTime({
		el: "fdatetime-datetime",
		option: {
			form : "fdatetime-form",
			field : {
				label : "日期时间",//显示名
				name : "f4",//字段名
				type : "datetime",//字段类型
				value: ""
			},
			yearOffest : {//年份偏移
				prev: 5,
				next: 5
			}
		}
	}).render();
	
	new FDateTime({
		el: "fdatetime-datetime-readonly",
		option: {
			form : "fdatetime-form",
			field : {
				label : "日期时间",//显示名
				name : "f5",//字段名
				type : "datetime",//字段类型
				value: "2018-01-23 15:02"
			},
			yearOffest : {//年份偏移
				prev: 5,
				next: 5
			},
			required: true,
			readonly: true
		}
	}).render();
	mUtil.trigger('load');//页面渲染完成回调
});
</script>