Как выделить даты в календаре JQM-DateBox, используя код JavaScript - PullRequest
Новая
       1

Как выделить даты в календаре JQM-DateBox, используя код JavaScript

0 голосов
/ 17 ноября 2011

как выделить ячейки в календаре двумя разными цветами, то есть некоторые ячейки в КРАСНОМ, а другие в ЗЕЛЕНОМ .. используя JavaScript

некоторый код

код javascript: показывает календарь при нажатии кнопки, и предполагается, что он устанавливает дату для календаря, но это не так. !! 

<script type="text/javascript">


        $('#linkmodelink').live('click', function() {

            $('#mydate').datebox('open');

        });
    $(document).ready(function(){

        //  $('#thisPageID').live('pagecreate', function(event) {
  // Default picker value of Jan 1, 2012
  var defaultPickerValue = [2011, 11, 29];

  // Make it a date
  var presetDate = new Date(defaultPickerValue[0], defaultPickerValue[1], defaultPickerValue[2], 0, 0, 0, 0);

  // Get Today
  var todaysDate = new Date(); 

  // Length of 1 Day
  var lengthOfDay = 24 * 60 * 60 * 1000; 

  // Get the difference
  var diff = parseInt((((presetDate.getTime() - todaysDate.getTime()) / lengthOfDay)+1)*-1,10); 

  // Set the origin date
  $('#mydate').data('datebox').options.defaultPickerValue = defaultPickerValue;

  // Set minDays to disallow anything earlier
  $('#mydate').data('datebox').options.minDays = diff; 
//});

    });
</script>

HTML-код 

<input 
                name="mydate" 
                id="mydate" 
                type="date"
                pickPageTheme="c"
                data-role="datebox"
                data-options='{"mode": "calbox", "highDates": ["2011-11-23"] }'>

            </div>
            <a href="#" id="linkmodelink" data-role="button">show cal</a>

Ответы [ 2 ]

1 голос
/ 18 ноября 2011

Хорошо, для вопроса из 2 частей, ответа из 2 частей:

Часть 1: да, ссылка, которую вы нашли: Мобильный календарь jQuery с цветами дня из 3 штатов работает очень хорошо, если предположить, что один из двух наборов дат никогда не будет выбран.Если вам нужно 2 набора выбираемых дат, используйте параметры highDates и highDatesAlt, вы можете увидеть их здесь: http://jsfiddle.net/Qve5Z/1/

Чтобы сделать их КРАСНЫМИ / ЗЕЛЕНЫМИ, вам нужно будет сделать свои собственные образцы тем,и включите их в свой сайт.Темы могут быть легко созданы здесь: http://jquerymobile.com/themeroller/

Затем, соответственно, установите параметры pickPageOHighButtonTheme и pickPageOAHighButtonTheme.

Часть 2: Ваш пример кода в основном корректен, хотяможет быть, больше, чем вы действительно хотите сделать.В этом примере я предполагаю, что вы просто хотите установить «текущую выбранную» дату календаря.В этом примере будет установлена ​​дата 2011-11-13.http://jsfiddle.net/Qve5Z/2/

Fwiw, я думаю, ваш пример кода будет работать, если вместо того, чтобы быть заключенным в: 

$(document).ready( function() {  } );

он был заключен в: 

$('html').live('pageinit', function() { });

Имейте в виду, что этот образец делает немного больше - а именно, он ограничивает количество дней, которые фактически могут быть выбраны - с первого взгляда, с любой заданной вами даты до текущей даты.Если вы хотите такое поведение, дайте мне знать, я могу привести пример, который тоже включает это.

0 голосов
/ 17 ноября 2011

Как показано на этом сайте: http://jquerymobile.com/demos/1.0rc4/docs/api/events.html существует событие под названием vmouseover, которое обозначает «Нормализованное событие для обработки событий касания или наведения мыши».

Это то, что вам нужно, возможность что-то изменить в событии, которое фактически является наведением мыши (ранее называлось hover).

в Jquery 1.7 вы можете использовать 

$("#yourElement").on("vmouseover", function(event){
    $(this).css('color', 'green')
    $(this).css('background-color', 'red')
});

Примените это для ваших различных элементов в каландре, и оно должно работать.

Вкл. (): http://api.jquery.com/on/

Css (): http://api.jquery.com/css/

и в следующий раз: приведите пример кода того, что вы уже пробовали !!

З.Ы.

...