Форум

drkrol · #1 (**permalink**) 19.11.2016, 10:42

Здравствуйте. Подскажите, как отобразить в datepicker от jquery начальную выбранную дату, месяц, год и конечную дату, месяц, год в отдельных инпутах? https://jsfiddle.net/jw01gosb/49/ вот пример. Я пробежался по документации, но, вроде, там ничего похожего нет.

рони · #2 (**permalink**) 19.11.2016, 11:11

drkrol,
есть данные, выводите их как вам нужно

рони · #3 (**permalink**) 19.11.2016, 11:29

drkrol,
селектор в 7 строке nextUntil(????) уточните сами, согласно вашему html

function(dateText, inst, extensionRange) {
    var string = jQuery.datepicker.formatDate("d-MM-yy", extensionRange.startDate).split("-");
    $("[name=startDate]").val(extensionRange.startDateText).nextUntil("[name=endDate]").val(function(i) {
        return string[i]
    });
    string = jQuery.datepicker.formatDate("d-MM-yy", extensionRange.endDate).split("-");
    $("[name=endDate]").val(extensionRange.endDateText).nextUntil("[name=endDate]").val(function(i) {
        return string[i]
    })
};

drkrol · #4 (**permalink**) 19.11.2016, 14:48

рони,

var monthString = ['ЯНВ', 'ФЕВ', 'МАР', 'АПР', 'МАЙ', 'ИЮН', 'ИЮЛ', 'АВГ', 'СЕН', 'ОКТ', 'НОЯ', 'ДЕК'];
      var setDateStart = $('[name=startDate]').val();
      var setDateEnd = $('[name=endDate]').val();
      var setDateStartArray = setDateStart.split('-');
      var setDateEndArray = setDateEnd.split('-');


      $('.start .day').val(setDateStartArray[0]);
      $('.start .month').val(monthString[setDateStartArray[1]-1]);
      $('.start .year').val(setDateStartArray[2]);

      $('.end .day').val(setDateEndArray[0]);
      $('.end .month').val(monthString[setDateEndArray[1]-1]);
      $('.end .year').val(setDateEndArray[2]);

я вот так сделал. Так нормально? или лучше ваш вариант использовать?

drkrol · #5 (**permalink**) 19.11.2016, 14:51

Я вот еще пытался день недели вытащить. Вот где-то в сети надыбал эту строчку:

var selectedDate = $('#date_range').datepicker('getDate');
	  var curDay = selectedDate.getDay();
	  $('[name=daily]').val(curDay);

но он выводит только выбранную дату в виде числа (пн - 1, вт- 2, ср -3).
А достать день недели первого числа в диапазоне и последнего не получилось.

рони · #6 (**permalink**) 19.11.2016, 15:04

drkrol,
может документацию почитать? есть стандартная русификация и выбор формата даты: числами, именами полными или сокращёнными

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">










  <script type="text/javascript" src="/js/lib/dummy.js"></script>








    <link rel="stylesheet" type="text/css" href="/css/result-light.css">




      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>



      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>



      <link rel="stylesheet" type="text/css" href="https://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.3.custom.css">



      <script type="text/javascript" src="https://rawgit.com/Artemeey/5ebc39370e568c34f03dce1639cabee8/raw/8de40b26479c406ee9cd6f9b4b3f4ad05370a024/jquery.datepicker.extension.range.min.js"></script>



  <style type="text/css">
    .ui-datepicker .selected-start:not(.selected-end) a,
.ui-datepicker .selected-end:not(.selected-start) a {
  background: #F3FDD5;
}

.ui-datepicker .selected.first-of-month:not(.selected-start) a {
  border-left: 2px dotted #D4E7F6;
  padding-left: 1px;
}

.ui-datepicker .selected.last-of-month:not(.selected-end) a {
  border-right: 2px dotted #D4E7F6;
  padding-right: 1px;
}

  </style>

  <title>Jquery UI Datepicker - Period</title>







<script>
window.onload=function(){
$(function() {
  $.datepicker.regional['ru'] = {
        closeText: 'Закрыть',
        prevText: '&#x3c;Пред',
        nextText: 'След&#x3e;',
        currentText: 'Сегодня',
        monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь', 'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
        monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн', 'Июл','Авг','Сен','Окт','Ноя','Дек'],
        dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
        dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
        dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
        dateFormat: 'dd.mm.yy',
        firstDay: 1,
        isRTL: false,
        showOtherMonths:true,
        selectOtherMonths:true,
        changeMonth:true,
        changeYear: false,
        showAnim:'scale'
};
$.datepicker.setDefaults($.datepicker.regional["ru"]);


  $('#date_range').datepicker({
    range: 'period', // режим - выбор периода
    numberOfMonths: 2,
    onSelect: function(dateText, inst, extensionRange) {
    	// extensionRange - объект расширения

      var string = jQuery.datepicker.formatDate('DD-MM-yy', extensionRange.startDate).split('-');
      $('[name=startDate]').val(extensionRange.startDateText).nextUntil('[name=endDate]').val(function(i) {
      return string[i]
      });
      string = jQuery.datepicker.formatDate('d-MM-yy', extensionRange.endDate).split('-');
      $('[name=endDate]').val(extensionRange.endDateText).nextUntil('[name=endDate]').val(function(i) {
      return string[i]
      });

    }
  });

  $('#date_range').datepicker('setDate', ['+4d', '+8d']);

  // объект расширения (хранит состояние календаря)
  var extensionRange = $('#date_range').datepicker('widget').data('datepickerExtensionRange');
  if(extensionRange.startDateText) $('[name=startDate]').val(extensionRange.startDateText);
  if(extensionRange.endDateText) $('[name=endDate]').val(extensionRange.endDateText);
});

}

</script>


</head>

<body>
  Выберите период:
<br>
<br>
<div id="date_range"></div>
<br>
<input name="startDate">
<input type="text" value="День НЕДЕЛИ">
<input type="text" value="Месяц (словами)">
<input type="text" value="Год">
<input name="endDate">
<input type="text" value="День">
<input type="text" value="Месяц (словами)">
<input type="text" value="Год">


</body>

</html>

drkrol · #7 (**permalink**) 19.11.2016, 15:23

рони,
вот и я что-то типа этого получил. а вывести день недели первого числа и день недели второго числа - не вышло. Ну ладно... Спасибо тебе в любом случае!

Форум

Справочник

Discord чат

Курсы javascript