2. 程式人生 > >jquery.ui.datepicker 新增時分秒

jquery.ui.datepicker 新增時分秒

阿新 • • 發佈：2019-02-01

轉載自：http://blog.csdn.net/softwave/article/details/7765405

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <htmllang="en"xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"
    />
  5. <title>無標題文件</title>
  6. <linkrel="stylesheet"media="all"type="text/css"href="css/jquery-ui.css"/>
  7. <linkrel="stylesheet"media="all"type="text/css"href="css/jquery-ui-timepicker-addon.css"/>
  8. <scripttype="text/javascript"src="js/jquery-1.7.2.js"></script>
  9. <scripttype
    ="text/javascript"src="js/jquery-ui.min.js"></script>
  10. <scripttype="text/javascript"src="js/jquery-ui-timepicker-addon.js"></script>
  11. <scripttype="text/javascript"src="js/jquery-ui-sliderAccess.js"></script>
  12. <scripttype="text/javascript"src="js/jquery-ui-timepicker-zh-CN.js"
    ></script>
  13. <scripttype="text/javascript">
  14.             $(function(){  
  15.                 $('#example').timepicker({});  
  16.             });  
  17. </script>
  18. <styletype="text/css">
  19.             #ui-datepicker-div, .ui-datepicker{ font-size: 80%; }             
  20. </style>
  21. </head>
  22.     <body>
  23.             <inputtype="text"name="example"id="example"value=""/>
  24.     </body>
  25. </html>
其中jquery-ui-timepicker-zh-CN.js是漢化檔案

最終效果與下圖類似。


專案地址：http://trentrichardson.com/examples/timepicker/

Github：http://github.com/trentrichardson/jQuery-Timepicker-Addon


轉載自：http://trentrichardson.com/examples/timepicker/

開始：

Getting Started

Highly Recommended

Subscribe to my blog via email and follow @PracticalWeb on Twitter. I post for nearly every new version, so you know about updates.

Download

Download/Contribute on GitHub (Need the entire repo? Find a bug? See if its fixed here)

There is a small bit of required CSS (Download):

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }

Requirements

You also need to include jQuery and jQuery UI with datepicker and slider wigits. You should include them in your page in the following order:

  1. jQuery
  2. jQueryUI (with datepicker and slider wigits)
  3. Timepicker

Version

Version 1.2

Last updated on 02/02/2013

jQuery Timepicker Addon is currently available for use in all personal or commercial projects under both MIT and GPL licenses. This means that you can choose the license that best suits your project, and use it accordingly.


Adding a Timepicker to jQuery UI Datepicker

The timepicker addon adds a timepicker to jQuery UI Datepicker, thus the datepicker and slider components (jQueryUI) are required for using any of these. In addition all datepicker options are still available through the timepicker addon.

If you are interested in contributing to Timepicker Addon please check it out on GitHub. If you do make additions please keep in mind I enjoy tabs over spaces,.. But contributions are welcome in any form.

Car BounceTry my new app to keep you informed of your car's financing status and value.

Donation

Has this Timepicker Addon been helpful to you?

 

Options

The timepicker does inherit all options from datepicker. However, there are many options that are shared by them both, and many timepicker only options:

Localization Options

currentText
Default: "Now", A Localization Setting - Text for the Now button.
closeText
Default: "Done", A Localization Setting - Text for the Close button.
amNames
Default: ['AM', 'A'], A Localization Setting - Array of strings to try and parse against to determine AM.
pmNames
Default: ['PM', 'P'], A Localization Setting - Array of strings to try and parse against to determine PM.
timeFormat
Default: "HH:mm", A Localization Setting - String of format tokens to be replaced with the time.See Formatting.
timeSuffix
Default: "", A Localization Setting - String to place after the formatted time.
timeOnlyTitle
Default: "Choose Time", A Localization Setting - Title of the wigit when using only timepicker.
timeText
Default: "Time", A Localization Setting - Label used within timepicker for the formatted time.
hourText
Default: "Hour", A Localization Setting - Label used to identify the hour slider.
minuteText
Default: "Minute", A Localization Setting - Label used to identify the minute slider.
secondText
Default: "Second", A Localization Setting - Label used to identify the second slider.
millisecText
Default: "Millisecond", A Localization Setting - Label used to identify the millisecond slider.
timezoneText
Default: "Timezone", A Localization Setting - Label used to identify the timezone slider.
isRTL
Default: false, A Localization Setting - Right to Left support.

Alt Field Options

altFieldTimeOnly
Default: true - When altField is used from datepicker altField will only receive the formatted time and the original field only receives date.
altSeparator
Default: (separator option) - String placed between formatted date and formatted time in the altField.
altTimeSuffix
Default: (timeSuffix option) - String always placed after the formatted time in the altField.
altTimeFormat
Default: (timeFormat option) - The time format to use with the altField.

Timezone Options

useLocalTimezone
Default: false - Whether to default timezone to the browser's set timezone.
defaultTimezone
Default: "+0000" - If not set, the default timezone used.
timezoneIso8601
Default: false - Whether to follow the ISO 8601 standard.
timezoneList
Default: [generated timezones] - An array of timezones used to populate the timezone select. Can be an array of values or an array of objects: { label: "EST", value: "+0400" }

Time Field Options

controlType
Default: 'slider' - Whether to use 'slider' or 'select'. If 'slider' is unavailable through jQueryUI, 'select' will be used. For advanced usage you may pass an object which implements "create", "options", "value" methods to use controls other than sliders or selects. See the _controls property in the source code for more details. 
{
	create: function(tp_inst, obj, unit, val, min, max, step){	
		// generate whatever controls you want here, just return obj
	},
	options: function(tp_inst, obj, unit, opts, val){
		// if val==undefined return the value, else return obj
	},
	value: function(tp_inst, obj, unit, val){
		// if val==undefined return the value, else return obj
	}
}
showHour
Default: true - Whether to show the hour slider.
showMinute
Default: true - Whether to show the minute slider.
showSecond
Default: false - Whether to show the second slider.
showMillisec
Default: false - Whether to show the millisecond slider.
showTimezone
Default: false - Whether to show the timezone select.
showTime
Default: true - Whether to show the time selected within the datetimepicker.
stepHour
Default: 1 - Hours per step the slider makes.
stepMinute
Default: 1 - Minutes per step the slider makes.
stepSecond
Default: 1 - Seconds per step the slider makes.
stepMilliSec
Default: 1 - Milliseconds per step the slider makes.
hour
Default: 0 - Initial hour set.
minute
Default: 0 - Initial minute set.
second
Default: 0 - Initial second set.
millisec
Default: 0 - Initial millisecond set.
timezone
Default: 0 - Initial timezone set.
hourMin
Default: 0 - The minimum hour allowed for all dates.
minuteMin
Default: 0 - The minimum minute allowed for all dates.
secondMin
Default: 0 - The minimum second allowed for all dates.
millisecMin
Default: 0 - The minimum millisecond allowed for all dates.
hourMax
Default: 23 - The maximum hour allowed for all dates.
minuteMax
Default: 59 - The maximum minute allowed for all dates.
secondMax
Default: 59 - The maximum second allowed for all dates.
millisecMax
Default: 999 - The maximum millisecond allowed for all dates.
hourGrid
Default: 0 - When greater than 0 a label grid will be generated under the slider. This number represents the units (in hours) between labels.
minuteGrid
Default: 0 - When greater than 0 a label grid will be generated under the slider. This number represents the units (in minutes) between labels.
secondGrid
Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in seconds) between labels.
millisecGrid
Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in milliseconds) between labels.

Other Options

showButtonPanel
Default: true - Whether to show the button panel at the bottom. This is generally needed.
timeOnly
Default: false - Hide the datepicker and only provide a time interface.
onSelect
Default: null - Function to be called when a date is chosen or time has changed (parameters: datetimeText, datepickerInstance).
alwaysSetTime
Default: true - Always have a time set internally, even before user has chosen one.
separator
Default: " " - When formatting the time this string is placed between the formatted date and formatted time.
pickerTimeFormat
Default: (timeFormat option) - How to format the time displayed within the timepicker.
pickerTimeSuffix
Default: (timeSuffix option) - String to place after the formatted time within the timepicker.
showTimepicker
Default: true - Whether to show the timepicker within the datepicker.
addSliderAccess
Default: false - Adds the sliderAccess plugin to sliders within timepicker
sliderAccessArgs
Default: null - Object to pass to sliderAccess when used.
defaultValue
Default: null - String of the default time value placed in the input on focus when the input is empty.
minDateTime
Default: null - Date object of the minimum datetime allowed. Also available as minDate.
maxDateTime
Default: null - Date object of the maximum datetime allowed. Also Available as maxDate.
parse
Default: 'strict' - How to parse the time string. Two methods are provided: 'strict' which must match the timeFormat exactly, and 'loose' which uses javascript's new Date(timeString) to guess the time. You may also pass in a function(timeFormat, timeString, options) to handle the parsing yourself, returning a simple object: 
{
	hour: 19,
	minute: 10,
	second: 23,
	millisec: 45,
	timezone: '-0400'
}
例子

轉載自：http://trentrichardson.com/examples/timepicker/

Examples

Basic Initializations

Add a simple datetimepicker to jQuery UI's datepicker

$('#basic_example_1').datetimepi

相關推薦

jquery.ui.datepicker 新增時分秒功能

Requirements You also need to include jQuery and jQuery UI with datepicker and slider wigits. You should include them in your page

jquery.ui.datepicker 新增時分秒

轉載自：http://blog.csdn.net/softwave/article/details/7765405 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "ht

jQuery UI Datepicker 選擇時分秒

將選擇的日期同步到另一個域中，配合altFormat可以顯示不同格式的日期字串。 初始：$('.selector').datepicker({ altField: '#actualDate' }); 獲取：var altField = $('.selector').datepicker('option

jquery-ui datepicker外掛在頁面第二次點選時無效的問題

頁面結構是這樣的： 一個大的main父頁面中嵌有子頁面，點選選單切換時，main頁面不變，子頁面切換。 a、b兩個子頁面中都有datepicker控制元件。 問題現象： 頁面初始化後，在第一個子頁面中初始化datepicker，正常。點選選單切換子頁面，其後的所有datep

09 Jquery UI Datepicker 日期拾取插件

日期 ges tps 插件 分享圖片 jquery ima com itl 09 Jquery UI Datepicker 日期拾取插件

十、jquery-ui datepicker實現選擇一週的日期

html頁面： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="

jquery ui datepicker起始日期與結束日期的校驗

1.引言 之前做的一個專案中用到jquery datepicker,看了一些網上的例子，但是不夠完整。 http://blog.csdn.net/redarmy_chen/article/details/7400723這是類似的例子，但是不夠完整，dateText型別為D

JQUERY ui datepicker整理（全）

網上搜索datepicker都不是很全面，決定自己整理下方便大家！ //兩種使用形式         $(selector,context).datepicker(options);         

jquery.ui.datepicker.js 設定預設日期

  defaultDate: '-1M',        onClose: function(dateText, inst) {             var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();     

jQuery UI Datepicker中文顯示 月份和星期

jQuery UI Datepicker這個用於日期顯示很方便而且提供了多種樣式，可以從jQuery UI中選擇喜歡的樣式和jQuery UI元件隨意下載js庫，如果只是使用datepicker那麼選擇時之選UI Core和Widgets中的Datepicker，然後選擇喜歡的主題，選擇版本，下載即可。

jQuery UI 日期選擇器（Datepicker）

jquery ui next ext style cti cto log href region 設置JqueryUI DatePicker默認語言為中文 <!doctype html><html lang="en"> <head&g

jQuery UI 實例 - 日期選擇器（Datepicker）

for cal 周四 radi panel alternate 可能 max 輸入 默認功能 日期選擇器（Datepicker）綁定到一個標準的表單 input 字段上。把焦點移到 input 上（點擊或者使用 tab 鍵），在一個小的覆蓋層上打開一個交互日歷。選擇一個日期

jQuery-ui外掛datepicker的引數使用詳解

轉載：https://blog.csdn.net/hliq5399/article/details/22406989 概述 日期選擇外掛是一個配置靈活的外掛，你可以定義它的展示方式，包括日期格式、語言、限制選擇日期範圍、新增相關按鈕以及其它導航等。

DatePicker控制元件顯示具體的時分秒

DatePicker控制元件顯示具體的時分秒 聽語音   | 瀏覽：3331 | 更新：2017-04-18 18:37 1 2 3 4 5 6 分步閱讀 在我們開發程式的

jquery-ui日期外掛datepicker平鋪在頁面

jquery-ui日期外掛datepicker一般是在點選輸入框是彈出時間選擇框，本文實現日期外掛datepicker平鋪在頁面。關於datepicker中文顯示及顯示時分秒在後面文章說明。 頁面引入<script src="lib/jQuery/jquery-ui.

使用jQuery傳送AJAX請求時在header中新增Token

在前後端分離開發中，使用者登入時迴向後臺請求一個令牌來做使用者的身份驗證，之後的每次請求中，HTTP請求頭都要攜帶上這個道理，我是閒的程式碼如下： $.ajax({ headers: { "token":userToken//此處放置請

jquery-ui日期外掛datepicker僅顯示年月且含有全部按鈕

1.日曆外掛僅顯示年月，需要在html中作如下處理： <style type="text/css"> .ui-datepicker-calendar { display: none; } </style> 2.因業務需要，需要查詢全部，

jquery-ui日期外掛datepicker顯示時分

一、日期外掛datepicker顯示年月日(見效果一) 引入如下檔案： <script src="lib/jQuery/jquery-ui.min.js"></script> <script src="lib/jQuery/jquery-ui-timepicke

jquery-ui裡面的日期控制元件 datepicker只顯示年和月

1.jquery-ui 日期控制元件可以理解有三個部分組成。頭部包含年月兩個下拉框，中間部分包每月對應的天數，尾部包含時間（時分秒） 2.要樣式上不顯示天數通過CSS樣式控制 程式碼如下： <style type="text/css">         .u

jQuery UI 外掛Datepicker Widget

原始碼： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String base