1. 程式人生 > >jquery.ui.datepicker 新增時分秒功能

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 in the following order:

  1. jQuery
  2. jQueryUI (with datepicker and slider wigits)  http://jqueryui.com/download/並選擇theme
  3. Timepicker
頁面新增額外樣式
/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.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; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }

DEMO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312"></meta>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.3.custom.css"></link>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
</head>
<body>
<input type="text" id="datepicker"></input>

<script>
$( "#datepicker" ).datetimepicker();
</script>
</body>
</html>

相關推薦

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製作具有新增與刪除功能的表單(轉載加修改)

jQuery製作具有新增與刪除功能的表單 效果圖如下: js程式碼如下: $(document).ready(function(){ //<tr/>居中 $("#tab tr").attr("align","center"); //增加&

十、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