JQuery UI 插件 写 calendar 控件

直接上代码

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title><link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.1.1.js"></script>                   /// 必须
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>               /// 必须
    <script>
        $(function () {
            $("#datepicker").datepicker({        /// 选项都可以不要,
                dateFormat: "yy-mm-dd",         /// 默认:mm/dd/yy , 设置格式:yy-mm-dd ,DD, d MM, yy
                showOn: "button",
                buttonImage: "../Images/calendar.gif",   /// 设置图标
                //changeMonth: true,   /// 出现月 选项
                changeYear: true    /// 可选项

            });
        });
    </script>
</head>
<div class="demo-section k-content" style="text-align: center;">
    <h4>Pick a date</h4>
    <p>Date: <input type="text" id="datepicker" value="02/27/2017"></p>
</div>

直接 这样:

    <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.1.1.js"></script>                   /// 必须
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>        

    <script>

    $( function() {

    $( "#datepicker" ).datepicker();

    } );

      </script>

 <p>Date: <input type="text" id="datepicker" value="02/27/2017"></p> 

PS: http://jqueryui.com/datepicker/#default

时间: 2024-10-10 23:23:50

JQuery UI 插件 写 calendar 控件的相关文章

jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 三.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 四.详细代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

jQuery插件之验证控件jquery.validate.js

今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jörn Zaeff

JavaScript之jQuery-8 jQuery 使用插件(zTree树插件、jQuery UI插件)

一.jQuery zTree树控件 zTree介绍 - zTree 是利用jQuery的核心代码,实现一套能完成常用功能的Tree插件 - 兼容IE.FireFox.Chrome 等主流浏览器 - 支持 JSON 数据 - 支持一次性静态生成和Ajax异步加载两种方式 - 支持tree的节点移动.编辑.删除 zTree使用步骤 - step 1: 下载zTree相关文件(js.css) - 下载地址: http://www.ztree.me/ - step 2: 引入相关文件 - css: 样式

jquery messagetip信息语提示控件

编写原因: 作为提示框,jquery有个messagebox的控件,也就是弹出的提示框.但这个控件如果不是用在需要确认的时候,单单警告提示.消息提示.失败提示时,用户还需要去点下确认,有时这操作还是挺烦的(尽管可以设置timeout,会自动消失). 控件需求: 现在需要一个简洁消息提示控件,不需确认. 1.提示框可以从顶部或底部滑入,在失效后滑出. 2.可以设置滑入时间,内容停留时间.滑出时间. PS:比较简单的控件 效果如下 编写过程: 1.在无文档的情况下, 我建议将用户能传的参数的定义写在

第七章(插件的使用和写法)(7.4 jQuery UI 插件 7.5 管理Cookie的插件 --- Cookie)

7.4 jQuery UI 插件 7.4.1 jQuery UI 简介 jQuery UI 主要分为3个部分,交互.微件和效果差: ? 交互.这里都是一些与鼠标交互相关的内容,包括拖动(Draggable).置放(Droppable).缩放(Resizable).选择(Selectable)和排序(Sortable)等待.微件(Widget)中有部分是基于这些交互组件来制作的.此库需要一个 jQuery UI 核心库 ----- ui.core.js 支持. ? 微件.这里主要是一些界面的扩展.

Semantic UI中的验证控件的事件的使用

1.Semantic UI中的验证控件,功能挺不错的,中文官网的文档写的都比较详细了,我再这里就不再进行重复了,主要是想说一下它的事件的使用方法,这个可能有部分朋友刚开始接触的时候不太了解 注意看这几个事件:前两个是对于字段验证通过和失败之后的事件的调用,后两个是对整个form是否都验证通过或者失败时调用的事件,于是我们在调用的时候可以这么写 function login() { $(".ui.form").form( { username: { identifier: 'userNa

MyEclipse添加JS插件(Spket控件)

一.安装Spket 网上更新方式 1.插件首页:http://www.spket.com        2.插件名称:Spket IDE        3.更新连接(Update Site):http://www.agpad.com/update 更新安装方法: 1.[Help]-[Software Updates]-[Find and Install...] 2.[Search for new features to install] -> [Next] 3.[New Remote Site.

Kendo UI for Angular 2 控件

Kendo UI for Angular 2 控件 伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用. 官方站点:Kendo UI for Angular 2 Kendo UI for Angular 被打包成独立的多个 NPM package,在 Progress NPM 之下 ( https://registry.npm.telerik.com/ ), 要想访问它,你需要一个激活的 Te

仿jquery mobile中的select控件效果

不说废话,直接上代码,最好将on.png和off.png也使用jquery mobile里的图片 //仿jQuery mobile Select控件 //用法box为容器id,_id指控件id,selectvalue为选中值,Value为当前值 function SelectBox(box,_id,selectvalue,Value) { if(Value != selectvalue) { $("#" + box).html("<input type=hidden v