如何在 Jquery Date Picker 中添加请选择月份年份下拉菜单的选项?

     2023-03-30     79

关键词:

【中文标题】如何在 Jquery Date Picker 中添加请选择月份年份下拉菜单的选项?【英文标题】:How to add please select option for the month year dropdown in Jquery Date Picker? 【发布时间】:2018-08-06 07:15:13 【问题描述】:

我有一个 J 查询日期选择器,如下所示(单击链接查看图像)。日期选择器在此日期选择器中显示月份和年份下拉菜单。

https://cdn.toolset.com/wp-content/uploads/2013/05/datepicker_month_year.png?x28969

默认情况下,日期选择器显示当前选择的年份和月份。而不是年份和月份下拉菜单需要显示“请选择”文本。如果用户不选择月份和年份,则不应关闭弹出窗口。弹出窗口才会关闭选项时关闭。我们需要为此配置哪些选项。

  $('#request-dob').datepicker(
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    maxDate: new Date,
    yearRange: "-100:+0"
  );

【问题讨论】:

【参考方案1】:

我认为您可以使用输入的“占位符”属性。 请将以下代码示例复制到一个 HTML 文件中并查看结果。

<html>
    <head>
      <title>Place Holder Sample</title>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
      $( function() 
        $( "#datepicker" ).datepicker(
          showOtherMonths: true,
          selectOtherMonths: true
        );
       );
      </script>
    </head>
    <body> 
        <p>Date: <input type="text" id="datepicker" placeholder="Please Select"></p>
    </body>
</html>

【讨论】:

它提供了上一个、下一个按钮。但我想在 jquery 日期选择器的月份和年份下拉菜单上显示“请选择”文本。

如何在 Materialise Date Picker 中设置默认日期?

】如何在MaterialiseDatePicker中设置默认日期?【英文标题】:HowtosetdefaultdateinMaterializeDatePicker?【发布时间】:2021-11-1016:11:43【问题描述】:我需要在MaterializeDatePicker中将默认日期设置为now。<inputid="since"type="text"class="datepicker">&... 查看详情

根据选择禁用jQuery Date Picker中的日期

】根据选择禁用jQueryDatePicker中的日期【英文标题】:DisablingdatesinjQueryDatePickerbasedonselection【发布时间】:2015-12-3020:04:12【问题描述】:我有一个日期选择器,它包含在以下代码中:&lt;inputtype="text"class="input-texthasDat... 查看详情

如何使用 javascript/jquery 在时间字符串中添加一秒

】如何使用javascript/jquery在时间字符串中添加一秒【英文标题】:Howtoaddonesecondtoatimestringwithjavascript/jquery【发布时间】:2012-10-0918:21:12【问题描述】:我正在尝试使用Javascript创建一个计时器,但我不知道如何在时间字符串中添加... 查看详情

如何在 AntD Date range Picker 底部添加 Apply 按钮,以运行 API 调用?

】如何在AntDDaterangePicker底部添加Apply按钮,以运行API调用?【英文标题】:HowtoaddApplybuttontobottomofAntDDaterangerPicker,torunanAPIcall?【发布时间】:2021-05-2107:50:57【问题描述】:我的报告中有一个范围选择器来选择开始和结束日期。一... 查看详情

Angular 4 Date-Picker - 如何限制未来和过去的日子

】Angular4Date-Picker-如何限制未来和过去的日子【英文标题】:Angular4Date-Picker-HowtorestrictFutureandPastDays【发布时间】:2018-11-2913:23:51【问题描述】:我想使用Angular4Date-Picker限制未来和过去的日子。我只想启用当前日期[今天]。我该... 查看详情

防止在 react-date-picker 中突出显示 Today

】防止在react-date-picker中突出显示Today【英文标题】:preventhighlightingofTodayinreact-date-picker【发布时间】:2021-04-1922:24:07【问题描述】:找不到与此问题特别相关的任何内容。我从有关react-date-picker的其他问题中发现,默认情况下可... 查看详情

在 material-ui mobile-date-time-picker 中更改 AM PM 标签文本

...ate-time-picker【发布时间】:2021-10-1221:45:57【问题描述】:如何更改AM|下午|好的|取消对话框按钮文本?https://next.material-ui.com/api/mobile-date-time-picker 查看详情

如何在幻灯片中添加下一个/上一个按钮

】如何在幻灯片中添加下一个/上一个按钮【英文标题】:Howtoaddnext/prevbuttonstoaslideshow【发布时间】:2011-03-2814:27:12【问题描述】:超级新手问题,我一直在绞尽脑汁思考如何将下一个/上一个按钮添加到我由SohTanaka找到的一个简... 查看详情

如何项sql数据库中添加一年的日期

sql语句为:update表set日期字段=dateadd(m,1,日期字段)定义和用法DATEADD()函数在日期中添加或减去指定的时间间隔。语法DATEADD(datepart,number,date)date参数是合法的日期表达式。参考技术A求一个sql语句,如果指定某个年份,比如是2013年... 查看详情

使用谷歌地图在jquery mobile中添加轮播

】使用谷歌地图在jquerymobile中添加轮播【英文标题】:addcarouselinjquerymobilewithgooglemap【发布时间】:2014-04-2220:19:49【问题描述】:我想用googlemap在jquerymobile上创建一个页面。类似这样的:ReferencefromOmar但在页面下方有一个轮播,... 查看详情

el-date-picker在火狐浏览器不能正确显示的问题

参考技术A开开心心抓了一个el-date-picker来做时间选择器,谷歌浏览器上完全OK,一到火狐,雪崩,选择日期的地方全都挤在一起了。打开火狐的F12,逐一排查css样式的问题,最后发现是span里面position:absolute了,导致挤在一起。我... 查看详情

使用饿了么el-date-picker里及如何将后台给的时间戳js转化为时间格式(代码片段)

首先代码是这个样子的,使用v-model<el-date-pickerv-model="formData.createTime":disabled="true"type="datetime"value-format="yyyy-MM-ddHH:mm:ss"placeholder="选择日期"></el-date-picker>当formData.createTime接收后台 查看详情

reactreact-native日期插件m-date-picker/rmc-date-picker的使用(代码片段)

m-date-picker基于React,提供了iOS风格的日期选择方式,与原生Datepicker非常相似。主页:https://github.com/react-component/m-date-pickerDemo:http://react-component.github.io/m-date-picker/examples/popup.html推荐:★★★★★优点:使用流畅,与原生Date 查看详情

使用 v-for 在 vc-date-picker > v-text-field 中更改 :value

】使用v-for在vc-date-picker>v-text-field中更改:value【英文标题】:Change:valueinvc-date-picker>v-text-fieldusingv-for【发布时间】:2021-03-2510:39:10【问题描述】:我希望:value自动从inputValue.start更改为inputValue.end。因此,当我单击结束日期时... 查看详情

如何使用 date-picker bootstrap4 插件禁用每月 26 日至 30 日以及每个月的星期日

】如何使用date-pickerbootstrap4插件禁用每月26日至30日以及每个月的星期日【英文标题】:Howtodisablefrom26thto30thofthemonthandalsoSundaysofeverymonthusingdate-pickerbootstrap4plugin【发布时间】:2020-09-1201:57:42【问题描述】:所以任务是禁用从26日... 查看详情

如何在面向协议的网络中添加分页页面

】如何在面向协议的网络中添加分页页面【英文标题】:Howaddpageforpaginationinprotocolorientednetworking【发布时间】:2022-01-0620:12:11【问题描述】:我刚刚学习了如何创建面向协议的网络,但我只是不知道如何在协议中添加分页页面。... 查看详情

创建一个 java Date Picker 组件?

】创建一个javaDatePicker组件?【英文标题】:CreateajavaDatePickercomponent?【发布时间】:2011-02-2303:55:19【问题描述】:我有MM/dd/yyyy格式的日期选择器组件,但我想在java中创建dd/MM/yyyy形式的日期选择器。那么我在哪里可以获得建议或... 查看详情

如何使用 NPM 和 Meteor 获取 css 文件?

】如何使用NPM和Meteor获取css文件?【英文标题】:HowtorequirecssfileusingNPMandMeteor?【发布时间】:2016-04-0519:54:30【问题描述】:我想添加react-date-picker(https://github.com/zippyui/react-date-picker)。它说我需要添加行require(\'react-date-picker/index.c... 查看详情