Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jquery mobile DateBox установить границы дат для выбора / 2 сообщений из 2, страница 1 из 1
14.12.2014, 21:50
    #38833617
michael R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery mobile DateBox установить границы дат для выбора
использую вот эту штуку
http://dev.jtsage.com/jQM-DateBox/
"mode": "calbox"

Код: html
1.
<input name="date" id="date" type="text" data-role="datebox" data-theme="a"  data-options='{"mode": "calbox" }'   readonly="readonly" >



вот у меня вопрос
как ограничить выбор дат в календаре ?
1 что бы нельзя было выбрать дату раньше текущей и соответственно нельзя выбрать предыдущий месяц при нажатии на кнопку
2 кол-во месяцев при смещении вперёд должно быть не больше 2 месяцев

может кто то сталкивался ?
спасибо
...
Рейтинг: 0 / 0
17.12.2014, 09:36
    #38835699
michael R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery mobile DateBox установить границы дат для выбора
вроде как решил вопрос с ограничениями на даты
не больше 2 месяцев вперёд
нет выбора дат назад
если кому интересно


Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQueryMobile - DateBox Demos</title>
	
		<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
	   <meta name="viewport" content="width=device-width,  minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		 <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> -->
	
		<meta http-equiv="x-ua-compatible" content="IE=edge" >

		
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" href="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="http://cdn.jtsage.com/external/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox/js/doc.js"></script>
    <script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.core.min.js"></script>
    <script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.calbox.min.js"></script>
    <script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.datebox.min.js"></script>
    <script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.flipbox.min.js"></script>
    <script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.slidebox.min.js"></script>
    <script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.customflip.min.js"></script>
    <script type="text/javascript" src="http://cdn.jtsage.com/datebox/i18n/jqm-datebox.lang.utf8.js"></script> 

<script type="text/javascript">
    jQuery.extend(jQuery.mobile, {  ajaxEnabled: false  });
	
	
	var monthIteration=0;
	var maxMonth=2;
	
	jQuery(document).on("click","a.ui-icon-plus",function(e){
		if(monthIteration+1>maxMonth) { jQuery('#date').trigger('datebox', {'method':'dooffset', 'type':'m', 'amount':-1}) }
		else monthIteration+=1;
	})
	
	jQuery(document).on("click","a.ui-icon-minus",function(e){
		monthIteration-=1;
		if(monthIteration<0) monthIteration=1;
	})
	
	$(document).on("datebox","#date", function (e, passed) { 
		if ( passed.method === "close" ) { 
		 var today = new Date();
         var curmonth = parseInt(1,10) + today.getMonth();
		 var seldate=jQuery("#date").val()
		 if(seldate=="") {monthIteration=0}
		 else{
				var objdate = new Date(seldate);
				var m1=today.getMonth();
				var m2=objdate.getMonth();
				if (objdate.getYear()>today.getYear()) m2+=12;
				monthIteration=m2-m1;
			 } 
	   }
	});
	
	</script>
</head>
<body>
 <input name="date" id="date" type="text" data-role="datebox"   data-options='{"mode": "calbox", "useNewStyle":true, "afterToday":true , "overrideDateFormat":"%Y-%m-%d","calOnlyMonth":true }'   readonly="readonly" >
</body>
	
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jquery mobile DateBox установить границы дат для выбора / 2 сообщений из 2, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]