Jquery datetimepicker插件基本使用

这两天要做一个时间选择框,对于熟练的人来说可能很简单,但是对于我这种连jquery和js都分不清的人来说,难度还是大大的,我就在github上面找了几个插件,试了几个之后呢,发现了一个使用起来比较简便的,记录一下备忘。

此项目的git地址:https://github.com/xdan/datetimepicker

我的系统环境:LINUX

在项目主页,下载zip包,得到一个datetimepicker.zip的压缩文件,将文件解压到项目的静态文件目录里,解压后是一个名为datetimepicker-master的文件夹。
此目录机构如下:
datetimepicker结构
我们要用到的东西就在build目录下,使用插件的时候要先引入相应的cssjs文件,当然少不了jquery

<link rel="stylesheet" type="text/css" href="static/path/datetimepicker-master/build/jquery.datetimepicker.min.css" />
<script src="jquery"></script>
<script scr="static/path/datetimepicker-master/build/jquery.datetimepicker.full.min.js"></script>

导入后就可以使用了,在html中我们先定义一个input输入框

<input id="datetimepicker" type="text" />

然后调用datetimepicker插件:

$("#datetimepicker").datetimepicker();

这样就能使用了,使用默认设置,效果如下:
默认设置

默认设置是英文的,使用起来略有不便,所以要进行汉化:

$.datetimepicker.setLocale('zh');

改变日期格式:

$("#datetimepicker").datetimepicker({
    format: 'Y-m-d H:i'
});

修改这两项设置后,效果如下:
汉化,日期格式

这个插件的基本使用大概就是这样。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值