[jQuery]date-picker的使用

使用这个插件要下载两个东西,一个是date-picker.js,一个是style.css文件。其中style.css你要选取一下,因为它还包括整体的一些css设定,与date-picker.js关系不大。style.css中的 a.date-picker 需要一个图片,感觉 date-picker 中的不好看(这个你要单独下载,通过图片另存为),所以我使用了 django 中的图片,并且根据 shareplat 进行了修改。

使用 date-picker 很简单。分为以下几步(以SharePlat为例):

1. 在Html的head中加入js和css的引用

<script type="text/javascript" src="/site_media/js/calendar.js"></script>
<link href="/site_media/css/date-picker.css" rel="stylesheet" type="text/css" />

2. 在$(document).ready()中加入如下代码:

<script type="text/javascript">
$(document).ready(function(){
$.datePicker.setDateFormat('ymd','-');
$.datePicker.setLanguageStrings(['日', '一', '二', '三', '四', '五', '六'],
['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十-月', '十二月'],
{p:'上一月', n:'下一月', c:'关闭', b:'选择日期'}
);

$('#date').datePicker();
});

date-picker 可以有一些配置。

setDateFormat可以定年月日的显示和分隔符

setLanguageStrings可以设定日历的语言

然后$('#date').datePicker()就可以自动在一个input元素后面生成一个链接(它显示为一个图标),当点击这个链接时,会弹出日期选择窗口,然后就可以选择了。

3. 设定对应的元素

<input id="date" type="text" name="date"/>

这里id的值是与上面的$('#date')是匹配的。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-date-picker 默认年份是根据不同的使用情况而有所不同。在引用\[1\]中的示例中,el-date-picker的默认年份没有明确指定,因此会根据当前日期自动选择默认年份。在引用\[2\]中的示例中,el-date-picker的默认年份是根据getPastTime(1)函数返回的时间范围来确定的,该函数返回的是当前日期前一个月的时间范围。在引用\[3\]中的示例中,el-date-picker的默认年份也没有明确指定,会根据当前日期自动选择默认年份。因此,el-date-picker的默认年份是根据具体的使用情况而有所不同。 #### 引用[.reference_title] - *1* [使用element ui datapicker 选择日期范围并设置默认选择一年时间](https://blog.csdn.net/weixin_47638652/article/details/114578616)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [日期时间选择器——el-date-picker设置默认时间](https://blog.csdn.net/h_jQuery/article/details/126145071)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue+Element ui el-date-picker默认当前年月日时分秒并且可再次选择](https://blog.csdn.net/qq_52337177/article/details/125065502)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值