基於另一個字段自動更改字段javascript

我正在使用此datepicker和此timepicker。我想開發JS代碼，它將確定用戶是否選擇了datepicker上的當前日期，如果是這樣，將觸發timepicker的函數，該函數將禁用實際時間之前的所有時間。我是JavaScript新手，所以我只得到了很多。基於另一個字段自動更改字段javascript

HTML：

<input id="datemax" placeholder="Enter the date of incident" type="text"/> 

<input id="timemax" placeholder="Enter the time of incident" type="text"/>

功能到當前時間之前禁用時間，這工作，但將保持不變，無論選擇何種日期：

function getCurrentTime(date) { 
    var hours = date.getHours(); 
    var minutes = date.getMinutes(); 
    var ampm = hours >= 12 ? 'pm' : 'am'; 

    hours = hours % 12; 
    hours = hours ? hours : 12; 
    minutes = minutes < 10 ? '0'+minutes : minutes; 

    return hours + ':' + minutes + ' ' + ampm; 
} 
var timesAvailable = { 
     'timeFormat': 'h:i A', 
     'disableTimeRanges': [[getCurrentTime(new Date()), '12am']] 
    }; 
$('#timemax').timepicker(timesAvailable);

我想知道什麼會被要求實施把這個JS函數放到我的表單中。我認爲需要開發第二個函數，並且需要使用var datemax = document.getElementById（「datemax」）.value;從日期字段中調用該值。

我已經開發了一點不完整的僞代碼在這裏：

function datetimeSelect{ 

    var currentDate = new Date(); 
    var day = currentDate.getDate(); 
    var month = currentDate.getMonth(); 
    var year = currentDate.getFullYear(); 

    var datemax = document.getElementById("datemax").value; 

    if (datemax === currentDate){ 

    //activate 

    'disableTimeRanges': [[getCurrentTime(new Date()), '12am']] //Can't select any time before now, greyed out 
    return false; 
    } 
    else //datemax does not equal to currentDate 
    { 
    $('#timeMax').timepicker();//Standard Datepicker and any time can be selected 
    return true; 
    {

因此，例如，如果選擇了今天這不是一個日期，timepicker將返回到它的默認功能沒有任何灰色倍。

來源

2016-09-25 MrMaestro

還有我前面指出，你可以掛接到'日期選擇我的意思是change'事件如果當用戶選擇某個日期，你可以運行一個函數，如果是的話，我可能有一個解決方案。我從來沒有使用過這個插件，所以當我去看看他們的文檔，我找不到任何事件 – Viney

是的，這可能是一個相關的解決方案。請張貼它，讓我可以看看。 – MrMaestro

竭誠爲您這個問題是值得注意的，但它是真的很難找到在當前情況下的任何解決方案下面我提出了一個一番解釋後，試圖告訴我們，如果適合您的需求。

如果你有一個回調datepicker插件，在用戶選擇一個日期後調用例如。

datepickr('#datemax',{onSelect:'someFn'});

然後

function someFn() 
{ 
    alert('somethings changed'); 
    var timesAvailable = { 
    'timeFormat': 'h:i A', 
    'disableTimeRanges': [['12am', getCurrentTime(new Date())]] 
    }; 

    $('#timemax').timepicker(timesAvailable); 

}

這本來是很容易的，但由於這是不是這樣，你可能不得不尋找其他的alternatives.Note，如果你做這樣的選擇有些日期

$("#userInput").change(function(){ 
    //same above code 
});

這是行不通的，因爲當你通過代碼改變值事件不火，這正是這個插件不即。當你點擊哪個插件是一個處理程序的文本框時，它會向你顯示它的動態html創建（日曆），你再次點擊它的某個地方，也有一個事件處理程序，它會根據點擊的位置填充一些適當的值日期）。因此，在上面的代碼中，它像分配一個change事件處理程序並期望$("#userInput").val("11");來調用處理程序;那不起作用警報永遠不會彈出。

所以我唯一可以找到的選擇並不是一種好的做法，但可以在這裏幫助您分配處理程序動態生成的元素，用於呈現日曆，在這種情況下，它們使用<table>，因此您可以分配<td>元素的代理click處理程序，並在其中寫入您的timepicker代碼。

https://jsfiddle.net/xgyh58an/

來源

2016-09-25 09:53:27 Viney

如果我不理你，你只需要使用jquery change function。

$("elementId").change(function() { 
    if(selectedDate == currentDate){ 
    //disable times previous to the actual time 
    } 
    else{ 
    } 
});

來源

2016-09-25 05:56:09 Alexandr

基於另一個字段自動更改字段javascript

回答

相關問題