T('datepicker', `
<div class="datepicker">
	<div id="monthLabel">[@ T.monthLabel(ctx) #]</div>
	<div class="dayLabel">
		[# for (var work = new Date('1970-06-01'); work.getDate() < 8; work.setDate(work.getDate()+1)) { #]
			<div class="[@ work.toLocaleString('en',{weekday:'short'}) #]">[@ work.toLocaleString(lang,{weekday:'short'}) #]</div>
		[# } #]	
	</div>
	<div id="monthContainer" ontransitionend="this.innerHTML=T.month(DP.ctx)">[@ T.month(ctx) #]</div>
</div>
`)

T('monthLabel', `
[# 
	var pdis = ctx.min && show.yyyymm() <= min.yyyymm();
	var	ndis = ctx.max && show.yyyymm() >= max.yyyymm(); 
#]
<div class="nav ff c_prev[@ pdis?' disabled':'' #]" onclick="[@ pdis?'':'DP.ynav(-1)' #]"></div>
<div class="nav c_prev[@ pdis?' disabled':'' #]" onclick="[@ pdis?'':'DP.nav(-1)' #]"></div>
<label>[@ show.toLocaleString(lang,{month:'long',year:'numeric'}) #]</label>
<div class="nav c_next[@ ndis?' disabled':'' #]" onclick="[@ ndis?'':'DP.nav(+1)' #]"></div>
<div class="nav ff c_next[@ ndis?' disabled':'' #]" onclick="[@ ndis?'':'DP.ynav(+1)' #]"></div>
`)

T('month', `
<div class="month">
	[#
		var work = new Date(show.setDate(1)); 
		work.setDate(1-(work.getDay()==0?6:work.getDay()-1));
	#]
	[# for (var i = 0; i < 42; i++) { 
		var ext = work.getMonth() != show.getMonth();
		var dis = ext || (ctx.min && work.yyyymmdd() < min.yyyymmdd())||(ctx.max && work.yyyymmdd() > max.yyyymmdd());
		var cur = !ext && current && work.yyyymmdd() == current.yyyymmdd();
		var now = !ext && work.yyyymmdd() == new Date().yyyymmdd();
	#]
		<div class="[@ work.toLocaleString('en',{weekday:'short'}) #][@ dis?' disabled':'' #][@ cur?' current':'' #][@ now?' now':'' #]"
			onclick="[@ dis?'':"DP.ctx.setDate('" + work.yyyymmdd() + "')" #]">[@ ext?'':work.getDate() #]</div>
	[# work.setDate(work.getDate() + 1); } #]
</div>
`)