日期控件datepicker的使用

引入JS:

<script type="text/javascript" src="static/my/js/bootstrap-datepicker.min.js"></script>

<script type="text/javascript" src="static/my/js/bootstrap-datepicker-cn.js"></script>

加载页面时初始化日期控件:

$(‘#startDate‘).datepicker({
      format : ‘yyyy-mm-dd‘,
      autoclose : true
   }).on("changeDate", function(ev) {
      $("#endDate").datepicker("setStartDate", ev.date ? ev.date : "");
   });
   $(‘#endDate‘).datepicker({
      format : ‘yyyy-mm-dd‘,
      autoclose : true
   }).on("changeDate", function(ev) {
      $("#startDate").datepicker("setEndDate", ev.date ? ev.date : "");
   });

初始化日期控件:

<script type="text/javascript">
   ace.load_ajax_scripts([], function() {});
   seajs.use("${my}/js/mobileReportMng/main/main", function(main) {
      $("#begin-time").datepicker({
         minView : "month", //选择日期后,不会再跳转去选择时分秒
         format : "yyyy-mm-dd", //选择日期后,文本框显示的日期格式
         language : ‘zh-CN‘, //汉化
         autoclose : true//选择日期后自动关闭
      });
      $("#end-time").datepicker({
         minView : "month", //选择日期后,不会再跳转去选择时分秒
         format : "yyyy-mm-dd", //选择日期后,文本框显示的日期格式
         language : ‘zh-CN‘, //汉化
         autoclose : true//选择日期后自动关闭
      });
      main.init();
   });
</script>

原文地址:https://www.cnblogs.com/xyhero/p/9404436.html

时间: 2024-10-09 06:19:26

日期控件datepicker的使用的相关文章

玩转Kendo UI:日期控件DatePicker(一)

---恢复内容开始--- 前言 因为工作原因,近来接触Kendo UI比较多,这期间利用它实现了一些功能,也遇到了一些坑,国内对于这个产品的介绍也不多,所以打算写一些文章,介绍一下Kendo UI,顺便记录下自己实现某些方案时遇到的问题及解决方案. Kendo UI 简介 Kendo UI是Progress软件公司旗下的一款UI工具包产品,具有灵活性强.控件丰富.功能强大等特点.目前工具包有支持jQuery.Angular.React.Vue等版本.由博主工作上只接触了jQuery版本,所以写文

bootstrap 模态框日期控件datepicker被遮住问题的解决

找到日期输入框,并将  .class 属性的 z-index 改大 在JSP页添加样式: 这样就OK了:

WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展

一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控件Calendar自定义样式: 日期控件DatePicker自定义样式,及Label标签.水印.清除日期功能扩展: 二.Calendar自定义样式 先看看效果: 从上面图可以看出,日历的显示其实有三种状态,如下面的分解图: "日"部分的显示: "月"部分的显示: &qu

jquery日期控件使用,起止时间

1.下载jQuery核心文件,datepicker是轻量级插件,只需jQuery的min版本就行了,然后到官网http://jqueryui.com/download下载jquery-ui压缩包(可以选择喜欢的theme),里面就包含对datepicker的支持,当然您也可以网站http://marcgrabanski.com/pages/code/jquery-ui-datepicker下载datepicker,包括ui.core.js和ui.datepicker.js. 2.在HTML中引用

Jquery 日期控件

JQuery(2)  版权声明:本文为博主原创文章,未经博主允许不得转载. JQuery是一款非常优秀的脚本框架,其丰富的控件使用起来也非常简单,配置非常灵活.下面做一个使用日期插件datapicker的例子. 1.下载jQuery核心文件就不用说了吧,datepicker是轻量级插件,只需jQuery的min版本就行了,然后到官网http://jqueryui.com/download下载jquery-ui压缩包(可以选择喜欢的theme),里面就包含对datepicker的支持,当然您也可以

jQuery Datepicker日期控件

datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. Requirements Bootstrap 2.0.4+ jQuery 1.7.1+ 在线文档 Datepicker基础使用 Datepicker功能定制 Datepicker英文文档 Datepicker中文文档 Datepicker项目主页 简单示例 var nowTemp =newDate()

【MVC5】日期选择控件DatePicker

项目中使用了Bootstrap,日期控件就选择了依赖于bootstrap的DatePicker. 在App_Start\BundleConfig.cs中引用css和js文件: bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js", "~/Scripts/bootstrap-

jquery datepicker日期控件用法

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat=

JQueryUI的datepicker日期控件

在输入日期的时候我们经常需要日期控件,jQueryUI的datapicker就是一个很好的日期控件. 1.简单的datepicker控件 目录结构:(要将images图片放到css目录下面) 代码: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 日期选择器(Datepicker) - 限制日期范