标签: jquery-ui-datepicker

阻止用户在输入框中手动输入日期

我在两个输入框上使用jQuery datepick插件,并希望阻止我的网站用户在这些输入框中手动输入日期.我怎么能这样做?

我想我可以取消onkeydownonkeypress事件,但它并没有让我觉得特别优雅,在两个事件处理程序上做同样的事情.有没有其他方法可以达到同样的目的?

javascript jquery datepicker jquery-ui-datepicker

0
推荐指数
1
解决办法
1790
查看次数

jQuery UI Datepicker到达问题 - 离开日期

唉..我很难过......

我有一个运行jQuery日期选择器UI的预订模块.我有一个到达日期字段和一个出发日期字段,每个字段都有一个日期选择器对象.

我希望默认到达日期是今天我通过执行以下操作实现此目的:

   <script type="text/javascript">
      $(document).ready(function(){

          $(".arrive").datepicker();
          $(".depart").datepicker();

          $(".arrive").datepicker('setDate', new Date());

      });
   </script> 
Run Code Online (Sandbox Code Playgroud)

这完全有效,但是当用户选择到达日期时,我希望将出发默认日期设置为用户选择的到达日期之后的一天.我尝试使用onSelect事件作为日期选择器对象,并尝试从到达字段中提取值并添加一天但无济于事.我以前见过这个功能,我认为这不是很困难,我只是在这个问题上难以理解.有任何想法吗?我的文本字段的html如下:

<ul>
  <li>  
    <label>Arriving</label>     
    <span class="dateinput">                                                   
        <input class="arrive" type="text" value="" name="startDate" />                                  
        <img id="arrive"  src="images/calendar_icon.png"  />
        <div class="clear"></div>
    </span>
  </li>

  <li>  
    <label>Departing</label>        
    <span class="dateinput">                                
        <input class="depart" name="endDate" value="" type="text"  />               
        <img src="images/calendar_icon.png" />
        <div class="clear"></div>
    </span> 
  </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

非常感谢能帮助我解决这个问题的人.

jquery jquery-ui jquery-ui-datepicker daterangepicker

0
推荐指数
1
解决办法
2601
查看次数

如何基于另一个日期约束jQuery-ui datepicker的最小和最大日期

我想知道如何在入住日期之间设置退房日期.就像我们选择六月(当月是二月)和第十五天一样.因此它授权选择30天(30限制)之间的日期.所以结束日期是:7月15日.这里我们有一个代码:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/black-tie/jquery-ui.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<style type="text/css">
body{ font: 60.0% "Trebuchet MS", sans-serif; margin: 50px; }
</style>
<script type="text/javascript">
    $(function() {
        $('#from').datepicker({
            numberOfMonths: 2,
            firstDay: 1,
            dateFormat: 'DD dd-mm-yy',
            minDate: '0',
            maxDate: '+2Y',
            onSelect: function(dateStr) {
                var min = $(this).datepicker('getDate');
                $('#to').datepicker('option', 'minDate', min || '0');
                datepicked();
            } 
        });
        $('#to').datepicker({
            numberOfMonths: 2,
            firstDay: 1,
            dateFormat: 'DD dd-mm-yy',
            minDate: '0',
            maxDate: '+2Y',
            onSelect: function(dateStr) {
                var max = $(this).datepicker('getDate');
                $('#from').datepicker('option', 'maxDate', max || '+2Y');
                datepicked(); …
Run Code Online (Sandbox Code Playgroud)

javascript jquery jquery-ui date jquery-ui-datepicker

0
推荐指数
1
解决办法
6792
查看次数

使用changeYear选项时,我可以将jQuery日期选择器显示更多年份吗?

我在一个应用程序中使用jQuery datepicker,除其他外,它将用于插入和更新员工的出生日期.我觉得必须多次点击才能进入70年代和80年代,很多员工都出生在这几十年里很麻烦.有没有办法以更少的点击次数访问这些"更多"年份?这就是我的日期选择器的样子

$("#DateOpened").datepicker({
    dateFormat: "mm/dd/yy",
    maxDate: "+0D",
    showAnim: 'slide',
    changeMonth: true,
    changeYear: true,
    'setDate': new Date(),
    onClose: function (selectedDate) {
        $("#DateClosed").datepicker("option", "minDate", selectedDate);
    }
});
Run Code Online (Sandbox Code Playgroud)

jquery-ui jquery-ui-datepicker

0
推荐指数
1
解决办法
2173
查看次数

jQuery Datepicker onSelect事件获取类

beforeShowDay当用户点击日期时,我正试图在jQuery日期选择器的函数中设置类.像这样的东西:

$("#calendar").datepicker({
    minDate: today,
    dateFormat: dateformat,
    beforeShowDay: function(date) {         
        // set all the dates to have reserved class for now 
        return [true, 'reserved', 'this date reserved'];
    },
    onSelect: function(date, el){
        if ($(el).hasClass('reserved')){
            // on click, check if reserved class exists. 
            console.log('it is reserved!');
        } else {
            console.log('it is not reserved');
        }
    }
});
Run Code Online (Sandbox Code Playgroud)

每次点击都会返回"未保留".如何检查点击元素的类?

http://jsfiddle.net/sf90zw72/

javascript jquery jquery-ui jquery-ui-datepicker

0
推荐指数
1
解决办法
4672
查看次数

向jQuery UI Datepicker添加功能

我正在掌握精湛的jQuery UI Datepicker.

我正在尝试显示默认为当年1月到12月的日历,但允许用户在这些年中向后和向前导航.

它有其他复杂性 - 例如用户选择周而不是几天; 在适当的时候,我们的想法是,它将提供导航,以完成每周的时间表,突出显示哪些时间表已完成/提交/批准 - 但这是另一天......

现在,我可以展示一整年,并逐周亮相,但我不能纳入其他要求,即:

  1. 多年来向后和向前导航
  2. 将默认值设置为"当前年份的1月到12月",而不是"2016年1月到12月"
  3. (不太重要)给它一个更紧凑的外观

有了别人的微不足道的帮助,这就是我所拥有的......

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
    var startDate;
    var endDate;

    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }

    $('.week-picker').datepicker( {
        stepMonths: 12,
        showOtherMonths: true,
        selectOtherMonths: true,
        showWeek: true,
        numberOfMonths: [4, 3],
        minDate: new Date(2016, 1 -1, 1),
        maxDate: new Date(2016, 12 -1, 31),
        showButtonPanel: true,

        onSelect: function(dateText, inst) {
            var date = …
Run Code Online (Sandbox Code Playgroud)

jquery jquery-ui datepicker jquery-ui-datepicker

0
推荐指数
1
解决办法
344
查看次数

jquery ui datepicker关闭功能

我希望我的日期选择器可见,除非我调用关闭函数。我找不到任何功能,既不能在我选择日期时阻止关闭,也不能手动关闭它。有任何想法吗?

jquery jquery-ui datepicker uidatepicker jquery-ui-datepicker

0
推荐指数
1
解决办法
8390
查看次数

如何在 Shopify 部分设置中添加日期时间选择器

如何在Shopify -> Store -> Customize -> Section Setting.

我想添加按计划显示的滑块。因此在那里创建了输入日期时间字段的选项。现在,我希望当我单击该字段时,日期选择器应该可见,就像通常在文本框中完成的那样。

jQuery datepicker我尝试在该部分添加一个。但它总是显示日期选择器未定义。

datepicker shopify jquery-ui-datepicker

0
推荐指数
1
解决办法
9236
查看次数

Angular 2 DatePicker仅包含月份和年份

我目前正在使用https://github.com/kekeh/mydatepicker作为我的Angular 2应用程序的日期选择器.我想要一个日期选择器,它只显示角度为2的月份和年份.是否有人知道如何操作.我尝试角度2的Jquery,但没有成功.

jquery jquery-ui-datepicker bootstrap-datepicker angular

-1
推荐指数
1
解决办法
1万
查看次数

jQuery UI 日期选择器通过 AJAX 启用可见月份的日期

我在网站上运行了一个 jQuery UI 日期选择器,其中仅根据之前的下拉选择启用了某些日期(我使用 MySQL 查询来获取整年的日期)。收到日期后,它会传递给日期选择器,并且仅启用这些日期。我已经实现了所需的行为,但问题是当我获取整年的日期时,MySQL 查询需要很长时间才能获取日期。

我现在想要实现的是查询前 3 个月的日期并在 datepicker 上启用它们,一旦用户导航到接下来 3 个月的第 3 个月查询并在 datepicker 中设置日期。这样我就不会对数据库施加压力,而且日历加载速度也会更快。

这可能吗?

代码很长,我发布了启用/禁用日期的部分:

var datepickerDateFilter = function (date) {
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var date_string = date.getFullYear() + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
    if ($courseDates.length > 0 && $.inArray(date_string, $courseDates) != -1) {
        return [true];
    }
    return [false];
}; …
Run Code Online (Sandbox Code Playgroud)

javascript ajax jquery jquery-ui jquery-ui-datepicker

-2
推荐指数
1
解决办法
1601
查看次数