<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val());
$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');
});
</script>
</head>
<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker" size="30"/></p>
<p>Format options:<br />
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<option value="d M, y">Short - d M, y</option>
<option value="d MM, y">Medium - d MM, y</option>
<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>
</div><!-- End demo -->
<div class="demo-description">
<p>jquery-ui默认的日期格式一般不是我们要的，要展现正确的格式，这个插件才有实际用途。这个例子使用下拉框的值区设定日期控件的值，我们在实际中使用可以把这个参数写死。<br>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val());
$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');
}); </p>这样的格式显示为：2012-03-16
</div><!-- End demo-description -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');
});
</script>
</head>
<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
<div class="demo-description">
<p>这个样子是我们比较喜欢和常用的，点击右边的按钮弹出控件。</p>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');
});
</div><!-- End demo-description -->
</body>
</html>
分享到：
相关推荐
最新jquery-ui-1.11.2日期控件,官网下载内涵图片和自己添加的中文辅助jquery-ui-timepicker-zh-CN.js,经过本人测试绝对可以用,不知道怎么用的百度上找个例子即可,需要导入的包 ${ctx}/plugins/jquery-ui-1.11.2/...
jquery-ui中文日历控件，使用的时候记得先把文档编码改为UTF-8，否则中文显示乱码！
日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
初步精简过的css样式，去掉了很多多余的东西 支持中文，支持选择年和月 目录： ...jquery.ui.datepicker-zh-CN.js - 本地化文件 jquery-1.6.2.min.js - JQuery1.6.2 jquery-ui-1.8.16.custom.css - 样式
这个日历控件是目前最好用的jQuery日历控件，里面有Demo，只需导入JS文件，在页面上调用控件方法就可以轻松实现日历控件。
import VueDatepickerUi from 'vue-datepicker-ui' import 'vue-datepicker-ui/lib/vuedatepickerui.css' ; Vue . component ( 'Datepicker' , VueDatepickerUi ) 要么 < script > import ' vue-datepicker...
jquery的日历控件，小巧方便 简单易用，只需一句话就可以完成复杂的日历控件调用 $('#datepicker').datepicker()。 内置开发版本，和各种ui控件，喜欢的朋友可以拿去研究
jQuery UI实际上是jQuery插件，专指由jQuery官方维护的UI方向的插件 jQuery UI 与 jquery 的主要区别是： (1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。 (2) jQuery UI则是在jQuery的...
1、jqueryui中的datepicker的简单使用说明 2、datepicker中选中日期后，不刷新datepicker的方法 3、datepicker的日程表样式。
jQuery UI实际上是jQuery插件，专指由jQuery官方维护的UI方向的插件 jQuery UI 与 jquery 的主要区别是： (1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。 (2) jQuery UI则是在...
jQuery UI Datepicker 插件和timepicker 共同组成时分秒的日历控件，包含汉化，中文显示日历样式
│ My97DatePicker 日期插件 │ Validform 表单验证插件 │ zepto zepto库 │ ueditor 百度编辑器 │ Highcharts 图表插件 │ dataTables 表格排序，检索插件 │ WebUploader 百度文件上传...
│ My97DatePicker 日期插件 │ Validform 表单验证插件 │ zepto zepto库 │ ueditor 百度编辑器 │ Highcharts 图表插件 │ dataTables 表格排序，检索插件 │ WebUploader 百度文件上传组件 │ lightbox2 ...
buttonImage: "../images/jquery/jquery-ui-datepicker-buttonimage.png", buttonImageOnly: true, changeYear: true, changeMonth: true, maxDate:0, yearRange:"2010:", dateFormat:"yymm", showDay:false...
<script src="./public/js/jquery.datepicker-zh-CN.js"></script> <script src="./public/js/jquery-ui-timepicker-addon.js"> $( "#datetimepicker" ).datetimepicker({dateFormat:"yy-mm-dd",timeFormat:"HH:mm:...
jQuery-UI-日期范围选择器建立在 jQuery UI 的 Datepicker 控件之上的范围选择器该项目目前已停用，并作为参考开放。
NULL 博文链接：https://tanling514.iteye.com/blog/2193466
jQueryUI Datepicker是一个高度可定制的插件，可以很方便的为你的页面添加日期选择功能，你可以自定义日期的显示格式 以及要使用的语言。
用于 jquery UI 的年份选择器插件，例如 datepicker。 它允许用户从列表中选择年份。 用法 在 html 页面上放置一个带有 id 或 css 类的文本框。 在指定的 id 或类名上调用yearpicker jquery 方法。 Yearpicker 准备...