Javascript-форум - Селектор дата-смена

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Селектор дата-смена (https://javascript.ru/forum/dom-window/66918-selektor-data-smena.html)

Селектор дата-смена

Уважаемые гуру, на работе получил такое задание, пожалуйста помогите сделать, направьте мне дуло в нужную сторону...
Нужен такой date picker (см.вложение), на анимации видно как должен работать, может, кто видел что-то подобное - сначала выбираем дату, следом появляется выбор смены...

Картинка в формате jpg. Где анимация?)

см. во вложении gif-анимацию, вот так надо сделать

вот по этому адресу можно посмотреть эту гифку... а то у меня что-то всё никак не получается залить нормально, то размер не тот, то вроде загрузилось, теперь показывает мелко, хотя там 280px...

http://www.cyberforum.ru/attachments/788811d1484842407

хм, ну так в инете подобных date picker куча, берите любой и допиливайте...

Руслан Харасов,

Цитата:

Сообщение от Руслан Харасов

сначала выбираем дату, следом появляется выбор смены

только наоборот :)

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>jQuery UI Datepicker - Default functionality</title>

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

  <style type="text/css">
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

  <script>
 $(function() {
    $("#date_eat").datepicker({
        dateFormat: "dd/mm/yy,'смена '",
        onSelect: function(a) {
              var sm = $(".sel").val()||"I";
              this.value = a + sm;
        }
    })
   $(".sel").change(function() {
   this.value && $("#date_eat").datepicker("show")
})
});
  </script>

</head>

<body>


<select class="sel" size="1">
<option value="">Выберите смену</option>
<option value="I">I</option>
<option value="II">II</option>
</select>
<p>Date: <input type="text" id="date_eat"></p>




</body>

</html>

Цитата:

Сообщение от рони

только наоборот

спасибо, но немного не то, надо именно как на gif-анимации...