如何從 datepicker jQuery UI 檢索選定的日期值以觸發某些內容

Question

正如標題所提到的，我想根據 jQuery UI datepicker 中選擇的日期使用數據更新我的頁面。 因此，如果沒有選擇日期，我需要檢索當前日期值，或者檢索所選日期數據並粉碎當前日期值，以便我可以在頁面上動態顯示有關所選日期的內容。

到目前為止，這是我的日期選擇器代碼：

var date_choisie;

$( function() {
    $("#calendrier").datepicker({
        dateFormat: "yy-mm-dd",
        onSelect: function(selectedDate) {
        // console.log(selectedDate); //Selected date
        date_choisie = selectedDate; //My attempt to put selectedDate in date_choisie
        }
    })
    //set date as current by default
    $("#calendrier").datepicker('setDate', new Date());

    //get date in a variable
    date_choisie = $('#calendrier').datepicker('getDate');
    date_choisie = $.datepicker.formatDate("yy-mm-dd", date_choisie);

    // console.log(date_choisie); //2020-09-20
} );

所以我需要能夠在date_choisie獲得selectedDate （也許我應該return selectedDate ）

在此之后，我將使用 ajax 將date_choisie傳遞給我的 PHP 文件：

$.ajax({
    method: 'get',
    url : 'http://planning-ilm.atwebpages.com/userPlanning/'+ date_choisie,
    dataType : 'json',
    success: function(data){
        let semaine = document.createTextNode('Sem du ' + data.datecourante.mday + '/' + data.datecourante.mon + '/' + data.datecourante.year);
        $("#sem")[0].appendChild(semaine);
        showplannings(data.datecourante, data.message);
    }
})

該 URL 將調用以下 php 函數：

 function getUserPlanning($url){
        // Function used to get the user planning
        $today = getdate(); // This is the line i will change with the selected date

        // Searching for monday, if the selected date is not monday
        if($today ['weekday'] !== "Monday"){
            $monday = getdate(strtotime("last Monday")); //This is the line i will change with the selected date
            
            // We get everything in an array
            $dayMonthYear = dayMonthYearOfDate($monday);

            // Concatenation in string
            $dayMonthYearString = $dayMonthYear['day']. ' ' . $dayMonthYear['month']. ' ' . $dayMonthYear['year'];
        
            // We get every day of the week in array
            $theWeek = currentWeek($dayMonthYearString);

            return $error = json_encode([
                'status' => 'ok',
                'datecourante' => $monday, // Here is the monday of the selected day
                'message' => getHisPlanning($url[1], $theWeek)
            ]);
        }else{
            $dayMonthYear = dayMonthYearOfDate($today);
            $dayMonthYearString = $dayMonthYear['day']. ' ' . $dayMonthYear['month']. ' ' . $dayMonthYear['year'];
            // On a la semaine actuelle
            $theWeek = currentWeek($dayMonthYearString);

            
            return $error = json_encode([
                'status' => 'ok',
                'datecourante' => $today, // Here is the monday of the selected day
                'message' => getHisPlanning($url[1], $theWeek)
            ]);
        }
    }

以下是 getUserPlanning 中使用的函數

function dayMonthYearOfDate($dateTostring){
        // Fonction permettant de retourner le jour, le mois et l'année sous forme de tableau
        $jour = $dateTostring['mday'];
        $mois = $dateTostring['month'];
        $annee = $dateTostring['year'];

        $dateofDay = ['day' => $jour, 'month' => $mois, 'year' => $annee];
        
        return $dateofDay;
    }

function currentWeek($currentDate){
        // Fonction permettant de retourner tous les jours de la semaine courante en prenant un string
        $monday = strtotime($currentDate);
        $tuesday = strtotime("next Tuesday", strtotime($currentDate));
        $wednesday = strtotime("next Wednesday", strtotime($currentDate));
        $thursday = strtotime("next Thursday", strtotime($currentDate));
        $friday = strtotime("next Friday", strtotime($currentDate));
        $saturday = strtotime("next Saturday", strtotime($currentDate));
        $sunday = strtotime("next Sunday", strtotime($currentDate));

        $week = [$monday, $tuesday, $wednesday, $thursday, $friday, $saturday, $sunday];
        return $week;
    }

通過使用 getUserPlanning 我可以檢索在 data.datecourante 中注冊的選定日期

Answer 1

這是返回成功的主要功能

   function getUserPlanning($url){
        // Get the user planning
        $today = $url[2];
        $nameOfDay = date('l', strtotime($today));
        // echo $nameOfDay;
        // echo $url[1];

        // If it's not Monday
        if($nameOfDay !== "Monday"){
            // (format : d-m-y)
            $monday = date('d-m-Y', strtotime('previous monday', strtotime($today)));
            // $monday = getdate(strtotime("last Monday"));
            // echo("Monday : ".$monday. " ");
           
        
            //Getting all days in array
            $theWeek = currentWeek($monday);

            return $error = json_encode([
                'status' => 'ok',
                'datecourante' => $monday,
                'message' => getHisPlanning($url[1], $theWeek)
            ]);
        }
        else{
            // If already a monday is selected
            echo("ELSE today : ". $today);
            $theWeek = currentWeek($today);

            
            return $error = json_encode([
                'status' => 'ok',
                'datecourante' => $today,
                'message' => getHisPlanning($url[1], $theWeek)
            ]);
        }
    }

下面的函數在 getUserPlanning 中用於獲取數組中的天數

 function currentWeek($currentDate){
        // Get all weekdays in array
        $monday = strtotime($currentDate);
        $tuesday = strtotime("next Tuesday", strtotime($currentDate));
        $wednesday = strtotime("next Wednesday", strtotime($currentDate));
        $thursday = strtotime("next Thursday", strtotime($currentDate));
        $friday = strtotime("next Friday", strtotime($currentDate));
        $saturday = strtotime("next Saturday", strtotime($currentDate));
        $sunday = strtotime("next Sunday", strtotime($currentDate));

        // echo("Mardi".$tuesday);
        // echo("Mercredi".$wednesday);
        $week = [$monday, $tuesday, $wednesday, $thursday, $friday, $saturday, $sunday];
        return $week;
    }

最后一個函數是 data.message 應該返回的內容

    function getHisPlanning($employe, $week){
        // Used to return the planning
        $weekPlanning = array(); 
        $connexion = connexion();
        echo("employé : " . $employe . " ");

        // Retrieving planning of each day for an employee
        for($i = 0; $i < 7; $i++){
            // creating format y-m-d
            // echo($week[$i]);
            $dateCurrent = getdate($week[$i]);
            // echo($dateCurrent);
            $day = $dateCurrent['mday'];
            $month = $dateCurrent['mon'];
            $year = $dateCurrent['year'];

            // used in order to fetch date in db
            $jour = $year. '-' . $month . '-' . $day;
            echo("Jour : " . $jour . " ");

            // $request = $connexion->prepare("SELECT * FROM plannings WHERE id_employe = ? AND date_planning = ? ORDER BY id_plage");
            $request = $connexion->prepare("SELECT * FROM plannings INNER JOIN boutiques ON plannings.id_boutique = boutiques.id_boutique INNER JOIN affectations ON plannings.id_affectation = affectations.id_affectation WHERE id_employe = ? AND date_planning = ? ORDER BY id_plage");
            $request->execute(array($employe, $jour));

            // Stock planning of employee for each day
            $result = $request->fetchAll(PDO::FETCH_ASSOC);

            // Stock planning of week
            array_push($weekPlanning, $result);
        }
        return $weekPlanning;
    }

這是 Ajax 調用，用戶是一個 id，selectedDate 是選擇的日期

function AjaxCall(selectedDate, user){
    $.ajax({
        method: 'get',
        url : 'http://planning-ilm.atwebpages.com/userPlanning/'+ user + '/' + selectedDate ,
        dataType : 'json',
        success: function(data){
            // let semaine = document.createTextNode('Sem du ' + data.datecourante.mday + '/' + data.datecourante.mon + '/' + data.datecourante.year);
            // $("#sem")[0].appendChild(semaine);
            showplannings(data.datecourante, data.message);
        }
    })
}

這是節目策划電話

$(function() {
  $("#calendrier").datepicker({
    dateFormat: "yy-mm-dd",
    onSelect: function(selectedDate) {
      //show selected on screen
      $('.selectedDate').text('Selected Date: ' + selectedDate)

      //call ajax on selected date
      myAjaxCall(user, selectedDate)
    }
  })
  //set date as current by default
  $("#calendrier").datepicker('setDate', new Date());

  //get date in a variable
  let currentDate = $('#calendrier').datepicker('getDate');
  let currentDateFormat = $.datepicker.formatDate("yy-mm-dd", currentDate);

  //Show date on screen
  $('.selectedDate').text('Selected Date: ' + currentDateFormat)

  //Call ajax on load
  myAjaxCall(user, currentDateFormat) //pass current date to ajax function
});

function myAjaxCall(user, selectedDate) {
  $.ajax({
    method: 'get',
    url: 'http://planning-ilm.atwebpages.com/userPlanning/' + '/' + user + '/' + selectedDate,
    dataType: 'json',
    success: function(data) {
      //let semaine = document.createTextNode('Sem du ' + data.datecourante.mday + '/' + data.datecourante.mon + '/' + data.datecourante.year);
      //$("#sem")[0].appendChild(semaine);
      showplannings(data.datecourante, data.message);
                                                
    }
  })
}

Answer 2

您可以將ajax調用包裝在一個function ，然后在每次選擇新日期時call該函數。

要在屏幕上顯示current或selected日期，您可以使用.text函數顯示日期。 加載日期頁面后，將調用 ajax 並從PHP fetch當前date數據。

最后，一旦您執行了ajax調用，您就可以在success函數中相應地顯示PHP ajax 數據。

編輯：您也可以將selecteddate傳遞給此函數 => showplannings(data.datecourante, data.message, selectedDate); 在此函數中添加第三個argument並在您的showplannings函數中接收third參數並執行任何必要的操作。

現場演示：

 $(function() { $("#calendrier").datepicker({ dateFormat: "yy-mm-dd", onSelect: function(selectedDate) { //show selected on screen $('.selectedDate').text('Selected Date: ' + selectedDate) //call ajax on selected date myAjaxCall(selectedDate) } }) //set date as current by default $("#calendrier").datepicker('setDate', new Date()); //get date in a variable let currentDate = $('#calendrier').datepicker('getDate'); let currentDateFormat = $.datepicker.formatDate("yy-mm-dd", currentDate); //Show date on screen $('.selectedDate').text('Selected Date: ' + currentDateFormat) //Call ajax on load myAjaxCall(currentDateFormat) //pass current date to ajax function }); //Ajax call function myAjaxCall(selectedDate) { $.ajax({ method: 'get', url: 'http://planning-ilm.atwebpages.com/userPlanning/' + selectedDate, dataType: 'json', success: function(data) { //let semaine = document.createTextNode('Sem du ' + data.datecourante.mday + '/' + data.datecourante.mon + '/' + data.datecourante.year); //$("#sem")[0].appendChild(semaine); //showplannings(data.datecourante, data.message, selectedDate); //....^ - pass selected } }) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <p>Date: <input type="text" id="calendrier"></p> <p class="selectedDate"></p> <button class="callAjax">Click Ajax</button>