- Я использую fomanti c -ui / semanti c.
- Я выбираю дату во всплывающем окне - все в порядке.
- Я корректирую дату «вручную» - дни с месяцами меняются (гггг-мм-дд на гггг-дд-мм)
- Я хочу формат даты: гггг-мм-дд (день: 01-31, месяц 01 - 12).
- Я даю «если» для дней меньше 10, чтобы добавить «0» и для месяцев менее 10 добавить '0'
Проблема с видео: https://www.screencast.com/t/y3pnvvZVqL
$('#rangestart').calendar({
type: 'date',
firstDayOfWeek: 1,
monthFirst: false,
ampm: false,
formatter: {
date: function (date, settings) {
if (!date) return '';
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
if (month<10) var month = ("0" + (date.getMonth() + 1)).slice(-2);
else var month = date.getMonth() + 1;
if(day<10) var day = ("0" + (date.getDate())).slice(-2);
else var day = date.getDate();
return year + '-' + month + '-' + day;
}
},
endCalendar: $('#rangeend'),
text: {
days: ['Nd', 'Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'Sb'],
months: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
monthsShort: ['Sty', 'Luty', 'Mar', 'Kwi', 'Maj', 'Czer', 'Lip', 'Sierp', 'Wrz', 'Paz', 'List', 'Grud'],
today: 'Dziś',
now: 'Teraz'
}
});
$('#rangeend').calendar({
type: 'date',
firstDayOfWeek: 1,
monthFirst: false,
ampm: false,
formatter: {
date: function (date, settings) {
if (!date) return '';
var year = date.getFullYear();
var month = ("0" + (date.getMonth() + 1)).slice(-2);
var day = ("0" + (date.getDate())).slice(-2);
return year + '-' + month + '-' + day;
}
},
startCalendar: $('#rangestart'),
text: {
days: ['Nd', 'Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'Sb'],
months: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
monthsShort: ['Sty', 'Luty', 'Mar', 'Kwi', 'Maj', 'Czer', 'Lip', 'Sierp', 'Wrz', 'Paz', 'List', 'Grud'],
today: 'Dziś',
now: 'Teraz'
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Date</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.2/dist/semantic.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<body>
<div class="ui">
<div class="ui segment">
<label>Zakres dat:</label>
<div class="ui calendar" id="rangestart" style="font-size: 10px; width: 48%;">
<div class="ui input left icon" style="font-size: 10px; width: 48%;">
<i class="calendar icon"></i>
<input type="text" name="build_daytime_start" placeholder="Od" style="font-size: 10px; width: 48%;">
</div>
</div>
<div class="ui calendar" id="rangeend" style="font-size: 10px; width: 48%;">
<div class="ui input left icon" style="font-size: 10px; width: 48%;">
<i class="calendar icon"></i>
<input type="text" name="build_daytime_end" placeholder="Do" style="font-size: 10px; width: 48%;">
</div>
</div><br>
</div>
</div>
<script src="index.js"></script>