Jason’s Date Input Calendar

Đoạn JS này cho phép hiển thị combobox theo đúng định dạng ngày tháng (ví dụ tháng 2 có 28 ngày chẳng hạn). Đồng thời còn cho phép chọn ngày tháng từ 1 popup mở ra rất phù hợp cho các bạn thiết kế website. Thuộc tính của đoạn script:

• Cho phép mở POPUP chọn ngày tháng.
• Tạo field ẩn cho phép bạn reset form mà không ảnh hưởng đến lựa chọn ngày tháng.
• Cho phép sử dụng nhiều Calendar trong cùng một form.
• Cho phép nhập liệu từ POPUP hoặc nhập trực tiếp.
• Hỗ trợ nhiều định dạng ngày/tháng/năm.
• Support trên nhiều hệ điều hành, nhiều trình duyệt khác nhau:- IE5+, NS6/ Firefox, Opera 7+.

Bước 1:
Bạn thêm đoạn code sau vào phần header của file:

[code lang=”javascript”] <script src="calendarDateInput.js" type="text/javascript"><!–mce:2–></script>[/code]

Tiếp theo, hãy download file calendarDateInput.js (click chuột phải rồi chọn “Save As”). Ngoài ra còn có 3 hình ảnh mà bạn cần phải download về để sử dụng. Click và chọn “save image as” để lấy ảnh về:

Bước 2:Thêm đoạn code sau vào vị trí cần hiển thị Calendar.

[code lang=”javascript”] <form>

<script type="text/javascript"><!–mce:3–></script>
<input onclick="alert(this.form.orderdate.value)" type="button" value="Show date value passed" />
</form>

[/code]

Đây là kết quả:

Bạn có thể chỉ sử dụng “DateInput()” nếu không muốn thiết lập các giá trị trong hàm

[code lang=”javascript”]DateInput(DateName, Required*, DateFormat*, DefaultDate*)[/code]

Một vài option bạn có thể sử dụng:

DateName	STRING – required. Name of the hidden form element to store the selected, formatted date  You do NOT need to create this field manually in your form.
Required	BOOLEAN – optional. Default = FALSE (TRUE or FALSE). Determines whether user is required to make a date selection. If set to false (default), an extra “blank” field appears at the top of the month select menu (above January), in which selecting it causes nothing to be passed to the form.
DateFormat	STRING- optional. Default is set as a global variable in the script (MM/DD/YYYY on this page). The format of the generated Date value. It can be one of the following: YYYYMMDD YYYY-MM-DD * YYYY-DD-MM * YYYY/MM/DD * YYYY/DD/MM * YYYY-DD-MON *   ** YYYY-MON-DD *   ** MM-DD-YYYY * DD-MM-YYYY * MM/DD/YYYY * DD/MM/YYYY * DD-MON-YYYY *   ** MON-DD-YYYY *   ** *   2-digit year can be used instead of 4-digit year ** 3-character month name abbreviation can also be specified as MMM.
DefaultDate	STRING- optional. The default date displayed in the drop down menus. If none is specified, today’s date is used.

Một vài ví dụ:

Code: <script>DateInput(‘birthdate’)</script>

Code: <script>DateInput(‘orderdate’, true)</script>

Code: <script>DateInput(‘todaydate’, true, ‘DD-MON-YYYY’)</script>

Code: <script>DateInput(‘todaydate’, true, ‘DD-MON-YYYY’, ’28-JUN-2003′)</script>

– Tùy biến:

Trong file  .js mà bạn đã download ở trên, bạn có thể thay đổi một vài thông số theo ý thích mà không ảnh hưởng đến tính năng:

• Định dạng ngày tháng mặc định.
• Thời gian calendar sẽ hiển thị.
• Năm chuyển đổi thành 2 số nếu thời gian thuộc thế kỉ 21.
• Text trong trường tháng.
• Thuộc tính của  Calendar
  • Font size và style
  • Background color
  • Độ rộng, cao của ô.
  • Màu sắc ô.
  • Highlight.
• URL đến hình ảnh.