<commit_before><!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Extension Date et DateTimeFormat</title>
<!-- Version M2021-01-07 new chronos
	M2020-12-28 back to scripts
	M2020-12-15 all routines in a separate file
	M2020-12-09 page adapted to ES modules
	M2020-12-05 install package in subdirectories
	M2020-11-29 Modify layout, suppress AlertMsg
	M2020-11-21 first complete
-->
	
	<meta name="creator" content="<NAME>">
	<meta name="description" content="Test nouveaux packages de dates ">
	<meta name="keywords" content="Unicode calendrier, Unicode calendars">
	<meta name="viewport" content="width=device-width">	

<!-- page environment -->
	<link href="dialsandpanels.css" rel="stylesheet"/>
	<script type="text/javascript" src="chronos.js"></script>
	<script type="text/javascript" src="dateextended.js"></script>
	<script type="text/javascript" src="pldr.js"></script> <!-- must be defined ealier than referring calendars -->
	<script type="text/javascript" src="calendars.js"></script>
	<script type="text/javascript" src="countconversion.js"></script>
	<script type="text/javascript" src="lunar.js"></script>
	<script type="text/javascript" src="seasons.js"></script>
	<script type="text/javascript" src="yearsignature.js"></script>
	<script type="text/javascript" src="calendarclock.js"></script>

	<script type="text/javascript" src="dateextendtest.js"></script>

<style>
	.panel {height: 460px;}
</style>

</head>

<body class="centered">  <!-- "setDateToNow()" with event handler in ES 6 modules environment -->
<section class="centered"><h1 class="panelhead">Extension Date et DateTimeFormat</h1></section>
<div>
	<section class="panel"><h2 class="panelhead">Date, heure, fuseau, navigation</h2>
		<section class="centered"><!-- setting date -->
			<table class="centered">
			  <tr>
				<th><button id="customCalend" class="textline">Calendrier</button></th>
				<th>Année</th>
				<th>Mois</th>
				<th>Quant.</th>
				<th> </th>
			  </tr>
			  <tr>
				<form name="gregorian"> <!-- action set to void(), no method indicated (used to be "post") -->
				<td>iso8601</td>
				<td><input name="year" type="number" class="centered digit4"> </td>
				<td><input name="monthname" type="number" min="1" max="12" class="centered digit2"></td>
				<td><input name="day" type="number" min="1" max="31" class="centered digit2"> </td>
				<td><button class="textline">Ok</button></td>
				</form>
			  </tr>
			  <form name="custom">
			  <tr>
				<td><select name="calend" size="1" class="centered">
					<option value="milesian" selected>milésien</option>
					<option value="julian">julien</option>
					<option value="vatican">Vatican</option>
					<option value="french">France</option>
					<option value="german">Allemagne</option>
					<option value="english">Royaume-Uni</option>
					<option value="frenchrev">Révolutionnaire</option>
					</select></td>
				<td><input name="year" type="number" class="centered digit4"> </td>
				<td><input name="monthname" type="number" min="1" max="13" class="centered digit2"></td>
				<td><input name="day" type="number" min="1" max="31" class="centered digit2"> </td>
				<td><button class="textline">Ok</button></td>
			  </tr>
			  <tr>
				<td colspan="2">Jour de semaine</td>
				<td colspan="2"><input name="dayofweek" type="text" class="centered" size="12" disabled="disabled" /></td>
			  </tr>
			</form>
			</table>
		</section>
		<section class="centered"><!-- date navigation -->
		<form name="control">
		 <table class="centered">
		  <tr>
			<td><button name="now" class="textline" type="button">Maintenant</button></td>
				<th>+/- jours&nbsp;: </th>
				<td><button name="minus" type="button" class="textline symbol">-</button></td>
				<td><input name="shift" type="number" value="1" min="0" step="any" class="centered digit4"></td> 
				<td><button name="plus" type="button" class="textline symbol">+</button></td>
		  </tr>
		 </table>
		</form>
		</section>
		<section class="centered"><!-- setting time by elements -->
		  <form name="time" autocomplete="off">
			<table class="centered">
			  <tr> 
				 <th colspan="5">Heure du fuseau ou du mode</th>
			   </tr>
			   <tr>
				 <td><input name="hours" type="number" min="0" max="23" class="centered digit2">h</td>
				 <td><input name="mins" type="number" min="0" max="59" class="centered digit2">min</td>
				 <td><input name="secs" type="number" min="0" max="59" class="centered digit2">s</td>
				 <td><input name="ms" type="number" min="0" max="999" class="centered digit4">ms</td>
				 <td><button class="textline">Ok</button></td>
			  </tr>
			</table>
		  </form>
		</section>
		<section class="centered"><!-- time navigation -->
		  <form name="timeShift">
			<table class="centered"> 
			  <tr>
				<td>+/- ms</td>
				<td><button name="minus" type="button" class="textline symbol">-</button></td>
				<td><input name="shift" type="number" value="60000" min="1" class="centered char8"></td>
				<td><button name="plus" type="button" class="textline symbol">+</button></td>
			  </tr>
			</table>
		  </form>
		</section>
		<section class="centered autoscroll"><!-- time zone option -->
		  <form name="TZmode" autocomplete="off">
			<table class="centered">
					<tr><th>Mode&nbsp;: </th>
						<td>
							<select name="TZcontrol" size="1" class="centered">
							<option value="UTC">UTC</option>
							<option value="TZ" selected>Fuseau système</option>
		<!--				<option value="Fixed">Décalage fixe</option> -->
							</select></td>
						<td><button class="textline">Ok</button></td>
					</tr>
			</table>
			<table class="centered">
					<tr>
						<th>Décalage réel&nbsp;: </th> 
						<td id="realTZOffset"></td>
					</tr>
			</table>
			<table class="centered">
					<tr>
						<th>Décalage système&nbsp;: </th>
						<td id="sysTZoffset"></td><td>min</td>
					</tr>
			</table>
		  </form>
		</section>
		<section class="centered"><!-- setting preselected time -->
			  <table class="centered">
			  <tr>
				<th>Même date à</th>
				<td><button id="h0" class="textline" type="button">0 h</button></td>
				<td><button id="h12" class="textline" type="button">12 h</button></td>
				<th>UTC</th>
			  </tr>
			 </table>
		</section>
		<section class="centered"><!-- display normalised strings  -->
			<table class="centered">
				<tr><th colspan="2">Chaînes standard</th></tr>
				<tr>
					<th>ISO 8601&nbsp;:</th>
					<td id="ISOdatetime"></td>
				</tr>
				<tr>
					<th>calendrier&nbsp;:</th>
					<td id="dateString"></td>
				</tr>
				<tr>
					<th>Posix&nbsp;:</th>
					<td id="Posixnumber"></td>
				</tr>
			</table>
		</section>
	</section>
	<section class="panel centered autoscroll"><h2 class="panelhead">Options générales</h2>
		<form name="Locale">
			<section class="centered">
				<table class="centered"> 
					<tr>
						<td><button type="reset" class="textline" >Aucune option</button></td>
						<td><button class="textline" >Ok</button></td> <td></td>
					</tr>
				</table>
			</section>
			<section class="centered"><h3 class="panelhead">Résolution des options</h3>
				 <table class="centered">
					<tr><th>Chaîne locale</th><th>Options</th></tr>
					<tr>
						<td><select name="LocaleMatcher" class="centered" size="1">
							<option value="" selected>par défaut</option>
							<option value="lookup">lookup BCP</option>
							<option value="best fit">meilleur choix</option>
							</select></td>
						<td><select name="FormatMatcher" class="centered" size="1">
							<option value="" selected>par défaut</option>
							<option value="basic">choix de base</option>
							<option value="best fit">meilleur choix</option>
							</select></td>
					</tr>
				 </table>	
				 <table class="centered"> 
				   <tr>
					<th>Langue-pays&nbsp;: </th>
					<td><input name="Locale" autocomplete="language" type="text" class="centered" size="30"> </td>
				   </tr>
				   <tr>
					<th>Extension&nbsp;: </th>
					<td><input name="UnicodeExt" type="text" class="centered" size="30"></td>
				   </tr>
				   <tr>
					<td>Résolution&nbsp;: </td><td colspan="3"><input name="Elocale" type="text" disabled="disabled" class="centered" size="30"></td>
				   </tr>
				   <tr>
				   <tr>
					<td>Numération&nbsp;: </td>
					<td><input name="Enum" type="text" disabled="disabled" class="centered"></td>
				   </tr>
					<th>Calendrier&nbsp;: </th>
					<td>
						<select name="Calendar" size="1" class="centered">
						<option value="">par défaut</option>
						<option value="buddhist">bouddhiste Thaï</option>
						<option value="chinese">chinois luni-solaire</option>
						<option value="coptic">copte</option>
						<option value="dangi">coréen traditionnel dangi</option>
						<option value="ethioaa">éthiopien Amete Alem (5493 BC) </option>
						<option value="ethiopic">éthiopien Amete Mihret (8 AD)</option>
						<option value="gregory">grégorien</option>
						<option value="hebrew">hébraïque</option>
						<option value="indian">indien moderne</option>
						<option value="islamic">islamique standard</option>
						<option value="islamic-umalqura">islamique Umm al-Qura</option>
						<option value="islamic-tbla">islamique tabulaire astronomique</option>
						<option value="islamic-civil">islamique tabulaire civil</option>
						<option value="islamic-rgsa">islamique, Arabie saoudite</option>
						<option value="iso8601">ISO 8601 (grégorien normalisé)</option>
						<option value="japanese">japonais impérial</option>
						<option value="persian">persan</option>
						<option value="roc">chinois de république populaire</option>
						</select> 
					</td>
				   </tr>
				   <tr>
					<td>Effectif&nbsp;: </td>
					<td><input name="Ecalend" type="text" disabled="disabled" class="centered"></td>
				   </tr>
					<tr><th>Fuseau horaire&nbsp;: </th>
					<td><input name="TimeZone" type="text" autocomplete="country" class="centered" size="30"> </td>
					</tr>
					<tr><td>Fuseau effectif&nbsp;: </td><td><input name="EtimeZone" type="text" disabled="disabled" class="centered" size="30"></td></tr>
					</table>
			</section>
			<section class="centered"><h3 class="panelhead">Options en styles</h3>
				 <table class="centered">
				  <tr>
					<th></th><th>Style date</th><th>Style heure</th>
				  </tr>
				  <tr>
					<th>Dem.</th>
					<td><select name="DateStyle" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="short">court</option>
						<option value="medium">moyen</option>
						<option value="long">long</option>
						<option value="full">complet</option>
						</select></td>
					<td><select name="TimeStyle" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="short">court</option>
						<option value="medium">moyen</option>
						<option value="long">long</option>
						<option value="full">complet</option>
						</select></td>
				  </tr>
				  <tr>
					<th>Intl</th>
					<td><input class="centered char8" name="EdateStyle" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="EtimeStyle" type="text" disabled="disabled"></td>
				  </tr>
				</table>
			</section>
		</form>
	</section>
	<section class="panel centered autoscroll"><h2 class="panelhead">Options par champ : date</h2>
		<form name="dateOptions">
			<section>
			<table class="centered"> 
				<tr>
					<td><button class="textline" type="reset">Aucune option</button></td>
					<td><button class="textline" >Ok</button></td> <td></td>
				</tr>
			</table>
			</section>
			<section><h3 class="panelhead">Option expérimentale</h3>
				<table class="centered">
					<tr>
						<th>Affichage de l'ère</th>
						<td><select name="eraDisplay" class="centered" size="1">
							<option value="" selected>défaut</option>
							<option value="never">jamais</option>
							<option value="always">toujours</option>
							<option value="auto">auto</option>
						</select></td>
					</tr>
				</table>
			</section>
			<section><h3 class="panelhead">Options standard</h3>
				 <table class="centered">
				  <tr>
					<th></th><th>Quantième</th><th>Mois</th><th>Année</th>
				  </tr>
				  <tr>
					<th>Dem.</th>
					<td><select name="Day" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="numeric">numérique</option>
						<option value="2-digit">2 chiffres</option>
						</select></td>
					<td><select name="Month" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="numeric">numérique</option>
						<option value="2-digit">2 chiffres</option>
						<option value="narrow">étroit</option>
						<option value="short">court</option>
						<option value="long">long</option>
						</select></td>
					<td><select name="Year" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="numeric">numérique</option>
						<option value="2-digit">2 chiffres</option>
						</select></td>
				   </tr>
				  <tr>
					<th>Intl</th>
					<td><input class="centered char8" name="Eday" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="Emonth" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="Eyear" type="text" disabled="disabled"></td>
				  </tr>
				  <tr>
					<th>Ext.</th>
					<td><input class="centered char8" name="Xday" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="Xmonth" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="Xyear" type="text" disabled="disabled"></td>
				  </tr>
				</table>
				<table class="centered">
				  <tr> 
					<th></th><th>Jour semaine</th><th>Ère</th>
				  </tr> 
				  <tr>
					<th>Dem.</th>
					<td><select name="Weekday" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="narrow">étroit</option>
						<option value="short">court</option>
						<option value="long">long</option>
						</select></td>
					<td><select name="Era" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="narrow">étroit</option>
						<option value="short">court</option>
						<option value="long">long</option>
						</select></td>
				  </tr>
				  <tr>
					<th>Intl</th>
					<td><input class="centered char8" name="Eweekday" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="Eera" type="text" disabled="disabled"></td>
				  </tr>	
				  <tr>
					<th>Ext.</th>
					<td><input class="centered char8" name="Xweekday" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="Xera" type="text" disabled="disabled"></td>
				  </tr>	
				</table>
			</section>
		</form>
	</section>
	<section class="panel centered autoscroll"><h2 class="panelhead">Options par champ : heure</h2>
		<form name="timeOptions">
			<table class="centered"> 
				<tr>
					<td><button class="textline" type="reset">Aucune option</button></td>
					<td><button class="textline" >Ok</button></td> <td></td>
				</tr>
			</table>
			<table class="centered">
			  <tr>
				<th></th><th>Heure</th><th>Minute</th><th>Seconde</th>
			  </tr>
			  <tr>
				<th>Dem.</th>
				<td><select name="Hour" class="centered" size="1">
					<option value="" selected>absent</option>
					<option value="numeric">numérique</option>
					<option value="2-digit">2 chiffres</option>
					</select></td>
				<td><select name="Minute" class="centered" size="1">
					<option value="" selected>absent</option>
					<option value="numeric">numérique</option>
					<option value="2-digit">2 chiffres</option>
					</select></td>
				<td><select name="Second" class="centered" size="1">
					<option value="" selected>absent</option>
					<option value="numeric">numérique</option>
					<option value="2-digit">2 chiffres</option>
					</select></td>
			  </tr>
			  <tr>
				<th>Intl</th>
				<td><input class="centered char8" name="Ehour" type="text" disabled="disabled"></td>
				<td><input class="centered char8" name="Eminute" type="text" disabled="disabled"></td>
				<td><input class="centered char8" name="Esecond" type="text" disabled="disabled"></td>
			  </tr>
			  <tr>
				<th>Ext.</th>
				<td><input class="centered char8" name="Xhour" type="text" disabled="disabled"></td>
				<td><input class="centered char8" name="Xminute" type="text" disabled="disabled"></td>
				<td><input class="centered char8" name="Xsecond" type="text" disabled="disabled"></td>
			  </tr>
			</table>
			<table class="centered">
				<tr>
					<th></th><th>Fract. sec.</th><th>Fuseau</th><th>am/pm</th>
				</tr>
				<tr>
					<th>Dem.</th>
					<td><input class="centered digit2" name="Msdigits" type="number" min="0" max="3"></td>
					<td><select name="TimeZoneName" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="short">court</option>
						<option value="long">long</option>
						</select></td>
					<td><select name="AmPm" size="1" class="centered">
						<option value="" selected>absent</option>
						<option value="narrow">étroit</option>
							<option value="short">court</option>
							<option value="long">long</option>
						</select></td>
				</tr>
				<tr>
					<th>Intl</th>
					<td><input class="centered digit2" name="Emsdigits" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="EtimeZoneName" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="EAmPm" type="text" disabled="disabled"></td>
				</tr>
				<tr>
					<th>Ext.</th>
					<td><input class="centered digit2" name="Xmsdigits" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="XtimeZoneName" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="XAmPm" type="text" disabled="disabled"></td>
				</tr>
			</table>
			<table class="centered">
			  <tr> 
				<th></th><th colspan="2">12 h</th><th>Cycle horaire</th>
			  </tr> 
			  <tr>
				<th>Dem.</th>
				<td colspan="2"><select name="Hour12" size="1" class="centered">
					<option value="" selected>défaut</option>
					<option value="true">12 h</option>
					<option value="false">24 h</option>
					</select></td>
				<td><select name="HourCycle" size="1" class="centered">
					<option value="" selected>absent</option>
					<option value="h11">h11</option>
					<option value="h12">h12</option>
					<option value="h23">h23</option>
					<option value="h24">h24</option>
					</select></td>
			  </tr>
			  <tr>
				<th>Intl</th>
				<td>12 h</td>
				<td><input class="centered" name="Ehour12" type="checkbox" disabled="disabled"></td>
				<td><input class="centered char8" name="EhourCycle" type="text" disabled="disabled"></td>
			  </tr>
			  <tr>
				<th>Ext.</th>
				<td>12 h</td>
				<td><input class="centered" name="Xhour12" type="checkbox" disabled="disabled"></td>
				<td><input class="centered char8" name="XhourCycle" type="text" disabled="disabled"></td>
			  </tr>
			</table>
		</form>
	</section>
</div>
<section><h2 class="panelhead">Affichages calculés</h2></section>
<div class="centered autoscroll">
	<section class="outdisplay"><h3 class="panelhead">DateTimeFormat</h3>
		<table class="centered">
			<tr><th>Calendrier&nbsp;:</th><td id="Calendname"></td></tr>
		</table>
	<h4 class="panelhead">Intl standard</h4>
		<table class="centered">
			<tr><td id="Ustring"></td></tr>
		</table>
	<h4 class="panelhead">Intl étendu</h4>
		<table class="centered">
			<tr><td id="Xstring"></td></tr>
		</table>
	</section>
	<section class="outdisplay"><h3 class="panelhead">Calendrier utilisateur</h3>
		<table class="centered">
			<tr><th>Calendrier&nbsp;:</th><td id="Customname"></td></tr>
		</table>
		<h4 class="panelhead">ExtDateTimeFormat</h4>
		<table class="centered">
			<tr><td id="Cstring"></td></tr>
		</table>
	</section>
	<section class="outdisplay"><h3 class="panelhead">Champs supplémentaires</h3>
		<table class="centered"><form name="yeartype">
			<tr><th colspan="2">Année algébrique et type</th></tr>
			<tr><td id="fullyear"></td><td>
				<select name="leapyear" disabled class="centered" size="1">
					<option value="false">commune</option>
					<option value="true">longue</option>
				</select></td>
			</tr>
		</form></table>
		<table class="centered">
			<tr><th colspan="3">Calendrier en semaines</th></tr>
			<tr><th>Année</th><th>Semaine</th><th>Jour</th></tr>
			<tr><td id="weekyear"></td><td id="weeknum"></td><td id="dayownum"></td></tr>
			<tr><th>Jour&nbsp;</th><td colspan="2" id="dayname"></td></tr>
			<tr><th colspan="2">Semaines dans l'année&nbsp;: </th><td id="weeksinyear"></td></tr>
		</table>
	</section>
</div>
<footer class="centered">
 <p>Références&nbsp;: 
	<a target="_blank" href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry">Codes langues Unicode</a>, 
	<a target="_blank" href="http://twiki.org/cgi-bin/xtra/tzdatepick.html">Codes zones horaires</a>
 <br>© 2017-2020 <a href="http://www.calendriermilesien.org">www.calendriermilesien.org</a></p>
</footer>
</body>
</html>
<commit_msg>Insert calendarinstant<commit_after><!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Extension Date et DateTimeFormat</title>
<!-- Version M2021-01-07 new chronos
	M2020-12-28 back to scripts
	M2020-12-15 all routines in a separate file
	M2020-12-09 page adapted to ES modules
	M2020-12-05 install package in subdirectories
	M2020-11-29 Modify layout, suppress AlertMsg
	M2020-11-21 first complete
-->
	
	<meta name="creator" content="<NAME>">
	<meta name="description" content="Test nouveaux packages de dates ">
	<meta name="keywords" content="Unicode calendrier, Unicode calendars">
	<meta name="viewport" content="width=device-width">	

<!-- page environment -->
	<link href="dialsandpanels.css" rel="stylesheet"/>
	<script type="text/javascript" src="chronos.js"></script>
	<script type="text/javascript" src="dateextended.js"></script>
	<script type="text/javascript" src="pldr.js"></script> <!-- must be defined ealier than referring calendars -->
	<script type="text/javascript" src="calendars.js"></script>
	<script type="text/javascript" src="calendarinstant.js"></script>
	<script type="text/javascript" src="countconversion.js"></script>
	<script type="text/javascript" src="lunar.js"></script>
	<script type="text/javascript" src="seasons.js"></script>
	<script type="text/javascript" src="yearsignature.js"></script>
	<script type="text/javascript" src="calendarclock.js"></script>


	<script type="text/javascript" src="dateextendtest.js"></script>

<style>
	.panel {height: 460px;}
</style>

</head>

<body class="centered">  <!-- "setDateToNow()" with event handler in ES 6 modules environment -->
<section class="centered"><h1 class="panelhead">Extension Date et DateTimeFormat</h1></section>
<div>
	<section class="panel"><h2 class="panelhead">Date, heure, fuseau, navigation</h2>
		<section class="centered"><!-- setting date -->
			<table class="centered">
			  <tr>
				<th><button id="customCalend" class="textline">Calendrier</button></th>
				<th>Année</th>
				<th>Mois</th>
				<th>Quant.</th>
				<th> </th>
			  </tr>
			  <tr>
				<form name="gregorian"> <!-- action set to void(), no method indicated (used to be "post") -->
				<td>iso8601</td>
				<td><input name="year" type="number" class="centered digit4"> </td>
				<td><input name="monthname" type="number" min="1" max="12" class="centered digit2"></td>
				<td><input name="day" type="number" min="1" max="31" class="centered digit2"> </td>
				<td><button class="textline">Ok</button></td>
				</form>
			  </tr>
			  <form name="custom">
			  <tr>
				<td><select name="calend" size="1" class="centered">
					<option value="milesian" selected>milésien</option>
					<option value="julian">julien</option>
					<option value="vatican">Vatican</option>
					<option value="french">France</option>
					<option value="german">Allemagne</option>
					<option value="english">Royaume-Uni</option>
					<option value="frenchrev">Révolutionnaire</option>
					</select></td>
				<td><input name="year" type="number" class="centered digit4"> </td>
				<td><input name="monthname" type="number" min="1" max="13" class="centered digit2"></td>
				<td><input name="day" type="number" min="1" max="31" class="centered digit2"> </td>
				<td><button class="textline">Ok</button></td>
			  </tr>
			  <tr>
				<td colspan="2">Jour de semaine</td>
				<td colspan="2"><input name="dayofweek" type="text" class="centered" size="12" disabled="disabled" /></td>
			  </tr>
			</form>
			</table>
		</section>
		<section class="centered"><!-- date navigation -->
		<form name="control">
		 <table class="centered">
		  <tr>
			<td><button name="now" class="textline" type="button">Maintenant</button></td>
				<th>+/- jours&nbsp;: </th>
				<td><button name="minus" type="button" class="textline symbol">-</button></td>
				<td><input name="shift" type="number" value="1" min="0" step="any" class="centered digit4"></td> 
				<td><button name="plus" type="button" class="textline symbol">+</button></td>
		  </tr>
		 </table>
		</form>
		</section>
		<section class="centered"><!-- setting time by elements -->
		  <form name="time" autocomplete="off">
			<table class="centered">
			  <tr> 
				 <th colspan="5">Heure du fuseau ou du mode</th>
			   </tr>
			   <tr>
				 <td><input name="hours" type="number" min="0" max="23" class="centered digit2">h</td>
				 <td><input name="mins" type="number" min="0" max="59" class="centered digit2">min</td>
				 <td><input name="secs" type="number" min="0" max="59" class="centered digit2">s</td>
				 <td><input name="ms" type="number" min="0" max="999" class="centered digit4">ms</td>
				 <td><button class="textline">Ok</button></td>
			  </tr>
			</table>
		  </form>
		</section>
		<section class="centered"><!-- time navigation -->
		  <form name="timeShift">
			<table class="centered"> 
			  <tr>
				<td>+/- ms</td>
				<td><button name="minus" type="button" class="textline symbol">-</button></td>
				<td><input name="shift" type="number" value="60000" min="1" class="centered char8"></td>
				<td><button name="plus" type="button" class="textline symbol">+</button></td>
			  </tr>
			</table>
		  </form>
		</section>
		<section class="centered autoscroll"><!-- time zone option -->
		  <form name="TZmode" autocomplete="off">
			<table class="centered">
					<tr><th>Mode&nbsp;: </th>
						<td>
							<select name="TZcontrol" size="1" class="centered">
							<option value="UTC">UTC</option>
							<option value="TZ" selected>Fuseau système</option>
		<!--				<option value="Fixed">Décalage fixe</option> -->
							</select></td>
						<td><button class="textline">Ok</button></td>
					</tr>
			</table>
			<table class="centered">
					<tr>
						<th>Décalage réel&nbsp;: </th> 
						<td id="realTZOffset"></td>
					</tr>
			</table>
			<table class="centered">
					<tr>
						<th>Décalage système&nbsp;: </th>
						<td id="sysTZoffset"></td><td>min</td>
					</tr>
			</table>
		  </form>
		</section>
		<section class="centered"><!-- setting preselected time -->
			  <table class="centered">
			  <tr>
				<th>Même date à</th>
				<td><button id="h0" class="textline" type="button">0 h</button></td>
				<td><button id="h12" class="textline" type="button">12 h</button></td>
				<th>UTC</th>
			  </tr>
			 </table>
		</section>
		<section class="centered"><!-- display normalised strings  -->
			<table class="centered">
				<tr><th colspan="2">Chaînes standard</th></tr>
				<tr>
					<th>ISO 8601&nbsp;:</th>
					<td id="ISOdatetime"></td>
				</tr>
				<tr>
					<th>calendrier&nbsp;:</th>
					<td id="dateString"></td>
				</tr>
				<tr>
					<th>Posix&nbsp;:</th>
					<td id="Posixnumber"></td>
				</tr>
			</table>
		</section>
	</section>
	<section class="panel centered autoscroll"><h2 class="panelhead">Options générales</h2>
		<form name="Locale">
			<section class="centered">
				<table class="centered"> 
					<tr>
						<td><button type="reset" class="textline" >Aucune option</button></td>
						<td><button class="textline" >Ok</button></td> <td></td>
					</tr>
				</table>
			</section>
			<section class="centered"><h3 class="panelhead">Résolution des options</h3>
				 <table class="centered">
					<tr><th>Chaîne locale</th><th>Options</th></tr>
					<tr>
						<td><select name="LocaleMatcher" class="centered" size="1">
							<option value="" selected>par défaut</option>
							<option value="lookup">lookup BCP</option>
							<option value="best fit">meilleur choix</option>
							</select></td>
						<td><select name="FormatMatcher" class="centered" size="1">
							<option value="" selected>par défaut</option>
							<option value="basic">choix de base</option>
							<option value="best fit">meilleur choix</option>
							</select></td>
					</tr>
				 </table>	
				 <table class="centered"> 
				   <tr>
					<th>Langue-pays&nbsp;: </th>
					<td><input name="Locale" autocomplete="language" type="text" class="centered" size="30"> </td>
				   </tr>
				   <tr>
					<th>Extension&nbsp;: </th>
					<td><input name="UnicodeExt" type="text" class="centered" size="30"></td>
				   </tr>
				   <tr>
					<td>Résolution&nbsp;: </td><td colspan="3"><input name="Elocale" type="text" disabled="disabled" class="centered" size="30"></td>
				   </tr>
				   <tr>
				   <tr>
					<td>Numération&nbsp;: </td>
					<td><input name="Enum" type="text" disabled="disabled" class="centered"></td>
				   </tr>
					<th>Calendrier&nbsp;: </th>
					<td>
						<select name="Calendar" size="1" class="centered">
						<option value="">par défaut</option>
						<option value="buddhist">bouddhiste Thaï</option>
						<option value="chinese">chinois luni-solaire</option>
						<option value="coptic">copte</option>
						<option value="dangi">coréen traditionnel dangi</option>
						<option value="ethioaa">éthiopien A<NAME> (5493 BC) </option>
						<option value="ethiopic">éthiopien Amete Mihret (8 AD)</option>
						<option value="gregory">grégorien</option>
						<option value="hebrew">hébraïque</option>
						<option value="indian">indien moderne</option>
						<option value="islamic">islamique standard</option>
						<option value="islamic-umalqura">islamique Umm al-Qura</option>
						<option value="islamic-tbla">islamique tabulaire astronomique</option>
						<option value="islamic-civil">islamique tabulaire civil</option>
						<option value="islamic-rgsa">islamique, Arabie saoudite</option>
						<option value="iso8601">ISO 8601 (grégorien normalisé)</option>
						<option value="japanese">japonais impérial</option>
						<option value="persian">persan</option>
						<option value="roc">chinois de république populaire</option>
						</select> 
					</td>
				   </tr>
				   <tr>
					<td>Effectif&nbsp;: </td>
					<td><input name="Ecalend" type="text" disabled="disabled" class="centered"></td>
				   </tr>
					<tr><th>Fuseau horaire&nbsp;: </th>
					<td><input name="TimeZone" type="text" autocomplete="country" class="centered" size="30"> </td>
					</tr>
					<tr><td>Fuseau effectif&nbsp;: </td><td><input name="EtimeZone" type="text" disabled="disabled" class="centered" size="30"></td></tr>
					</table>
			</section>
			<section class="centered"><h3 class="panelhead">Options en styles</h3>
				 <table class="centered">
				  <tr>
					<th></th><th>Style date</th><th>Style heure</th>
				  </tr>
				  <tr>
					<th>Dem.</th>
					<td><select name="DateStyle" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="short">court</option>
						<option value="medium">moyen</option>
						<option value="long">long</option>
						<option value="full">complet</option>
						</select></td>
					<td><select name="TimeStyle" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="short">court</option>
						<option value="medium">moyen</option>
						<option value="long">long</option>
						<option value="full">complet</option>
						</select></td>
				  </tr>
				  <tr>
					<th>Intl</th>
					<td><input class="centered char8" name="EdateStyle" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="EtimeStyle" type="text" disabled="disabled"></td>
				  </tr>
				</table>
			</section>
		</form>
	</section>
	<section class="panel centered autoscroll"><h2 class="panelhead">Options par champ : date</h2>
		<form name="dateOptions">
			<section>
			<table class="centered"> 
				<tr>
					<td><button class="textline" type="reset">Aucune option</button></td>
					<td><button class="textline" >Ok</button></td> <td></td>
				</tr>
			</table>
			</section>
			<section><h3 class="panelhead">Option expérimentale</h3>
				<table class="centered">
					<tr>
						<th>Affichage de l'ère</th>
						<td><select name="eraDisplay" class="centered" size="1">
							<option value="" selected>défaut</option>
							<option value="never">jamais</option>
							<option value="always">toujours</option>
							<option value="auto">auto</option>
						</select></td>
					</tr>
				</table>
			</section>
			<section><h3 class="panelhead">Options standard</h3>
				 <table class="centered">
				  <tr>
					<th></th><th>Quantième</th><th>Mois</th><th>Année</th>
				  </tr>
				  <tr>
					<th>Dem.</th>
					<td><select name="Day" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="numeric">numérique</option>
						<option value="2-digit">2 chiffres</option>
						</select></td>
					<td><select name="Month" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="numeric">numérique</option>
						<option value="2-digit">2 chiffres</option>
						<option value="narrow">étroit</option>
						<option value="short">court</option>
						<option value="long">long</option>
						</select></td>
					<td><select name="Year" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="numeric">numérique</option>
						<option value="2-digit">2 chiffres</option>
						</select></td>
				   </tr>
				  <tr>
					<th>Intl</th>
					<td><input class="centered char8" name="Eday" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="Emonth" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="Eyear" type="text" disabled="disabled"></td>
				  </tr>
				  <tr>
					<th>Ext.</th>
					<td><input class="centered char8" name="Xday" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="Xmonth" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="Xyear" type="text" disabled="disabled"></td>
				  </tr>
				</table>
				<table class="centered">
				  <tr> 
					<th></th><th>Jour semaine</th><th>Ère</th>
				  </tr> 
				  <tr>
					<th>Dem.</th>
					<td><select name="Weekday" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="narrow">étroit</option>
						<option value="short">court</option>
						<option value="long">long</option>
						</select></td>
					<td><select name="Era" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="narrow">étroit</option>
						<option value="short">court</option>
						<option value="long">long</option>
						</select></td>
				  </tr>
				  <tr>
					<th>Intl</th>
					<td><input class="centered char8" name="Eweekday" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="Eera" type="text" disabled="disabled"></td>
				  </tr>	
				  <tr>
					<th>Ext.</th>
					<td><input class="centered char8" name="Xweekday" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="Xera" type="text" disabled="disabled"></td>
				  </tr>	
				</table>
			</section>
		</form>
	</section>
	<section class="panel centered autoscroll"><h2 class="panelhead">Options par champ : heure</h2>
		<form name="timeOptions">
			<table class="centered"> 
				<tr>
					<td><button class="textline" type="reset">Aucune option</button></td>
					<td><button class="textline" >Ok</button></td> <td></td>
				</tr>
			</table>
			<table class="centered">
			  <tr>
				<th></th><th>Heure</th><th>Minute</th><th>Seconde</th>
			  </tr>
			  <tr>
				<th>Dem.</th>
				<td><select name="Hour" class="centered" size="1">
					<option value="" selected>absent</option>
					<option value="numeric">numérique</option>
					<option value="2-digit">2 chiffres</option>
					</select></td>
				<td><select name="Minute" class="centered" size="1">
					<option value="" selected>absent</option>
					<option value="numeric">numérique</option>
					<option value="2-digit">2 chiffres</option>
					</select></td>
				<td><select name="Second" class="centered" size="1">
					<option value="" selected>absent</option>
					<option value="numeric">numérique</option>
					<option value="2-digit">2 chiffres</option>
					</select></td>
			  </tr>
			  <tr>
				<th>Intl</th>
				<td><input class="centered char8" name="Ehour" type="text" disabled="disabled"></td>
				<td><input class="centered char8" name="Eminute" type="text" disabled="disabled"></td>
				<td><input class="centered char8" name="Esecond" type="text" disabled="disabled"></td>
			  </tr>
			  <tr>
				<th>Ext.</th>
				<td><input class="centered char8" name="Xhour" type="text" disabled="disabled"></td>
				<td><input class="centered char8" name="Xminute" type="text" disabled="disabled"></td>
				<td><input class="centered char8" name="Xsecond" type="text" disabled="disabled"></td>
			  </tr>
			</table>
			<table class="centered">
				<tr>
					<th></th><th>Fract. sec.</th><th>Fuseau</th><th>am/pm</th>
				</tr>
				<tr>
					<th>Dem.</th>
					<td><input class="centered digit2" name="Msdigits" type="number" min="0" max="3"></td>
					<td><select name="TimeZoneName" class="centered" size="1">
						<option value="" selected>absent</option>
						<option value="short">court</option>
						<option value="long">long</option>
						</select></td>
					<td><select name="AmPm" size="1" class="centered">
						<option value="" selected>absent</option>
						<option value="narrow">étroit</option>
							<option value="short">court</option>
							<option value="long">long</option>
						</select></td>
				</tr>
				<tr>
					<th>Intl</th>
					<td><input class="centered digit2" name="Emsdigits" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="EtimeZoneName" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="EAmPm" type="text" disabled="disabled"></td>
				</tr>
				<tr>
					<th>Ext.</th>
					<td><input class="centered digit2" name="Xmsdigits" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="XtimeZoneName" type="text" disabled="disabled"></td>
					<td><input class="centered char8" name="XAmPm" type="text" disabled="disabled"></td>
				</tr>
			</table>
			<table class="centered">
			  <tr> 
				<th></th><th colspan="2">12 h</th><th>Cycle horaire</th>
			  </tr> 
			  <tr>
				<th>Dem.</th>
				<td colspan="2"><select name="Hour12" size="1" class="centered">
					<option value="" selected>défaut</option>
					<option value="true">12 h</option>
					<option value="false">24 h</option>
					</select></td>
				<td><select name="HourCycle" size="1" class="centered">
					<option value="" selected>absent</option>
					<option value="h11">h11</option>
					<option value="h12">h12</option>
					<option value="h23">h23</option>
					<option value="h24">h24</option>
					</select></td>
			  </tr>
			  <tr>
				<th>Intl</th>
				<td>12 h</td>
				<td><input class="centered" name="Ehour12" type="checkbox" disabled="disabled"></td>
				<td><input class="centered char8" name="EhourCycle" type="text" disabled="disabled"></td>
			  </tr>
			  <tr>
				<th>Ext.</th>
				<td>12 h</td>
				<td><input class="centered" name="Xhour12" type="checkbox" disabled="disabled"></td>
				<td><input class="centered char8" name="XhourCycle" type="text" disabled="disabled"></td>
			  </tr>
			</table>
		</form>
	</section>
</div>
<section><h2 class="panelhead">Affichages calculés</h2></section>
<div class="centered autoscroll">
	<section class="outdisplay"><h3 class="panelhead">DateTimeFormat</h3>
		<table class="centered">
			<tr><th>Calendrier&nbsp;:</th><td id="Calendname"></td></tr>
		</table>
	<h4 class="panelhead">Intl standard</h4>
		<table class="centered">
			<tr><td id="Ustring"></td></tr>
		</table>
	<h4 class="panelhead">Intl étendu</h4>
		<table class="centered">
			<tr><td id="Xstring"></td></tr>
		</table>
	</section>
	<section class="outdisplay"><h3 class="panelhead">Calendrier utilisateur</h3>
		<table class="centered">
			<tr><th>Calendrier&nbsp;:</th><td id="Customname"></td></tr>
		</table>
		<h4 class="panelhead">ExtDateTimeFormat</h4>
		<table class="centered">
			<tr><td id="Cstring"></td></tr>
		</table>
	</section>
	<section class="outdisplay"><h3 class="panelhead">Champs supplémentaires</h3>
		<table class="centered"><form name="yeartype">
			<tr><th colspan="2">Année algébrique et type</th></tr>
			<tr><td id="fullyear"></td><td>
				<select name="leapyear" disabled class="centered" size="1">
					<option value="false">commune</option>
					<option value="true">longue</option>
				</select></td>
			</tr>
		</form></table>
		<table class="centered">
			<tr><th colspan="3">Calendrier en semaines</th></tr>
			<tr><th>Année</th><th>Semaine</th><th>Jour</th></tr>
			<tr><td id="weekyear"></td><td id="weeknum"></td><td id="dayownum"></td></tr>
			<tr><th>Jour&nbsp;</th><td colspan="2" id="dayname"></td></tr>
			<tr><th colspan="2">Semaines dans l'année&nbsp;: </th><td id="weeksinyear"></td></tr>
		</table>
	</section>
</div>
<footer class="centered">
 <p>Références&nbsp;: 
	<a target="_blank" href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry">Codes langues Unicode</a>, 
	<a target="_blank" href="http://twiki.org/cgi-bin/xtra/tzdatepick.html">Codes zones horaires</a>
 <br>© 2017-2020 <a href="http://www.calendriermilesien.org">www.calendriermilesien.org</a></p>
</footer>
</body>
</html>

{'fraction_non_alphanumeric': 0.21125596334608662, 'fraction_numerical': 0.013697983090076048, 'mean_word_length': 3.8653337929449614, 'pattern_counts': {'":': 0, '<': 2080, '<?xml version=': 0, '>': 2080, 'https://': 0, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3921190', 'n_tokens_mistral': 18206, 'n_tokens_neox': 14363, 'n_words': 2783}