diff options
| author | Adrián Oliva <adrian.oliva@cimat.mx> | 2023-05-19 17:34:29 -0600 |
|---|---|---|
| committer | Adrián Oliva <adrian.oliva@cimat.mx> | 2023-05-19 17:34:29 -0600 |
| commit | 3d4a589e5dc8f97a5fe94f5f8f42b97f2b6c7b52 (patch) | |
| tree | 73904da06a35fd63ac6f5291ec1f0aa1bbdedbfb | |
| parent | 07491303de190e46b53ade3609c74d826174e60b (diff) | |
| download | ToDo-App-FE-3d4a589e5dc8f97a5fe94f5f8f42b97f2b6c7b52.tar.gz ToDo-App-FE-3d4a589e5dc8f97a5fe94f5f8f42b97f2b6c7b52.zip | |
The date selection was MUCH easier than I thought...
I'm mad. :C
| -rw-r--r-- | index.html | 39 | ||||
| -rw-r--r-- | src/ToDo.jsx | 34 |
2 files changed, 16 insertions, 57 deletions
@@ -5,45 +5,6 @@ <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> - - <!--Font Awesome (added because you use icons in your prepend/append)--> - <script src="https://kit.fontawesome.com/090a180a9a.js" crossorigin="anonymous"></script> - - <!-- Include jQuery --> - <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.min.js"></script> - - <!-- Include Date Range Picker --> - <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker3.css"/> - - <script> - $(document).ready(function(){ - var date_input=$('input[name="new-todo-due-date"]'); - var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; - date_input.datepicker({ - format: 'mm/dd/yyyy', - container: container, - todayHighlight: true, - autoclose: true, - maxViewMode: 3, - todayBtn: "linked" - }) - }) - </script> - <script> - $(document).ready(function(){ - var date_input=$('input[name="edit-todo-due-date"]'); - var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; - date_input.datepicker({ - format: 'mm/dd/yyyy', - container: container, - todayHighlight: true, - autoclose: true, - maxViewMode: 3, - todayBtn: "linked" - }) - }) - </script> </head> <body> <div id="root"></div> diff --git a/src/ToDo.jsx b/src/ToDo.jsx index 569c8f4..dbbd081 100644 --- a/src/ToDo.jsx +++ b/src/ToDo.jsx @@ -15,6 +15,7 @@ export function NewToDo() { const dispatch = useDispatch(); const [new_text, set_new_text] = useState(""); + const [new_due_date, set_new_due_date] = useState(""); const [new_done, set_new_done] = useState(false); const [new_priority, set_new_priority] = useState("Low"); @@ -23,6 +24,7 @@ export function NewToDo() { $("form").get(0).reset(); // Reset form set_new_text(""); + set_new_due_date(""); set_new_done(false); set_new_priority("Low"); } @@ -88,15 +90,17 @@ export function NewToDo() { <label htmlFor="new-todo-text">Text</label> </div> <div className="input-group mb-3"> - <span className="input-group-text"> - <i className="fa-regular fa-calendar"></i> - </span> <div className="form-floating"> <input className="form-control" + type="date" id="new-todo-due-date" - name="new-todo-due-date" placeholder="Due date" + onChange={(e) => { + set_new_due_date( + e.target.value + ); + }} /> <label htmlFor="new-todo-due-date"> Due Date @@ -155,11 +159,7 @@ export function NewToDo() { dispatch( add_todo({ text: new_text, - // Cannot update date on change. :'( - due_date: - document.getElementById( - "new-todo-due-date" - ).value, + due_date: new_due_date, done: new_done, priority: new_priority, creation_date: @@ -330,16 +330,18 @@ export function ListToDos() { <label htmlFor="edit-todo-text">Text</label> </div> <div className="input-group mb-3"> - <span className="input-group-text"> - <i className="fa-regular fa-calendar"></i> - </span> <div className="form-floating"> <input className="form-control" + type="date" id="edit-todo-due-date" - name="edit-todo-due-date" placeholder="Due date" value={edit_due_date} + onChange={(e) => { + set_edit_due_date( + e.target.value + ); + }} /> <label htmlFor="edit-todo-due-date"> Due Date @@ -399,11 +401,7 @@ export function ListToDos() { edit_todo({ id: edit_id, text: edit_text, - // Cannot update date on change. :'( - due_date: - document.getElementById( - "edit-todo-due-date" - ).value, + due_date: edit_due_date, done: edit_done, priority: edit_priority, }) |