Datepicker формат даты как поменять

Vue 3 datepicker. Как изменить формат вводимой даты?

Сабж. Есть такой компонент для Vue 3 https://github.com/shubhadip/vuejs3-datepicker
Все неплохо работает, за исключением ручного ввода даты. Не поддерживается формат dd.MM.yyyy. Если отключить ручной ввод, то всё ок. Если же ручной ввод включить параметром typeable=»true», то форматирование не работает, и применяется формат MM.dd.yyyy поэтому при выборе числа больше 12 значение сбрасывается после закрытия календаря (т.е первое число воспринимается как месяц). То же самое при ручном вводе, принимает только формат MM.dd.yyyy

Может кто работал с этим компонентом и знает как исправить или посоветует похожий календарь с ручным вводом даты?
UPD: прошу прощения, не тот компонент указал. Верный: vuejs3-datepicker

Вопрос задан более года назад
381 просмотр

2 комментария

Простой 2 комментария

Формат даты в DateTimePicker

Проблема состоит вот в чем — из базы мне надо считать строку, выборка происходит по дате:
OleDbCommand plan = new OleDbCommand(«SELECT Administrator.ID_админа, Administrator.Фамилия, U4et_zakazov.Дата, U4et_zakazov.ID_заказов, Uslugi.Наименование INTO plan FROM Administrator, U4et_zakazov, Uslugi WHERE Administrator.ID_админа = U4et_zakazov.ID_администратора AND Uslugi.ID_услуги = U4et_zakazov.ID_услуги AND U4et_zakazov.ID_администратора=» + int.Parse(mas1[0])+» AND U4et_zakazov.Дата = #»+dateTimePicker1.Value.ToShortDateString()+»#», con);
я поставил формат даты:
dateTimePicker1.Format = DateTimePickerFormat.Custom;
dateTimePicker1.CustomFormat = «MM/dd/yyyy»;
но всьо равно выводит ошибку
Дата содержит синтаксическую ошибку в выражении запроса ‘Administrator.ID_админа = U4et_zakazov.ID_администратора AND Uslugi.ID_услуги = U4et_zakazov.ID_услуги AND U4et_zakazov.ID_администратора=1 AND U4et_zakazov.Дата = #22.05.2010#’.
такое ощущение, что строка, в которой я указал формат даты вообще не работает(

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Формат даты DateTimePicker
Всем привет! Нужно преобразовать дату в формат ДД:ММ:ГГГГ, но постоянно на выводе указываются часы.

Искать необычный формат даты в datagridview через dateTimePicker
В datagridview есть столбец Дата-Время Дата и месяц обозначается 2102 Время обозначается 12.25.

Смена даты в datetimepicker при смене времени в другом поле datetimepicker
есть два поля date time picker, одно для изменения времени второе для изменения даты. нужно при.

Как узнать количество дней между значением текущей даты и даты в поле dateTimePicker?
есть некое значение поля dateTimePicker 1. как работать например с месяцем, в этом значении.

Регистрация: 22.03.2010
Сообщений: 44

Лучший ответ

Сообщение было отмечено Lord Demos как решение

Решение

Формат выводится на самом DateTimePicker. Подправте только код:

dateTimePicker1.CustomFormat = "MM/dd/yyyy"; dateTimePicker1.Format = DateTimePickerFormat.Custom;

dateTimePicker1.Value.ToShortDateString()

Выбор дата (Date Picker)

Поле «дата» позволяет выбрать дату с помощью всплывающего окна на jquery. Это поле может использоваться для указания дат в вашей теме. Например, можно указать начальную и конечную даты.

Обратите внимание, что в предыдущих версиях ACF был параметр «Сохраняемый формат». Этот параметр позволял разработчику изменить формат даты, сохранённой в Базе Данных. Однако, этот параметр создавал много проблем и был удален. Теперь дата хранится в формате «ГГГГММДД».

Настройки

Имя	Описание
Отображаемый формат	Формат во время редактирования поля в админке.
Возвращаемый формат	Формат возвращаемого значения на бэкенде. Обратите внимание, что значение всегда сохраняется как «ГГГГММДД» в БД.
День начала недели	Нужно для использования календаря в разных странах.

Использование в шаблоне

Поле «выбор даты» вернет строку, содержащую значение даты в формате, указанном в настройках поля. В следующих примерах предполагается, что существует поле с именем «date».

Базовый

В примере показано как вывести поле «дата».

p>Дата мероприятия:  the_field('date'); ?>p>

Продвинутый

В коде ниже показано, как получить «сырое» значение (сохраненное в формате «ГГГГММДД») и преобразовать его в числовое значение, чтобы затем совершать с ним необходимые манипуляции.

  
// получем "сырое" значение $date = get_field('date', false, false); // создаем новый экземпляр класса для даты $date = new DateTime($date); ?> p>День начала мероприятия:  echo $date->format('j M Y'); ?>p>  // увеличиваем на 1 день $date->modify('+1 day'); ?> p>День окончания мероприятия:  echo $date->format('j M Y'); ?>p>

Переводы

Чтобы дата отображалась не на английском языке в WordPress есть функция date_i18n() , которая выполнит перевод.

 $dateformatstring = "l d F, Y"; $unixtimestamp = strtotime(get_field('date_picker')); echo date_i18n($dateformatstring, $unixtimestamp); ?>

Сортировка постов (записей)

В примере показано как можно отсортировать и упорядочить посты (тип постов ‘event’) с помощью запроса по произвольному полю (в нашем случае по дате).

 // получаем нужные посты $posts = get_posts(array( 'post_type' => 'event', 'meta_key' => 'date', 'orderby' => 'meta_value_num', 'order' => 'ASC' )); // цикл if( $posts )  foreach( $posts as $post )  setup_postdata( $post ); // делаем что-то. > wp_reset_postdata(); > ?>

WP_Query для сортировки по дате

В этом примере показано, как можно использовать объект WP_Query для поиска записей, где «start_date» и «end_date» указывают, что запись «активна».

 $today = date('Ymd'); $args = array ( 'post_type' => 'post', 'meta_query' => array( array( 'key' => 'start_date', 'compare' => ', 'value' => $today, ), array( 'key' => 'end_date', 'compare' => '>=', 'value' => $today, ) ), ); // получаем посты $posts = get_posts($args); ?>

jQuery UI DatePicker — Change Date Format

Perfect, thanks, why doesn’t $.datepicker.formatDate( «yy-mm-dd», new Date( 2007, 1 — 1, 26 ) ); work as in the documenation?

Aug 28, 2017 at 7:47

29 Answers 29

Here’s one specific for your code:

var date = $('#datepicker').datepicker(< dateFormat: 'dd-mm-yy' >).val();

More general info available here:

http://api.jqueryui.com/datepicker/#option-dateFormat
http://api.jqueryui.com/datepicker/#utility-formatDate

2,754 5 5 gold badges 32 32 silver badges 40 40 bronze badges
answered Aug 25, 2009 at 12:42
AvatarKava AvatarKava
15.3k 2 2 gold badges 27 27 silver badges 33 33 bronze badges

This just gives me the same format as I specified in the datepicker and not dd-mm-yy. using version 1.10. The answear below works fine.

Aug 27, 2014 at 9:34
the yy is giving me 2015 . How can I only get 15 ?
Jan 12, 2015 at 21:46
@SearchForKnowledge just use y . datepicker-formatting
Mar 24, 2015 at 17:08

pay attention that if you already previously defined a different format, this doesn’t work, you should do then $(«#datepicker»).datepicker(«option», «dateFormat», «dd-mm-yy» ).val()

May 28, 2017 at 12:39
in older versions format: ‘dd-mm-yyyy’, should work
Dec 27, 2018 at 9:06

inside the jQuery script code just paste the code.

$( ".selector" ).datepicker(< dateFormat: 'yy-mm-dd' >);

this should work.

125k 32 32 gold badges 289 289 silver badges 307 307 bronze badges
answered Aug 16, 2010 at 5:08
1,143 1 1 gold badge 7 7 silver badges 2 2 bronze badges
.selector and #datepicker are not the same. Pasting your code verbatim would not work.
Jun 3, 2011 at 12:29

The getDate method of datepicker returns a date type, not a string.

You need to format the returned value to a string using your date format. Use datepicker’s formatDate function:

var dateTypeVar = $('#datepicker').datepicker('getDate'); $.datepicker.formatDate('dd-mm-yy', dateTypeVar);

The full list of format specifiers is available here.

26.5k 28 28 gold badges 122 122 silver badges 181 181 bronze badges
answered Nov 25, 2011 at 2:40
2,917 19 19 silver badges 14 14 bronze badges

Here complete code for date picker with date format (yy/mm/dd).

Copy link below and paste in head tag :

Copy below code and paste between body tag :

 Date:

If you would like two(2) input type text like Start Date and End Date then use this script and change date format.

Two input text like :

 Start Date: End Date:

26.5k 28 28 gold badges 122 122 silver badges 181 181 bronze badges
answered Jan 28, 2012 at 6:29
379 3 3 silver badges 3 3 bronze badges

dateFormat

The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the formatDate function.

Code examples Initialize a datepicker with the dateFormat option specified.

$( ".selector" ).datepicker(< dateFormat: 'yy-mm-dd' >);

Get or set the dateFormat option, after init.

//getter var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" ); //setter $( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );

community wiki

The first line of code in this example makes the «Date Picker» work with a specific date format, rather than the default American mm/dd/yy format.

Dec 6, 2013 at 9:37
@Ryan it doesn’t work for me, do you have an example which includes all lines of code?
May 7, 2014 at 18:50

getDate function returns a JavaScript date. Use the following code to format this date:

var dateObject = $("#datepicker").datepicker("getDate"); var dateString = $.datepicker.formatDate("dd-mm-yy", dateObject);

It uses a utility function which is built into datepicker:

$.datepicker.formatDate( format, date, settings ) — Format a date into a string value with a specified format.

The full list of format specifiers is available here.

answered Dec 12, 2012 at 19:08
263k 82 82 gold badges 430 430 silver badges 523 523 bronze badges

It would have been better if you enriched @kcsoft answer (like I’m gonna do) instead of posting a new one 😉

Jan 9, 2013 at 9:19

$(«#datepicker»).datepicker(«getDate») returns a date object, not a string.

var dateObject = $("#datepicker").datepicker("getDate"); // get the date object var dateString = dateObject.getFullYear() + '-' + (dateObject.getMonth() + 1) + '-' + dateObject.getDate();// Y-n-j in php date() format

answered Aug 30, 2011 at 9:08
109 1 1 silver badge 2 2 bronze badges

answered Jan 1, 2015 at 12:35
Muddasir Abbas Muddasir Abbas
1,709 1 1 gold badge 20 20 silver badges 37 37 bronze badges

$( ".selector" ).datepicker(< dateFormat: 'dd/mm/yy' >);

and there is lots of option available For the datepicker you can find it Here

http://api.jqueryui.com/datepicker/

This is the way we call the datepicker with the parameter

$(function() < $('.selector').datepicker(< dateFormat: 'dd/mm/yy', changeMonth: true, numberOfMonths: 1, buttonImage: 'contact/calendar/calendar.gif', buttonImageOnly: true, onSelect: function(selectedDate) < // we can write code here >>); >);

answered Mar 7, 2016 at 12:53
Ritesh d joshi Ritesh d joshi
813 1 1 gold badge 12 12 silver badges 15 15 bronze badges

$("#datepicker").datepicker(< dateFormat: "yy-mm-dd" >).val()

125k 32 32 gold badges 289 289 silver badges 307 307 bronze badges
answered May 11, 2011 at 8:35
71 1 1 silver badge 1 1 bronze badge

If you need the date in yy-mm-dd format,you can use this:-

$("#datepicker").datepicker(< dateFormat: "yy-mm-dd" >);

I was in need of 06,Dec 2015,I did this:-

$("#datepicker").datepicker(< dateFormat: "d M,y" >);

answered Dec 6, 2015 at 9:26
7,127 25 25 gold badges 96 96 silver badges 163 163 bronze badges

you can simply use this format in you function just like

 $(function() < $( "#datepicker" ).datepicker(< dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true >); >);

answered Jan 6, 2016 at 10:17
377 3 3 silver badges 15 15 bronze badges

You can add and try this way:

HTML file:

JavaScript file:

$(function() < $("#demoDatepicker").datepicker(< dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, constrainInput: false >); >);

answered May 29, 2018 at 13:25
Ashraf.Shk786 Ashraf.Shk786
628 1 1 gold badge 11 11 silver badges 23 23 bronze badges

So I struggled with this and thought I was going mad, the thing is bootstrap datepicker was being implemented not jQuery so the options are different;

$('.dateInput').datepicker(< format: 'dd/mm/yyyy'>)

answered Mar 22, 2020 at 11:46
Tristanisginger Tristanisginger
2,259 4 4 gold badges 29 29 silver badges 42 42 bronze badges

Just run this HTML page, You can see several formats.

   jQuery UI Datepicker - Format date      Date: 
 Format options:

answered Jun 17, 2013 at 9:52
Constant Learner Constant Learner
525 4 4 gold badges 13 13 silver badges 31 31 bronze badges
exactly copied from : jqueryui.com/resources/demos/datepicker/date-formats.html
Oct 25, 2016 at 10:53

$("#datepicker").datepicker(< dateFormat:'d-m-yy' >);

3,057 3 3 gold badges 33 33 silver badges 41 41 bronze badges
answered Dec 11, 2015 at 11:41
Patrick Mutwiri Patrick Mutwiri
1,311 1 1 gold badge 12 12 silver badges 23 23 bronze badges

This works smoothly. Try this.

Paste these links in your head section.

Following is the JS coding.

answered Oct 29, 2018 at 9:45
11.7k 2 2 gold badges 71 71 silver badges 52 52 bronze badges

4,014 22 22 silver badges 28 28 bronze badges
answered Nov 19, 2012 at 4:05
31 1 1 bronze badge

I am using jquery for datepicker.These jqueries are used for that

Then you follow this code,

answered Oct 22, 2014 at 12:09
Sinsil Mathew Sinsil Mathew
498 6 6 silver badges 20 20 bronze badges

If you setup a datepicker on an input[type=»text»] element you may not get a consistently formatted date, particularly when the user doesn’t follow the date format for data entry.

For example, when you set the dateFormat as dd-mm-yy and the user types 1-1-1 . The datepicker will convert this to Jan 01, 2001 internally but calling val() on the datepicker object will return the string «1-1-1» — exactly what is in the text field.

This implies you should either be validating the user input to ensure the date entered is in the format you expect or not allowing the user to enter dates freeform (preferring instead the calendar picker). Even so it is possible to force the datepicker code to give you a string formatted like you expect:

var picker = $('#datepicker'); picker.datepicker(< dateFormat: 'dd-mm-yy' >); picker.val( '1-1-1' ); // simulate user input alert( picker.val() ); // "1-1-1" var d = picker.datepicker( 'getDate' ); var f = picker.datepicker( 'option', 'dateFormat' ); var v = $.datepicker.formatDate( f, d ); alert( v ); // "01-01-2001"

Be aware however that while the datepicker’s getDate() method will return a date, it can only do so much with user input that doesn’t exactly match the date format. This means in the absence of validation it is possible to get a date back that is different from what the user expects. Caveat emptor.