Datepicker彈出第一個焦點

我的表單的第一個輸入字段在文檔準備好幾個毫秒後獲得焦點（在我的情況下可達50 ms）。然後彈出日期選擇器，以防第一個輸入字段是日期。Datepicker彈出第一個焦點

我需要的是在頁面加載後關注第一個輸入字段，並在焦點事件上彈出日期選擇器，但不會在頁面加載後立即生效。這意味着如果第一個輸入元素是一個日期，它會獲得焦點，在點擊它之後，日期選擇器應該顯示它自己。然後所有其他日期選擇器應該彈出焦點。我需要這樣做，所以我不會再放鬆並重新獲得焦點。

<input data-calendar-format="dd.MM.yyyy"> 

$(document).ready(function() { 
    $('input[data-calendar-format]').datepicker({ 
     dateFormat: 'dd.mm.yy' 
    }); 
});

來源

2015-07-28 Lejla

是你想要的東西是什麼呢？ –

你可以做一些jsfiddle的努力？ – Janty

頁面加載。第一個輸入字段獲得焦點並將光標置於其中。點擊它之後 - 無需首先點擊日期選擇器就會顯示。帶日期選擇器的所有其他輸入都會顯示日期選擇器的焦點。 – Lejla

您可以使用beforeShow選項來防止打開datepicker選項。如果頁面剛剛加載return false。我用時間來確定剛加載的頁面;如果你打算用時間找一個適合你需要的時間。

$(document).ready(function() { 
 
    var dt = Date.now(); 
 
    $('input[data-calendar-format]').datepicker({ 
 
     dateFormat: 'dd.mm.yy', 
 
     beforeShow: function() { 
 
      if(Date.now() - dt < 51) {    
 
       return false; 
 
      } 
 
     } 
 
    }); 
 
    $(':input').first().focus().on('click',function() { 
 
     $(this).datepicker('show'); 
 
    }); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<input data-calendar-format="dd.MM.yyyy">

來源

2015-07-28 12:41:30 PeterKA

即使在這種情況下，你必須放鬆焦點，然後再次獲得它。 – Lejla

@Lejla看看更新後的版本。 ..不是因爲你有一個關注50ms後的第一個元素的過程，你不需要'.first（）。focus（）'部分。 – PeterKA

您可以在第一日期選擇器的showOn屬性更改爲button，隱藏在你的CSS的按鈕，添加一個autofocus您輸入字段。在第一個輸入中添加額外的click處理程序將有助於在單擊其他任何地方之前打開日期選擇器。

$(document).ready(function() { 
 
    $('input[data-calendar-format]').datepicker({ 
 
    dateFormat: 'dd.mm.yy', 
 
    showOn: "button" 
 
    }); 
 
    $('.more-datepickers').datepicker({ 
 
    dateFormat: 'dd.mm.yy', 
 
    showOn: "focus" 
 
    }); 
 
    $('input[data-calendar-format]').on('click', function() { 
 
    $(this).datepicker("show"); 
 
    }) 
 
});

.ui-datepicker-trigger { 
 
    display: none; 
 
}

<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
 

 
<input data-calendar-format="dd.MM.yyyy" autofocus /> 
 
<input class="more-datepickers"> 
 
<input class="more-datepickers">

來源

2015-07-28 12:56:41 DavidDomain

並不理想，但你可以有兩個初始化：一個爲所有datepickers，另一個用於第一個日期選擇器（如果它是第一個元素）：

$(document).ready(function() { 

    // all the datepickers that are not the first child 
    $('input[data-calendar-format]:not(:nth-child(1))').datepicker({ 
     dateFormat: 'dd.mm.yy' 
    }); 

    // the first child if it's a datepicker 
    $('input[data-calendar-format]:nth-child(1)').focus().datepicker({ 
     dateFormat: 'dd.mm.yy' 
    }).on("click", function() { 
     // the field is focused, so we need to trigger datepicker to show the first time 
     $(this).datepicker("show"); 
    }); 

});

更新：如果該字段關注，則需要觸發日期選擇器才能第一次顯示。添加了一個click事件來處理。

你可以看到它在做這個的jsfiddle：http://jsfiddle.net/sqjgk8y7/1/

來源

2015-07-28 12:56:50

Datepicker彈出第一個焦點

回答

相關問題