# js kalendar, der mit java.text.SimpleDateFormat kombatibel ist...



## ruutaiokwu (4. Apr 2011)

hallo zusammen,

weiss jemand von euch ob es sowas gibt?

problem ist folgendes:

wir haben eine mehrsprachige webanwendung, wo datumsfelder je nach land unterschielich angezeigt werden sollen.

auf dem server wird java.text.SimpleDateFormat verwendet, so dessen datums-format-string's ensprechen nicht der iso norm, sun hat da scheinbar ihr eigenes süppchen gekocht...

in der webapp gibt es 2 modus:

1. admin
2. user


in beiden modi wird jeweils ein hidden input field verwendet, in dem der unix-timestamp festgehalten wird. nur das wird vom server geholt.

im user-mode soll im unix-timestamp-hidden-field der wert per javascript ausgelesen werden, und anschliessend in ein span- oder p-tag geschrieben werden. unter beachtung der format-strings, welche von server ebenfalls mitgelifert werden und in einem hidden-field festgehalten sind (dd.MM.yyyy etc...)

im admin-mode soll das gleiche geschehen, nur soll man dort kein span- oder p-tag haben, sondern ein zweites feld, dieses mal nicht "hidden", sondern "text". gleichzeitig sollte ein javascript-datepicker eingesetzt werden, mit dem man das datum ändern kann.

im submit-request wird dann jeweils nur das feld mit dem unix-timestamp ausgelesen und anschliessend gespeichert werden...

weiss jemand von euch, wie das am einfachsten geht? habe bisher eine js-libeary namans simpledateformat.js gefunden welche das verhalten von java.text.SimpleDateFormat imitiert...


danke & grüsse,
jan


----------



## ARadauer (4. Apr 2011)

> auf dem server wird java.text.SimpleDateFormat verwendet, so dessen datums-format-string's ensprechen nicht der iso norm, sun hat da scheinbar ihr eigenes süppchen gekocht...


versteh ich nicht, der ist nur zum formatieren da und dem kannst du beim instanzieren dein gewünschtes format mitgeben.
Wie sieht den deiner meinung nach die ISO Norm fürs Datum aus?


----------



## ruutaiokwu (4. Apr 2011)

ISO8601

gruss, jan


----------



## maki (4. Apr 2011)

joda kann es richten: ISODateTimeFormat (Joda time 1.6.2 API)


----------



## ruutaiokwu (6. Apr 2011)

hallo zusammen,

habe das problem jetzt so gelöst:

(zwar grösstenteils js...)

[XML]<html>
	<head>
		<title>
			title
		</title>
		<script src="jquery/jquery.min.js">
		</script>
		<script src="jquery/ui/js/jquery-ui-1.8.10.custom.min.js">
		</script>
		<script src="simpledateformat.js" type="text/javascript">
		</script>
		<link rel="stylesheet" type="text/css" href="jquery/ui/css/smoothness/jquery-ui-1.8.10.custom.css" media="screen" />
		<script src="betterinnerhtml.js" type="text/javascript">
		</script>

		<script type="text/javascript">
            try
            {
                // initialize jQuery...
                jq = jQuery.noConflict();
            }
            catch(err)
            {
                alert(err);
            }
        </script>

	</head>
	<body>

		<script type="text/javascript">
			try
			{
				simpleDateFormat = new SimpleDateFormat('MMM d, yyyy');
			}
			catch(err)
			{
				alert(err);
			}
		</script>

		<input type="hidden" id="timestamp001" name="timestamp" value="1310162400000">
<input type="hidden" id="timestamp002" name="timestamp" value="1310162400000">
<input type="hidden" id="timestamp003" name="timestamp" value="1310162400000">


		<script type="text/javascript">

			function printData(arg, _date, ts_id)
			{
				try
				{
					document.getElementById(ts_id).value = _date;
					BetterInnerHTML(arg, simpleDateFormat.format(new Date(parseInt(_date))), true);
				}
				catch(err)
				{
					alert(err);
				}
			}

			function getDate(arg)
			{
				try
				{
					return new Date(arg);
				}
				catch(err)
				{
					alert(err);
				}
			}

			function showDatePicker1(arg, arg2, dp_id, ts_id)
			{
				var datapickerName = '#'+dp_id;
				var timeStampDateFormatStr = '@';

				jq(document).ready(function()
				{
					if(arg2 == true)
					{
						jq(datapickerName).datepicker(
						{
							onSelect: function(date)
							{
								try
								{
									printData(arg, jq.datepicker.formatDate(timeStampDateFormatStr, getDate(date)), ts_id);
									jq(datapickerName).hide();
								}
								catch(err)
								{
									alert(err);
									return;
								}
							}
							});
						}
						else
						{
							var _definedDate = new Date();
							_definedDate.setTime(document.getElementById(ts_id).value);

							jq(datapickerName).datepicker(
							{
								defaultDate: _definedDate,

								onSelect: function(date)
								{
									try
									{
										printData(arg, jq.datepicker.formatDate(timeStampDateFormatStr, getDate(date)), ts_id);
										jq(datapickerName).hide();
									}
									catch(err)
									{
										alert(err);
										return;
									}
								}
								});
							}

							if(jq(datapickerName) != null)
							{
								jq(datapickerName).show();
							}

							});
						}
					</script>




						<!--
							<a href="#" onclick="javascript:showDatePicker0(this);"> 09 Jul 2011 </a>
						-->

						<a href="#" onclick="javascript:showDatePicker0(this, 'datepicker001', 'timestamp001');">
							N / A
						</a>



						<div style="position: absolute; margin-top: 4px;" id="datepicker001">
						</div>


					<br />

                        <!--
                            <a href="#" onclick="javascript:showDatePicker0(this);"> 09 Jul 2011 </a>
                        -->

                        <a href="#" onclick="javascript:showDatePicker0(this, 'datepicker002', 'timestamp002');">
                            N / A
                        </a>



                        <div style="position: absolute; margin-top: 4px;" id="datepicker002">
                        </div>


                    <br />



                        <!--
                            <a href="#" onclick="javascript:showDatePicker0(this);"> 09 Jul 2011 </a>
                        -->

                        <a href="#" onclick="javascript:showDatePicker0(this, 'datepicker003', 'timestamp003');">
                            N / A
                        </a>


                        <div style="position: absolute; margin-top: 4px;" id="datepicker003">
                        </div>



					<br>
					test
					<br>
					test
					<br>
					test
					<br>
					test
					<br>
					test
					<br>
					test
					<br>
					test
					<br>
					test
					<br>
					test

					<script type="text/javascript">
						function trim12(str)
						{
							try
							{
								var str = str.replace(/^\s\s*/, ''), ws = /\s/, i = str.length;
								while (ws.test(str.charAt(--i)));
								return str.slice(0, i + 1);
							}
							catch(err)
							{
								alert(err);
							}
						}

						function showDatePicker0(self, dp_id, ts_id)
						{
							try
							{
								var _div = document.getElementById(dp_id);

								var _na = false;
								var _dateValue = self.innerHTML;

								if(trim12(_dateValue.toLowerCase()).indexOf('n / a') == 0 || _dateValue == '')
								{
									_na = true;
								}

								showDatePicker1(self, _na, dp_id, ts_id);
							}
							catch(err)
							{
								alert(err);
							}
						}
					</script>
				</body>
			</html>
[/XML]



bei *simpleDateFormat = new SimpleDateFormat('MMM d, yyyy');* müsste unter jsp ein skriptlet rein: *simpleDateFormat = new SimpleDateFormat('<%=dateFormatPattern%>');*, welches den dateformat-pattern-string ausgibt, z.b. über folgende funktion:


```
public static String getDatePattern(MessageDictionary dic) {
      	Locale mylocale = new Locale(dic.getLanguage(),dic.getCountry());      	      	
      	return ((SimpleDateFormat)DateFormat.getDateInstance(DateFormat.DEFAULT,mylocale)).toPattern();
     }
```

*MessageDictionary * ist was von uns... *simpledateformat.js* ist von tim down -> http://www.timdown.co.uk/code/simpledateformat.js -> absolut genial, imitiert das verhalten von *java.text.SimpleDateFormat*...

mit dieser lösung ist alles hoch dynamisch, und im request (zum speichern) geht jeweils nur ein unix-timestamp-wert zurück...


grüsse, jan


----------

