Главная Посты Курсы Связь О сайте

Отличный выпадающий календарь на Jquery для Вашего сайта



Сегодня рассмотрим прекрасный календарь на Jquery для Вашего сайта. Демонстрацию можно посмотреть здесь. Календарь появляется при клике по текстовому полю. После чего, пользователь выбирает дату и время - и эти параметры автоматически прописываются в текстовом поле


Чтобы подключить данный календарь, сначала подключаем Jquery:

  <script type="text/javascript" src="jquery.js?banner=off"></script>

Затем пишем тектовое поле:

  <input type="text" value="" id="datetimepicker" name="datetimepicker"/>



Подключаем скрипт и стили:

  <script src="jquery.datetimepicker.full.js?banner=off"></script>
  <link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/>

Запускаем скрипт:

  <script>
    $.datetimepicker.setLocale('ru');

    $('#datetimepicker').datetimepicker({
      dayOfWeekStart : 1,
      lang:'ru',
      format:'d M Y H:i',
      disabledDates:['2016/09/21','2016/09/29'],
      startDate: 0,
      step:30,
      minDate:0,
      allowTimes:['10:00', '11:00', '12:00', '13:00', '14:00','15:00'],
      disabledWeekDays:[0,6]
    });
  </script>
	

Основные настройки:


format - Формат даты, который появляется в текстовом поле. d - число, D - день недели, m - пишется месяц числом, M-пишется месяц буквами, y-пишется год двумя цифрами, Y-пишется год полность.


disabledDates - Сделать дату неактивной. Писать даты нужно в таком формате 2016/09/21.


allowTimes - Сетка времени.


disabledWeekDays - Если хотим исключить какой-нибудь день недели. 0 - это воскресение, 1-понедельник, 2-вторник, 3-среда, 4-четверг, 5-пятница, 6-суббота.



Скачать календарь на Jquery

Счастливого программирования!


13-09-2016 в 08:10:37





Похожая статья:

Поле "количество товаров" для интернет-магазина средствами JavaScript

Здравствуйте! Сегодня разберём, как сделать поле "количество товаров" ...

Категория: JavaScript  Подкатегория: Скрипты
Дата: 15-01-2018 в 16:47:34 0


Комментарии:

Добрый день! А как сделать, чтобы календарь появлялся при нажатии на картинку, находящуюся рядом с полем input? При этом, когда нажимаешь на input, поле неактивно остается.
Анастасия 13-11-2018 в 17:27:15

Здравствуйте! Можно так сделать, напишите мне через ссылку "Связь", и я Вам помогу за небольшую плату.
Калужский Александр 13-11-2018 в 17:32:48



Оставить коментарий:



Напишите email, чтобы получать сообщения о новых комментариях (необязательно):


Задача против робота. Расположите картинки горизонтально: